くるみ
- Cocoonでブログを始めたけどデザインをもうちょっとテコ入れしたい
- 他と被りがちなデザインを変えたい
- できるだけコピペで楽にできるものを探している
という方に向けて、当サイトで紹介してきたCocoonカスタマイズを全てまとめました。
本記事を参考にすれば、コピペするだけで他よりも一段イケてるサイトに仕上げることができます。
Cocoonのおしゃれなカスタマイズ総まとめ
記事一覧をSANGO風にする
PC版
before
after
モバイル版
before
after
こちら新着記事一覧(インデックス)のカスタマイズになります。
本サイトでも使用している「SANGO」のデフォルトのインデックスのデザインに寄せてみました。
アイキャッチがより目立つため、サムネイル画像に力を入れている方によりオススメのカスタマイズになります。
【Cocoon】新着記事一覧をおしゃれにする簡単カスタマイズ
目次をマテリアル風にする
記事内の目次
before
after
こちら記事内の目次のカスタマイズになります。
こちらもSANGOのデフォルトの目次のデザインに寄せてみました。可愛さと見やすさを両立した感じに仕上がります。
サイドバーの目次
before
after
ウィジェットとしてサイドバーに設置した目次は上のようになります。(※灰色の枠線は目次のものではありません)

SNSボタンを丸くする
トップシェアボタン
before
after
ボトムシェア・フォローボタン
before
after
こちらアイキャッチ下と記事下のSNSシェア・フォローボタンのカスタマイズになります。
CocoonのSNSボタンは、デフォルトだと横長で目立つ代わりに、目がチカチカして記事を圧迫させるというデメリットがあります。
それを解消するためにもボタンを丸くし、更に透明度を上げることで柔らかいデザインに仕上げました。
【Cocoon】SNSシェア・フォローボタンを丸くするカスタマイズ
タイムラインのカスタマイズ
こちらタイムラインのカスタマイズになります。
上のように2種類紹介していて、一つ目の方では「step1」のところのポインタ(円)がポワンポワン動くようになっています。
二つ目の方は路線図のようにしてみました。

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

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

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

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

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

他のテーマでも使えるカスタマイズ
ショートコードで作れるレーダーチャート
- 項目1
- 4
- 項目2
- 3
- 項目3
- 4
- 項目4
- 5
- 項目5
- 4
もちろん各項目やスコアの指定もパラメーターを変えることで行うことができ、プラグインなどを使わずコピペでできるものなので初心者の方にもおすすめです。
WordPressでおしゃれなレーダーチャートを作成する方法【プラグイン・ライブラリ不要】
ショートコードで呼び出せるモーダルウィンドウ
ショートコードで囲むだけでお手軽に使用できるモーダルウィンドウです。ボタンまたはモーダル外の押下で表示・非表示を切り替えられます。
記事内に書く(表示する)ほどではないけど、読者にとって有益になりそうな補足をしたい場合などにおすすめです。

もしもの「かんたんリンク」のカスタマイズ
before
after
もしもアフィリエイトの「かんたんリンク」のカスタマイズになります。
こちらの「かんたんリンク」はデフォルトだとスマホで見ると縦長になってしまうので、横長(2列)になるように仕上げました。
くるみ
もちろんPCから見た際のデザインもいい感じになりますよ。

埋め込みツイートのいいね数と日付を非表示にする
before
after
埋め込みツイートの下部のいいね数や日付などを非表示にするカスタマイズです。
その他幅なども調整したのでスマホから見てもいい感じになります。可愛い。

プラグイン無しで蛍光マーカーを動かす
このように文字にマーカーが引かれます
マーカーを細くすることも出来ます
もちろん色を変えることも出来ます
こんな感じでスクロールした際にマーカーが引かれるようなアニメーションを挿入できます。
しかし正直これだけだとスクロールに合わせてマーカーが引かれるかイマイチ分かりにくいと思うので、その辺りは用意したデモページを参考にしてみてください。

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

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

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

当サイトのカスタマイズが詰まったスキン「イノセンス」
最後にに少しだけ宣伝を。
この度、Cocoonのスキン「イノセンス」を作成させていただきました。
この度、Cocoonのスキン「イノセンス」を作成させていただきました。
更にテーマに同梱もしていただいたので
チェックしてみてください⸝⸝- ̫ -⸝⸝https://t.co/2lDWg1jNr0 https://t.co/KNvcx0ju10— おはようポテト @サイト管理人 (@ohayoupoteto22) March 6, 2021
更に製作者わいひらさんのご厚意もありテーマに同梱していただきました。「Cocoon設定」→「スキン」から確認できます。
この記事で紹介しているカスタマイズも多く取り入れているので、「いちいち各パーツいじるの面倒だな」という方は本スキンを適用するのもアリかなと。
くるみ

まとめ
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝
はじめまして。
いつもブログカスタマイズの参考にさせていただいております。
今回、私のブログでぽてちる様を「カスタマイズの参考になったブログ」として紹介させていただきましたので、ご連絡いたしました。
何かおかしな点がありましたらご指摘お願いいたします。
https://enkura.net/blog-customize/
きゃりーさん
ご丁寧にご連絡ありがとうございます!紹介していただき光栄です!
問題点などは特にございません🙇♂️
スキンでイノセンスを使っている者です!
いつもお世話になっております。
ありがとうございます。
見出しの色を変えたいのですが、どうやって変えることができるのでしょうか?
追加CSSなどを使って、何度も試みましたが、難しくて分かりませんでした。
お忙しいかと思いますが、宜しくお願い致します。
ねがいさん
当スキンのご利用ありがとうございます!
変更をご希望されるのはどの見出しの、どの部分でしょうか??
(例:「h2の背景色」など)
お手数ですがご教示いただけますと幸いです。
よろしくお願いします🙇♂️
イノセンス、使わせてもらってます。ありがとうございます。背景のさり気ないタイル調、気に入ってます。初心者的な質問ですが、もしお時間あれば教えて下さい。ヘッダーロゴの文字を大きくしたいのですが、イノセンスを使ってても自由にモジの大きさ変更できますよね?色々試してるのですが、変わらなくて、こちらに質問させて頂きました。
イノセンスを使わせていただいています。シンプルかつおしゃれなスキンの作成ありがとうございます。
サイドバーにプロフィールを設定しているのですが、推奨されている240px×240pxの画像を設定しても、表示される画像が小さくなってしまい改善したいと思っています。
解決方法がございましたらご教示いただければ幸いです。
よろしくお願いいたします。