どうもおはようポテト(@ohayoupoteto22)です。
Cocoonのカスタマイズ集どっかに落ちてないかな…
- Cocoonでブログ始めたけどデザインがイマイチ…
- Cocoonのありきたりなデザインを変えたい
という方に向けて、当サイトで紹介してきたCocoonカスタマイズをすべてまとめました。
全てコピペで真似できるものなので、参考にしていただければ幸いです⸝⸝- ̫ -⸝⸝
ブログ主
お品書き
Cocoonのおしゃれなカスタマイズ総まとめ
記事一覧のカスタマイズ
こちら記事一覧(インデックス)のカスタマイズになります。
このサイトでも使用しているテーマ、 SANGOのデフォルトのインデックスのデザインに寄せてみました。
アイキャッチ画像がより目立つため、アイキャッチに力を入れている方によりオススメのカスタマイズになります。
【Cocoon】新着記事一覧をオシャレに！簡単カスタマイズ
目次のカスタマイズ
記事内の目次
こちら記事内の目次のカスタマイズになります。
こちらもSANGOのデフォルトの目次のデザインに寄せてみました。可愛さと見やすさを両立した感じに仕上がります。
サイドバーの目次
サイドバーの方の目次はこんな感じに仕上がります。
【Cocoon】目次をマテリアル風におしゃれにするカスタマイズ方法吹き出しのカスタマイズ
こちら記事内の吹き出しのカスタマイズになります。
吹き出しの色を変えるだけでなく、画像の枠をドロップシャドウにすることでよりキャラが可愛く見えるようにしました。
ちなみに上の完成イメージはほんの一例で、他にも(影を濃くするや線を消すなど)何パターンか紹介しています。
【Cocoon】吹き出しをオシャレにカスタマイズする方法！タイムラインのカスタマイズ
こちらタイムラインのカスタマイズになります。
上のように2種類紹介していて、一つ目の方では「step1」のところのポインタ(円)がポワンポワン動くようになっています。
二つ目の方は路線図のようにしてみました。
【Cocoon】コピペでOK！タイムラインを可愛くカスタマイズする方法検索窓のカスタマイズ
こちらウィジェットで設置できる検索フォームのカスタマイズになります。
当サイトで使用しているテーマ「SANGO」のように、立体的で可愛いくなるように再現した(つもり)です。
【Cocoon】コピペで一発！検索窓を可愛くするカスタマイズ
カルーセルのカスタマイズ
こちらヘッダー下に設置できるカルーセルのカスタマイズになります。
アイキャッチ画像をポップな感じにすることでトップページに可愛さを加えることができます。
しかしこちらアイキャッチ画像自体に文字を入れていて、記事のタイトルを表示させない方向けのカスタマイズなのでご注意ください。
【Cocoon】コピペで簡単！カルーセルをオシャレにカスタマイズする方法！カテゴリタブ
こちらトップページに設置できるカテゴリタブのカスタマイズになります。
タブの色を変えるだけでなく、見出しの前に好きな画像やアイコンを挿入することで目を引かせるせることができます。可愛い。
ちなみにホバー時の動きはこんな感じになります。
【Cocoon】トップページのカテゴリタブを可愛くカスタマイズする方法！サイドバーの見出しのカスタマイズ
こちらサイドバーの見出しのカスタマイズになります。
カテゴリタブ同様、見出しの前に好きな画像やアイコンを挿入することで被りがちな見出しで差別化を図ることができます。可愛い。
【Cocoon】サイドバーの見出しを可愛くカスタマイズする方法！コピペで簡単！関連記事一覧のカスタマイズ
PC版
こちら記事下の関連記事一覧のカスタマイズになります。
記事間に線を設け、カルーセル同様アイキャッチ画像に影をつけるなどしてポップな感じにして可愛く仕上がります。あ、あと「関連記事」という見出しの前にアイコンを付けることで人気テーマJINのようにしてみました。
モバイル版
ちなみにモバイルではこんな感じに。
【Cocoon】記事下の関連記事をおしゃれにカスタマイズする方法Cocoonに関する豆知識
一部の画像だけを遅延読み込みさせない方法
ページの読み込み速度の改善のために用いられる「遅延読み込み」。
でも時には「ここの画像だけは遅延読み込みさせたくない」という場合があると思います。
例えば、ヘッダーに使っている画像が遅延読み込みのせいで最初だけ表示されなくて不格好だから変えたい場合、などなど。
そんな場合の対処法をまとめました。
【Cocoon】一部の画像だけを遅延読み込みから除外する方法アイキャッチ画像の適切なサイズについて
WordPressではテーマごとに適切なアイキャッチ画像のサイズがあります。
そのサイズを知らないで適当にアイキャッチ画像を設定してしまうと、意図した表示とは違くなったり画像が欠けてしまったりも。
くるみ
というわけで使用しているテーマのアイキャッチ画像の適切なサイズは早いうちから知っておく必要があります。
その辺り、以下の記事でまとめておりますのでぜひ。
【知ってた?】Cocoonにおけるアイキャッチ画像の最適なサイズCocoonにすると不要になるプラグイン
無料なのを疑ってしまうほど多機能なテーマCocoonですが、その多機能さゆえに不要になってくるプラグインが多々あります。
中には「これはとりあえず入れといた方がいい」と謳われている有名プラグインも。
プラグインはサイトの速度を低下させる大きな要因の一つです。以下の記事を参考にしてプラグイン断捨離をしてみてはいかがでしょうか。
【今すぐ消そう】Cocoonにおいて不要なプラグイン7選まとめ
他にもテーマ問わずできるカスタマイズを紹介しています。「サイトをもっと魅力的にしたい！」という場合は参考にしてみてください。
もしもの「かんたんリンク」をスマホでも横長(2列)にするカスタマイズ方法 
【埋め込みツイートカスタマイズ】いいね数と日付を非表示にするまた、Cocoonのカスタマイズ記事なのにも関わらずアレなのですが、「テーマをCocoonからSANGOにするメリット」をまとめたものもあります。当サイトでも使用しているイチオシのテーマです。有料テーマへの移行を考えている方はぜひ。
【比較】テーマをCocoonからSANGOに変更して良かった3つのこと
参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
