先日、ブログテーマをCocoonに変更しました。
関連記事：シンプルイズベスト。ブログテーマを「Cocoon」に変更しました！
自分のメモがてら、カスタマイズ内容をブログで記事として公開しておきます。
同じくCocoonに変更して情報を求めている方は参考にしてください。
（各項目内に併記してあるURLはカスタマイズの際に参考にしたサイトのURLです）
そして、ここに書いてない良きカスタマイズがあれば教えてください！
- ロゴを自前のものにする
- 記事とウィジェットの見出しをカスタマイズ
- GoogleタグマネージャのトラッキングID設定
- プロフィール画像や情報、SNSページの設定
- アクセス集計機能の設定
- Googleアドセンスのコードを入れる
- グローバルナビのメニューを設定
- AMP対応
- ロゴ表示部分の幅を狭くする
- フォントを変える（メイリオにした）
- ブログトップに検索を入れる
- 検索窓に表示するデフォルト文字列の設定
- 記事の中に著者情報を入れる
- フッターのAll Rights Reserved.の表示をカスタマイズ
- カエレバの表記を変更
- 手書きで入れていた「最終更新日」を消す
- コメント欄とトラックバックを消す
- AmazonほしいものリストをつくってCocoonに公開
- AMP用のアナリティクス設定
- Cocoon設定「投稿」タブ内で関連記事をオンにして「AdSense関連コンテンツユニット」にチェック
- CSSで沈み込むボタンの実装
- No Imageの設定
- サイトの高速化設定をする
- まとめ：Cocoonの良さを消さない範囲で自分色に。
- お得情報&お知らせ
ロゴを自前のものにする
まず手を付けたのがこれ。
あんまり影響ないと思いますが、毎回表示されるものなので圧縮してサイズを落としています。
また、ブログテーマを変えたタイミングでキャッチフレーズを
「いいね！」を集積する個人メディア
に変更しています。
記事とウィジェットの見出しをカスタマイズ
はじめはデフォルトデザインの見出しで運用していましたが、簡単に差別化できる部分なのでカスタマイズしました。
このへんのデザインはしっくりくるまで試行錯誤すると思います。
見出しのデザインテンプレートと、サイドバーウィジェットの見出しのカスタマイズは、それぞれ以下のリンク先を参考にしました。
GoogleタグマネージャのトラッキングID設定
せっかくなので、このタイミングでGoogleタグマネージャを導入しました。
以下に貼ってあるCocoonのマニュアルページを見ながらやれば迷うことはなし。
Googleアナリティクスもこれで同時に設定されるので追加の処置は必要ありません。
関連記事：CocoonでAMP化させたブログのGoogle Analytics解析を正確に集計するためにやったこと
プロフィール画像や情報、SNSページの設定
ツイッターやインスタグラム等のSNSボタンに自分のアカウントを設定。
「Amazon」のところには「ほしいものリスト」へのリンクを設定することができます。
これまで外部公開用のほしいものリストは作ってなかったので、これを機に作りました。
アクセス集計機能の設定
基本的には以下のCocoonマニュアルページの通りに設定。
アクセス集計はちょっとだけ負荷がかかるようですが、サイドバーの人気記事表示に使いたいので有効化しました。
Googleアドセンスのコードを入れる
基本的には以下のCocoonマニュアルページの通りに設定。
広告の配置は今後試行錯誤しながら見直していくつもり。
グローバルナビのメニューを設定
Cocoonはページトップにアピールしたいリンクを配置することができます。
今後、ここには「はじめに読んで欲しい記事10選」とかをつくって貼るのもいいかも。
自分なりの特色が強く出る部分と思うのでカスタマイズするのがたのしみ。
AMP対応
CocoonはAMP化が標準搭載されています。
なので、AMP化は設定ページでチェックボックスにチェックを入れるだけ。
AMP化のためのプラグインは不要です。
AMPのチェックを入れてから数日待てば、GoogleにAMPページがインデックスされていきました。
ロゴ表示部分の幅を狭くする
細かいところですが、ロゴ表示部分の幅をデフォルトよりも狭めに変更しました。
一度250pxに指定してから、やっぱ150pxに落ち着いています。
これはほとんど自己満足の世界。
フォントを変える（メイリオにした）
Cocoonはフォントを変更できるので、メイリオに変更しました。
これもかゆいところに手が届いていて嬉しい機能。
ブログトップに検索を入れる
これはずっとやりたかったカスタマイズ。
前のテーマではできなかったカスタマイズだったので、ものすごくうれしい。
検索窓に表示するデフォルト文字列の設定
2018年9月時点ではCocoon公式の機能としてはまだないようなので、以下のフォーラムを参考に実装しました。
記事の中に著者情報を入れる
控えめながら存在感をアプールできる機能があったので、設定しておきました。
フッターのAll Rights Reserved.の表示をカスタマイズ
デフォルトはブログをはじめた年である「2015」でしたが、ここを「2015–2018」に変えました。
あわせて、一番下までスクロールしてくれた人向けのメッセージも一言載せました。
カエレバの表記を変更
Cocoonではなにもしなくても、デフォルトで「カエレバ」とか「ヨメレバ」の表示がいい感じになります。
それを活かすために「Amazonで最安値をチェック！」のような表記を「Amazon」だけに変更しました。
これは「Search Regex」というプラグインで一括置換しました。
手書きで入れていた「最終更新日」を消す
Cocoonでは、ブログテーマ側で
- 投稿日
- 最終更新日
を表示するようになっています。
これまでのテーマはその機能がなかったので、手書きで「最終更新日」を書き加えていましたが、不要になったので消しました。
これも「Search Regex」で処理。
ワイルドカードの書き方はこの記事を参考にしました。
コメント欄とトラックバックを消す
個人的にはつかっていない機能なので、設定から消しました。
AmazonほしいものリストをつくってCocoonに公開
公開用の「ほしいものリスト」を作成して公開しました。
参考にしたのは以下の記事。
関連記事：新しいコミュニケーションツールとして「Amazonほしいものリスト」をつくりました！
AMP用のアナリティクス設定
AMP化するとアナリティクスの設定変更が必要なので、以下を参考に行いました。
Cocoon設定「投稿」タブ内で関連記事をオンにして「AdSense関連コンテンツユニット」にチェック
記事下に「関連コンテンツ」の広告パーツを表示するようにしました。
さらに表示数を3行✕4列にして、さらにAMPでもいい感じに表示できるよう出し分けの設定をしました。
CSSで沈み込むボタンの実装
Cocoon自体のカスタマイズとはまた別だけど、最近やったのがこれ。
好きなところでこんな感じのボタンが作れて便利だし、沈み込むギミックがかわいいです。
参考にしたのはdelaymaniaさん。デザインよくてめっちゃ痺れる憧れる……！
No Imageの設定
アイキャッチがない記事などがデフォルトのNo Image画像だとカッコ悪いので、かっこいいクロワッサンの画像を投入しました。
サイトの高速化設定をする
Cocoonはサイトの高速化設定をチェックボックスひとつで行うことができます。
PHPバージョンが古い状態で試したらブログが真っ白になって焦りましたが、最新にしてから再度試したらうまくいきました。
ちなみに、Jetpackの圧縮機能ももともとONにしています。
画面外の画像読み込みをあえて遅らせることでページ表示を高速化するプラグイン「LazyLoad」と同じ機能はJetpackでも実現できてるっぽいので、LazyLoadはこのタイミングで消しました。
関連記事：WordPressブログでつかってるプラグイン14個（2018年5月版）。Cocoon導入で5個減。
関連記事：ネットオウル「ミニバード」のPHPバージョンを最新版にアップデートする方法
まとめ：Cocoonの良さを消さない範囲で自分色に。
今回のカスタマイズで気をつけたのは「できるだけCocoonの良さを消さない」こと。
カスタマイズでごちゃごちゃさせてしまっては、せっかくのテーマの持つ良さが失われてしまうので。
また何かカスタマイズしたら追記します！
