Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】

Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】

くるみ

Cocoonのカスタマイズ集どっかに落ちてないかな…
ということで今回は

  • Cocoonでブログを始めたけどデザインをもうちょっとテコ入れしたい
  • 他と被りがちなデザインを変えたい
  • できるだけコピペで楽にできるものを探している

という方に向けて、当サイトで紹介してきたCocoonカスタマイズを全てまとめました。

本記事を参考にすれば、コピペするだけで他よりも一段イケてるサイトに仕上げることができます。

Cocoonのおしゃれなカスタマイズ総まとめ

記事一覧をSANGO風にする

PC版

before

Cocoonのカスタマイズ前の記事一覧

after

Cocoonのカスタマイズ後の記事一覧

モバイル版

before

Cocoonのカスタマイズ前の記事一覧(モバイル)

after

Cocoonのカスタマイズ後の記事一覧(モバイル)

こちら新着記事一覧(インデックス)のカスタマイズになります。

本サイトでも使用している「SANGO」のデフォルトのインデックスのデザインに寄せてみました。

アイキャッチがより目立つため、サムネイル画像に力を入れている方によりオススメのカスタマイズになります。
【Cocoon】新着記事一覧をオシャレに!簡単カスタマイズ【Cocoon】新着記事一覧をおしゃれにする簡単カスタマイズ

目次をマテリアル風にする

記事内の目次

before

カスタマイズ前の記事内目次

after

カスタマイズ後の記事内目次

こちら記事内の目次のカスタマイズになります。

こちらもSANGOのデフォルトの目次のデザインに寄せてみました。可愛さと見やすさを両立した感じに仕上がります。

サイドバーの目次

before

カスタマイズ前のサイドバーの目次

after

カスタマイズ後のサイドバーの目次

ウィジェットとしてサイドバーに設置した目次は上のようになります。(※灰色の枠線は目次のものではありません)

Cocoonの目次のカスタマイズする方法【Cocoon】目次を圧倒的におしゃれにするカスタマイズ方法

SNSボタンを丸くする

トップシェアボタン

before

カスタマイズ前のトップSNSボタン

after

カスタマイズ後のトップSNSボタン

ボトムシェア・フォローボタン

before

カスタマイズ前のボトムSNSボタン

after

カスタマイズ後のボトムSNSボタン

こちらアイキャッチ下と記事下のSNSシェア・フォローボタンのカスタマイズになります。

CocoonのSNSボタンは、デフォルトだと横長で目立つ代わりに、目がチカチカして記事を圧迫させるというデメリットがあります。

それを解消するためにもボタンを丸くし、更に透明度を上げることで柔らかいデザインに仕上げました。
【Cocoon】SNSシェア・フォローボタンを丸くして可愛くするカスタマイズ【Cocoon】SNSシェア・フォローボタンを丸くするカスタマイズ

タイムラインのカスタマイズ

Cocoonのタイムラインのカスタマイズ

Cocoonのタイムラインのカスタマイズ

こちらタイムラインのカスタマイズになります。

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

Cocoonのタイムラインのカスタマイズ【Cocoon】コピペでOK!タイムラインを可愛くカスタマイズする方法

検索窓を立体的にする

Cocoonの検索窓のカスタマイズ

こちらウィジェットで設置できる検索フォームのカスタマイズになります。

当サイトで使用しているテーマ「SANGO」のように、立体的で可愛いくなるように再現した(つもり)です。
【Cocoon】コピペで一発!検索窓をカスタマイズする方法【Cocoon】コピペで一発!検索窓を可愛くするカスタマイズ

カルーセルをポップにする

Cocoonのカルーセルのカスタマイズ

こちらヘッダー下に設置できるカルーセルのカスタマイズになります。

アイキャッチ画像をポップな感じにすることでトップページに可愛さを加えることができます。
しかしこちらアイキャッチ画像自体に文字を入れていて、記事のタイトルを表示させない方向けのカスタマイズなのでご注意ください。

【Cocoon】コピペで簡単!カルーセルをオシャレにカスタマイズする方法!【Cocoon】コピペで簡単!カルーセルをオシャレにカスタマイズする方法!

カテゴリタブにアイコンを挿入する

Cocoonのカテゴリタブのカスタマイズ

こちらトップページに設置できるカテゴリタブのカスタマイズになります。

タブの色を変えるだけでなく、見出しの前に好きな画像やアイコンを挿入することで目を引かせるせることができます。可愛い。

Cocoonのカテゴリタブのホバー時の様子

ちなみにホバー時の動きはこんな感じになります。

【Cocoon】トップページのカテゴリタブを可愛くするカスタマイズ方法【Cocoon】トップページのカテゴリタブを可愛くするカスタマイズ方法

サイドバーの見出しに画像を挿入する

Cocoonのサイドバーのカスタマイズ

こちらサイドバーの見出しのカスタマイズになります。

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

【Cocoon】サイドバーの見出しの前に画像をつけるカスタマイズ【Cocoon】サイドバーの見出しの前に画像をつけるカスタマイズ

吹き出しを可愛くする

Cocoonの吹き出しのカスタマイズ

こちら記事内の吹き出しのカスタマイズになります。

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

【Cocoon】吹き出しの色を変えてオシャレにカスタマイズする方法【Cocoon】吹き出しの色を変えてオシャレにカスタマイズする方法

関連記事一覧のカスタマイズ

PCver

Cocoonの関連記事一覧のカスタマイズ

こちら記事下の関連記事一覧のカスタマイズになります。

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

モバイルver

Cocoonのサイドバーのカスタマイズ

ちなみにモバイルではこんな感じに。

