どうもおはようポテト(@ohayoupoteto22)です。
Cocoonのカスタマイズ集どっかに落ちてないかな…
- Cocoonでブログ始めたけどデザインがイマイチ…
- Cocoonのありきたりなデザインを変えたい
という方に向けて、当サイトで紹介してきたCocoonカスタマイズをすべてまとめました。
全てコピペで真似できるものなので、参考にしていただければ幸いです⸝⸝- ̫ -⸝⸝
ブログ主
お品書き
Cocoonのおしゃれなカスタマイズ総まとめ
記事一覧のカスタマイズ
こちら記事一覧(インデックス)のカスタマイズになります。
このサイトでも使用しているテーマ、 SANGOのデフォルトのインデックスのデザインに寄せてみました。
アイキャッチ画像がより目立つため、アイキャッチに力を入れている方によりオススメのカスタマイズになります。
【Cocoon】新着記事一覧をオシャレに!簡単カスタマイズ
目次のカスタマイズ
記事内の目次
こちら記事内の目次のカスタマイズになります。
こちらもSANGOのデフォルトの目次のデザインに寄せてみました。可愛さと見やすさを両立した感じに仕上がります。
サイドバーの目次
サイドバーの方の目次はこんな感じに仕上がります。

吹き出しのカスタマイズ
こちら記事内の吹き出しのカスタマイズになります。
吹き出しの色を変えるだけでなく、画像の枠をドロップシャドウにすることでよりキャラが可愛く見えるようにしました。
ちなみに上の完成イメージはほんの一例で、他にも(影を濃くするや線を消すなど)何パターンか紹介しています。

タイムラインのカスタマイズ
こちらタイムラインのカスタマイズになります。
上のように2種類紹介していて、一つ目の方では「step1」のところのポインタ(円)がポワンポワン動くようになっています。
二つ目の方は路線図のようにしてみました。

検索窓のカスタマイズ
こちらウィジェットで設置できる検索フォームのカスタマイズになります。
当サイトで使用しているテーマ「SANGO」のように、立体的で可愛いくなるように再現した(つもり)です。
【Cocoon】コピペで一発!検索窓を可愛くするカスタマイズ
カルーセルのカスタマイズ
こちらヘッダー下に設置できるカルーセルのカスタマイズになります。
アイキャッチ画像をポップな感じにすることでトップページに可愛さを加えることができます。
しかしこちらアイキャッチ画像自体に文字を入れていて、記事のタイトルを表示させない方向けのカスタマイズなのでご注意ください。

カテゴリタブ
こちらトップページに設置できるカテゴリタブのカスタマイズになります。
タブの色を変えるだけでなく、見出しの前に好きな画像やアイコンを挿入することで目を引かせるせることができます。可愛い。
ちなみにホバー時の動きはこんな感じになります。

サイドバーの見出しのカスタマイズ
こちらサイドバーの見出しのカスタマイズになります。
カテゴリタブ同様、見出しの前に好きな画像やアイコンを挿入することで被りがちな見出しで差別化を図ることができます。可愛い。

関連記事一覧のカスタマイズ
PC版
こちら記事下の関連記事一覧のカスタマイズになります。
記事間に線を設け、カルーセル同様アイキャッチ画像に影をつけるなどしてポップな感じにして可愛く仕上がります。あ、あと「関連記事」という見出しの前にアイコンを付けることで人気テーマJINのようにしてみました。
モバイル版
ちなみにモバイルではこんな感じに。

Cocoonに関する豆知識
一部の画像だけを遅延読み込みさせない方法
ページの読み込み速度の改善のために用いられる「遅延読み込み」。
でも時には「ここの画像だけは遅延読み込みさせたくない」という場合があると思います。
例えば、ヘッダーに使っている画像が遅延読み込みのせいで最初だけ表示されなくて不格好だから変えたい場合、などなど。
そんな場合の対処法をまとめました。

アイキャッチ画像の適切なサイズについて
WordPressではテーマごとに適切なアイキャッチ画像のサイズがあります。
そのサイズを知らないで適当にアイキャッチ画像を設定してしまうと、意図した表示とは違くなったり画像が欠けてしまったりも。
くるみ
というわけで使用しているテーマのアイキャッチ画像の適切なサイズは早いうちから知っておく必要があります。
その辺り、以下の記事でまとめておりますのでぜひ。

Cocoonにすると不要になるプラグイン
無料なのを疑ってしまうほど多機能なテーマCocoonですが、その多機能さゆえに不要になってくるプラグインが多々あります。
中には「これはとりあえず入れといた方がいい」と謳われている有名プラグインも。
プラグインはサイトの速度を低下させる大きな要因の一つです。以下の記事を参考にしてプラグイン断捨離をしてみてはいかがでしょうか。

まとめ
他にもテーマ問わずできるカスタマイズを紹介しています。「サイトをもっと魅力的にしたい!」という場合は参考にしてみてください。

また、Cocoonのカスタマイズ記事なのにも関わらずアレなのですが、「テーマをCocoonからSANGOにするメリット」をまとめたものもあります。当サイトでも使用しているイチオシのテーマです。有料テーマへの移行を考えている方はぜひ。
【比較】テーマをCocoonからSANGOに変更して良かった3つのこと
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