WordPressテーマ「Cocoon」は様々なカスタマイズができます。
この記事では、Cocoonを使っている方におすすめのカスタマイズをまとめました。
![](https://yuzuyu3.com/wp-content/uploads/2018/03/07yuzu007.gif)
コピペでできますので、Cocoonをお使いの方ならどなたでもかんたんにカスタマイズすることができます。よかったら参考にしてみてください。
まずはCocoonの基本設定をチェック!
![](https://yuzuyu3.com/wp-content/uploads/2018/03/07yuzu007.gif)
ホームイメージの設定
Cocoonを使い始めたときに、見落としやすいのが「ホームイメージ」の設定です。自分のサイトらしいホームイメージを設定してみましょう。
![](https://yuzuyu3.com/wp-content/uploads/2018/11/ipad-1044716_960_720-160x90.jpg)
Cocoonの高速化設定
Googleがサイトの表示速度を重視するようになり、「いかにページを速く表示するか」が重要になりました。
Cocoonの「高速化」機能や、プラグインを使ってサイトを高速化してみましょう。
![](https://yuzuyu3.com/wp-content/uploads/2018/05/050703-160x90.jpg)
Cocoonを見やすくするカスタマイズ
![](https://yuzuyu3.com/wp-content/uploads/2018/03/07yuzu007.gif)
カテゴリ表示にアイコンや線を入れる
サイドバー(サイドウィジェット)のカテゴリ表示は、ぜひカスタマイズしたい項目です。アイコンや線を入れると、とても見やすくなります。
![](https://yuzuyu3.com/wp-content/uploads/2019/01/0111a014-160x90.jpg)
カテゴリ表示をコンパクトにする
Cocoonデフォルトのカテゴリ表示は、行間が広めになっています。表示をコンパクトにすると、見栄えがグッとよくなります。
![](https://yuzuyu3.com/wp-content/uploads/2019/01/011103-160x90.jpg)
サイドバーのデザインを変えるカスタマイズ
サイドバーの見出しを自分好みにカスタマイズする方法です。サイドバーのデザインを変えると、サイトの見栄えがガラッと変わります。
![](https://yuzuyu3.com/wp-content/uploads/2019/04/0412011-160x90.jpg)
ページネーションのカスタマイズ
ページネーション(ページ送り)は、ぜひカスタマイズしたい項目の1つです。コピペでかんたんにデザインを変えられます。
![](https://yuzuyu3.com/wp-content/uploads/2019/02/0204tit02-160x90.png)
「ボックス(白抜き)」の枠の色や太さを変える
Cocoonのビジュアルエディタには、囲み枠をかんたんにつけられる「ボックス(白抜き)」機能がついています。その枠の色や太さを自分好みに変えるカスタマイズです。
![](https://yuzuyu3.com/wp-content/uploads/2019/06/0627012-160x90.jpg)
リスト(箇条書き)の点を画像にする
リスト(箇条書き)の点を画像にするカスタマイズです。チェックマークなど、好きな画像に置きかえることができます。
![](https://yuzuyu3.com/wp-content/uploads/2019/04/0403t01-160x90.jpg)
Cocoonのこだわりカスタマイズ
![](https://yuzuyu3.com/wp-content/uploads/2018/03/07yuzu007.gif)
固定ページの日付を非表示にする
「お問い合わせ」や「プロフィール」など、デザイン的に日付を表示しないほうがいいページがあります。そんな時におすすめのカスタマイズです。
![](https://yuzuyu3.com/wp-content/uploads/2019/03/0331t01-160x90.jpg)
目次の色だけを変える
Cocoonは記事に目次を挿入することができます。初期設定でもバランスのいいデザインで、色を変えるだけでもかなり雰囲気が変わります。
![](https://yuzuyu3.com/wp-content/uploads/2019/11/cocoon-toc-color09-160x90.jpg)
CSSが反映されない時は
「コードを追加したのにCSSが反映されない・・・」という質問をいただくことがあります。CSSが反映されない場合の対処法をまとめています。
![](https://yuzuyu3.com/wp-content/uploads/2019/04/0405c01-160x90.png)
そのほかの設定やカスタマイズ
Google AdSenseの関連コンテンツを表示する
Google AdSenseの関連コンテンツ広告が使えるようになったら、Cocoonで表示させてみましょう。
![](https://yuzuyu3.com/wp-content/uploads/2018/05/050703-160x90.jpg)
Simplicity2からCocoonに移行した方は
前テーマ「Simplicity2」からCocoonに移行した方は、次の設定をしてみましょう。Simplicity2から変わった部分がいろいろあります。
![](https://yuzuyu3.com/wp-content/uploads/2018/05/050703-160x90.jpg)
まとめ
今回は、Cocoonを使っている方におすすめのカスタマイズをお届けしました。
紹介したコードは、実際にこのサイトで使っているものばかりです。どれも子テーマに貼るだけですので、どなたでもかんたんにできます。
よかったら参考にしてみてください。
\ Cocoonユーザー必見! /