Cocoonの関連記事をカスタマイズする方法【Cocoon】記事下の関連記事をおしゃれにカスタマイズする方法

他のテーマでも使えるカスタマイズ

もしもの「かんたんリンク」のカスタマイズ

before

カスタマイズ前のもしものかんたんリンク(モバイル)

after

カスタマイズ後のもしものかんたんリンク(モバイル)

もしもアフィリエイトの「かんたんリンク」のカスタマイズになります。

こちらの「かんたんリンク」はデフォルトだとスマホで見ると縦長になってしまうので、横長(2列)になるように仕上げました。

記事内にさりげなく設置できるね

くるみ

もちろんPCから見た際のデザインもいい感じになりますよ。

もしもアフィリエイトの「かんたんリンク」のカスタマイズ方法もしもの「かんたんリンク」をスマホでも横長(2列)にするカスタマイズ方法

埋め込みツイートのいいね数と日付を非表示にする

before

カスタマイズ前の埋め込みツイート

after

カスタマイズ後の埋め込みツイート

埋め込みツイートの下部のいいね数や日付などを非表示にするカスタマイズです。

その他幅なども調整したのでスマホから見てもいい感じになります。可愛い。

埋め込みツイートのいいね数と日付を非表示にするカスタマイズ【WordPress】埋め込みツイートをコンパクトにするカスタマイズ方法

プラグイン無しで蛍光マーカーを動かす

このように文字にマーカーが引かれます

マーカーを細くすることも出来ます

もちろん色を変えることも出来ます

こんな感じでスクロールした際にマーカーが引かれるようなアニメーションを挿入できます。

しかし正直これだけだとスクロールに合わせてマーカーが引かれるかイマイチ分かりにくいと思うので、その辺りは用意したデモページを参考にしてみてください。

CSSを使って蛍光マーカーを動かす方法【プラグイン不要】WordPressで蛍光マーカーを動かす方法

Cocoonに関する豆知識

一部の画像だけを遅延読み込みさせない方法

Cocoonで遅延読み込みを除外する方法

ページの読み込み速度の改善のために用いられる「遅延読み込み」。

でも時には「ここの画像だけは遅延読み込みさせたくない」という場合があると思います。
例えば、ヘッダーに使っている画像が遅延読み込みのせいで最初だけ表示されなくて不格好だから変えたい場合、などなど。

そんな場合の対処法をまとめました。

Cocoonの遅延読み込みを除外する方法【Cocoon】一部の画像だけを遅延読み込みから除外する方法

アイキャッチ画像の適切なサイズについて

【知ってた?】Cocoonにおけるアイキャッチ画像の最適なサイズ

WordPressではテーマごとに適切なアイキャッチ画像のサイズがあります。

そのサイズを知らないで適当にアイキャッチ画像を設定してしまうと、意図した表示とは違くなったり画像が欠けてしまったりも。

後から”画像自体”のサイズを一括で変えることはできないもんね

くるみ

というわけで使用しているテーマのアイキャッチ画像の適切なサイズは早いうちから知っておく必要があります。
その辺り、以下の記事でまとめておりますのでぜひ。

【知ってた?】Cocoonにおけるアイキャッチ画像の最適なサイズ【知ってた?】Cocoonにおけるアイキャッチ画像の最適なサイズ

Cocoonにすると不要になるプラグイン

【今すぐ消そう】Cocoonにおいて不要なプラグイン7選

無料なのを疑ってしまうほど多機能なテーマCocoonですが、その多機能さゆえに不要になってくるプラグインが多々あります。

中には「これはとりあえず入れといた方がいい」と謳われている有名プラグインも。

プラグインはサイトの速度を低下させる大きな要因の一つです。以下の記事を参考にしてプラグイン断捨離をしてみてはいかがでしょうか。

【今すぐ消そう】Cocoonにおいて不要なプラグイン7選【今すぐ消そう】Cocoonを使うにあたって不要なプラグイン7選

当サイトのカスタマイズが詰まったスキン「イノセンス」

【Cocoon】居心地の良いスキン「イノセンス」を作成しました

最後にに少しだけ宣伝を。

この度、Cocoonのスキン「イノセンス」を作成させていただきました。


更に製作者わいひらさんのご厚意もありテーマに同梱していただきました。「Cocoon設定」→「スキン」から確認できます。

Cocoonのスキン「イノセンス」

この記事で紹介しているカスタマイズも多く取り入れているので、「いちいち各パーツいじるの面倒だな」という方は本スキンを適用するのもアリかなと。

チェックしてみてね!

くるみ

テーマのデザインやレイアウトはCocoon公式サイトもしくは以下の記事からご確認ください。「大人可愛い」ブログになるはずです。
【Cocoon】居心地の良いスキン「イノセンス」を作成しました【Cocoon】居心地の良いスキン「イノセンス」を作成しました

まとめ

以上、Cocoonのおしゃれなカスタマイズ総まとめでした。

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

2 COMMENTS

きゃりー

はじめまして。
いつもブログカスタマイズの参考にさせていただいております。

今回、私のブログでぽてちる様を「カスタマイズの参考になったブログ」として紹介させていただきましたので、ご連絡いたしました。

何かおかしな点がありましたらご指摘お願いいたします。

https://enkura.net/blog-customize/

返信する
おはようポテトのアイコン おはようポテト

きゃりーさん

ご丁寧にご連絡ありがとうございます!紹介していただき光栄です!
問題点などは特にございません🙇‍♂️

返信する

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

22年4月から自社開発企業のWebエンジニアとして働く大学生。このサイトでは主にプログラミングやWordPressカスタマイズについて発信しています。他に運営しているのは宅配冷凍弁当の特化ブログなど。お問い合わせはこちらよりどうぞ。