はじめに
色々ブログの記事書いてた頃から大分時間も経ったんで、記録的な感じで現在のブログ環境まとめて見ます。
振り返った時に役立ちますように！
テーマをCOCOONに替えました
2019年9月26日現在、COCOONというテーマを使っています。
COCOONのページはこちら。
以前使ってたテーマは STINGER Plus2 。
こちらも多機能で良いテーマでした。
COCOONに替えたきっかけは、シンプルなデザインだったから。
スマホメインのデザインにかえたくて、できるだけ装飾のないテーマを探していて見つけました。
シンプルなデザインですが多機能で、必要なくなったプラグインもいくつかあり、おかげで管理しやすくなりました。
まずはテーマ変更にともなって変わった点をあげてみます。
使わなくなったプラグイン
以下のプラグインはすべてCOCOONの機能で置き換えできました。
- AddToAny Share Buttons：シェアボタン追加
- Contextual Related Posts：関連記事
- Easy Table of Contents ：目次
- Header Footer Code Manager：ヘッダー・フッターにコードを貼り付け
COCOONの設定
COCOONは本当に多機能で、ほとんど把握できていません。
ですので触ったところだけ。
スキン
なしに設定しています。
全体
キーカラー：
サイトキーカラーとサイトキーテキストカラーを設定しています。
モバイルを別に設定できるのがいいですね。
サイトフォント：Noto Sans JP 16Px
サイドバーの表示状態：すべてのページで非表示
サイドバーはスマホだと、記事の下にずらーっと続いて嫌なので使ってません。
ヘッダー
ヘッダーロゴ：
背景透明な画像を使っているので、設定で背景変更できます。
あんまりこの辺詳しく書いてもしかたないか。
広告
広告の表示箇所を変更できます。
僕はまだ全部自動ですので使っていません。
AdSenseのコードをヘッダーに貼り付ける場合はここではありません。
レスポンシブコードとリンクユニット用のコードだけです。
タイトル
フロントページタイトル：サイト名
キャッチフレーズが出ない方を選択しています。
SEO
初期設定のまま。
OGP
初期設定のまま。
アクセス解析・認証
解析全般：サイト管理者も含めてアクセス解析する。チェック外しています。
Google Analytics トラッキングID：UA-から始まるトラッキングIDを入れるのはここ。
その他のアクセス解析・認証コード設定 ヘッド用コード：Google AdSenseのコードはここです。ヘッダー用ではないので注意。
カラム
メインカラムの幅、余白、枠線の設定です。
コンテンツ幅を600pxにしています。
他、たいしたことはしてません。
インデックス
リスト表示するときの設定です。
確か変更していないはず。
投稿
関連記事設定：
関連記事を表示する：チェックしています。
関連性：カテゴリー
関連記事見出し：関連記事。あなたにおすすめとかに変えてもいいかも。
表示タイプ：縦型カード4列。
表示数：4
取得期間：全期間
投稿関連情報の表示：
スニペット（抜粋）の表示：チェック外しています。
投稿日の表示：チェック外しています。
更新日の表示：チェック外しています。
投稿者の表示：チェック外しています。
パンくずリスト設定：
記事タイトル：パンくずリストに記事タイトルを含める。チェック入れています。
固定ページ
初期設定のまま。
本文
本文行間設定 本文余白：
行の高さ： 1.4
行の余白：0.4em
投稿方法表示設定 投稿関連情報：
投稿日の表示：チェック入れています。
更新日の表示：チェック入れています。
目次
目次設定：
目次の表示：目次を表示する。チェック入れています。
表示ページ：投稿ページにだけチェック入れています。
目次タイトル：ひらがなで「もくじ」としています。
表示条件：２。２つ以上見出しがあるときに目次がでるようにしています。
SNSシェア
本文上も下も同じにしています。
全項目と使用項目はこんな感じ。
- はてなブックマーク
- LINE@
- タイトルとURLをコピー
イラスト描いてるので、Pinterestも入れてあります。
ぜひシェアしてください！
SNSフォロー
初期設定のまま。
画像
本文画像設定：
アイキャッチの表示：本文上にアイキャッチを表示する。チェック外しています。
アイキャッチの自動設定：アイキャッチ自動設定を有効にする。チェック入れています。
画像の囲み効果：シャドー（ペーパー）
画像の拡大効果：なし
全体画像設定：
サムネイル画像：1:1（正方形）
ブログカード
COCOONは本文にURLを入れると、ブログカード形式で表示してくれます。
そのブログカードの設定です。
シンプルなデザインで気に入っていて、そのまま使っています。
コード
初期設定のまま。
僕はコード書かないので。
コメント
初期設定のまま。
コメントはTwitter@igamisatoshiへ！
通知
初期設定のまま。
アピールエリア
ヘッダー下でアピールしたい内容を入力します。
初期設定のまま。
おすすめカード
初期設定のまま。
カルーセル
ヘッダー下で記事をくるくるできます。
使っていないので初期設定のまま。
フッター
フッター画像や色の設定です。
ボタン
トップへ戻るボタン設定 アイコンフォント：上向きの「≪」に変更しています。
モバイル
モバイル環境で表示するレイアウトの設定です。
初期設定のまま。
404ページ
初期設定のまま。
AMP
初期設定のまま。
PWA
初期設定のまま。
管理者画面
初期設定のまま。
ウィジェット
初期設定のまま。
ウィジェットエリア
初期設定のまま。
エディター
エディター共通設定
Gutenberg：Gutenbergエディターを有効にする。チェック外しています。
旧エディター設定
文字カウンター：タイトル等の文字数カウンター表示。チェック入れています。
確認ダイアログ：ページ公開前に確認アラートを出す。チェック入れています。
API
もしもアフィリエイト経由で使っています。
もしもアフィリエイト：Amazon a_id と 楽天a_id を設定。
設定方法はこちらを参考にしてください。
その他
初期設定のまま。
執筆環境
続いて執筆環境です。
WordPressで直接記事書いています。
ATOMもVSコードも使っていません。
ネタのような下書きのようなものは、Google keep で書いています。
エディターはClassicです。
Gutenbergは使っていません。
通常の使い方だと行頭の空白が消えてしまうのです。
どうしても、行頭に空白を使いたいのです。
個人的にこっちのほうが読みやすいから。
行頭に空白を空けるために使ってるプラグインはこちら。
- Classic Editor
- TinyMCE Advanced
段落を表す行頭の空白を空けたくて、どうにかできないか調べた結果です。
読みにくいって言う人もいるけど、スマホなら逆に必要だと思うんです。
レスポンシブだと、どこで改行されるかこちらでコントロールできないから。
段落で改行するのも1画面に入る情報が減って、スクロールする必要がでて読みづらいって感じてます。
といっても、1行で改行するような変則的な書き方もしてるから、厳密にスタイル守るつもりもないんだけど。
あくまで個人的な意見で、他の人の意見を否定するつもりはありません。
みなさん、本当にいろいろ考えていてすごいと思う。
詳しくはこちらの記事へ。
WP-Yomigana よみがな入力
COCOONでもブロックエディターだとふりがなボタンがあるようですが、Classic Editorなので使えません。
代わりにこちらを使っています。
読めない漢字でも使うんですが、英単語で使うことも多いです。
単語をアルファベットで書けて、カタカナ読みを書いています。
カタカナ読みが正しいか不安な時もあるのですが。
おわりに
今回書いた内容は僕の備忘録のようなものです。
ですが、これからCOCOONを使う人へ何かの参考になれば書いた意味もあると思います。
意味あればいいなぁ～。
何か質問などあれば、僕のTwitterへ！