【Cocoon】初心者におすすめのカスタマイズ10選｜ブログを見やすくする設定方法

今回は、ブログを立ち上げたときに知っておきたかった、やってよかった「Cocoon」のカスタマイズを10個ご紹介します。

Cocoonのカスタマイズは、調べながらいろいろ試してきましたが、最初は結構時間がかかりました。

「他の人のブログはおしゃれなのに、自分のブログはなんだか物足りない……」

ブログを始めたばかりの頃は、そんな風に感じることもあると思います。

私もブログ開設当初は、何をどう設定すればいいのか、さっぱりわかりませんでした。

でも、慣れてくると、

「このブログ、見やすいな」
「この表示いいな」

と思ったところを見つけて、少しずつ自分のブログにも取り入れられるようになりました。

Cocoonは無料テーマですが、設定できる項目がたくさんあります。

そのため、基本的な設定をするだけでも、ブログの見た目や使いやすさをかなり変えることができます。

それでは、どうぞ！

※2026年現在は、有料テーマSWELLに変更しています。

Cocoonとは？

まずは、WordPressテーマ「Cocoon」について簡単にご紹介します。

「Cocoon」とは？

Cocoonは、無料で利用できるWordPressテーマです。

シンプルなデザインでありながら、さまざまな設定やカスタマイズができるのが特徴です。

私もブログを始めた頃からCocoonを使ってきました。

無料テーマなので、

「ブログを始めたいけど、いきなり有料テーマを買うのはちょっと……」

という方にも使いやすいテーマだと思います。

Cocoonの詳しい機能や使い方については、公式サイトも参考にしてください。

また、自分が現在どのWordPressテーマを使っているのかわからない場合は、WordPress管理画面の

「外観」→「テーマ」

から確認できます。

Cocoon初心者におすすめのカスタマイズ10選

ブログ歴が長い人のブログを見ると、

「すごい手が込んでる……」
「私のブログとは比べ物にならない」

そんな風に思うことがあるかもしれません。

私もブログを始めたばかりの頃は、そうでした。

でも、いろいろなブログを見ているうちに、少しずつ

「ここはCocoonのこの設定かな？」

とわかるようになってきました。

私は「これ見やすいな」と思ったブログを参考にしながら、Cocoonのカスタマイズを行ってきました。

最初は何もわからなかったので、1つずつ調べては試すことの繰り返し。

やってみて感じたのは、

Cocoonのカスタマイズは、慣れるまでは少し難しく感じるけれど、わかってしまえば案外簡単

ということです。

そんな私が、実際にやってよかったと思うCocoonのカスタマイズを10個ご紹介します。

今回紹介するカスタマイズ

設定方法を知れば、すぐに変更できるものも多いです。

一方で、後半には少しCSSを使うものもあります。

「全部やらなきゃ」と思わず、気になるところから試してみてください。

また、この記事から詳しい設定方法を紹介している個別記事にも移動できるようにしています。

1．フォントの変更

まずは、フォントの変更です。

サイトのイメージや記事の印象を決めるフォントは、結構大事かなと思っています。

同じ文章でも、フォントが変わるだけでブログ全体の雰囲気が変わります。

Cocoonでは、

「Cocoon設定」→「全体」

からフォントを変更できます。

私は「小杉丸ゴシック」を使っています。

結構丸い感じで、お気に入りです。

フォントの表示イメージ

Cocoonで選べるフォントはそれほど多くありませんが、ブログの雰囲気に合わせて一度変えてみるのもアリだと思います。

「ブログのデザインを変えたいけど、細かい設定はちょっと面倒……」

という方は、スキンを使う方法もおすすめです。

ブログのデザインを手軽に変えるなら「スキン」もおすすめ

Cocoonには、ブログ全体のデザインを手軽に変更できる「スキン」があります。

細かいカスタマイズを1つずつ行わなくても、スキンを選ぶだけでブログの雰囲気を変えられます。

関連記事：
【Cocoon】スキンどれ選ぶ？特徴と評判をまとめてみた！

2．ヘッダーロゴ・ヘッダーレイアウト

続いて、ヘッダーロゴです。

ヘッダーはブログを開いたときに目に入りやすい場所なので、設定しておくとブログらしさが出ます。

ヘッダーロゴの設定

私は、ブログのヘッダーロゴを「まきばフォント」で作成しました。

無料で作れるので、オリジナルのロゴを作りたい方にはおすすめです。

背景を除去して作ることもできるので、ブログのロゴ作りにも使いやすいかなと思います。

ヘッダーロゴの設定方法

ロゴを作成したら、

「Cocoon設定」→「ヘッダー」

を開きます。

そこで「ヘッダーロゴ」に作成した画像を指定します。

ヘッダーロゴのサイズを調整する

ロゴを設定したら、幅や高さを調整していきます。

ちなみに、私はロゴサイズを

幅200×高さ200

で設定しています。

実際の表示を確認しながら、自分のブログに合うサイズに調整してみてください。

3．インデックス

続いては、インデックスです。

Cocoonのインデックスは、トップページなどに記事をカード形式で表示するための設定です。

インデックスの設定

例えば、

といった設定ができます。

表示させたくない記事を除外することもできます。

ブログを訪れた人に、

「どんな記事を読んでほしいか」

を考えながら設定するのがおすすめです。

インデックスの設定方法

インデックスは、

「Cocoon設定」→「インデックス」

から設定できます。

ここでカードタイプなどを選択します。

実際の表示を確認しながら、自分のブログに合う形を探してみてください。

オリジナルのトップページを作りたい場合

もっと自由にブログのトップページを作りたい場合は、サイト型トップページにする方法もあります。

ブログのトップページを、

「おすすめ記事」
「カテゴリ別の記事」
「プロフィール」

などに分けて、自分好みに作りたい場合におすすめです。

4．関連記事

続いて、関連記事です。

記事を読み終わったときに、関連する記事を表示させることができます。

関連記事の設定

例えば、

「この記事を読んだ人はこちらの記事もおすすめです」

という形で、ブログ内の別の記事を紹介できます。

読者が次の記事を探しやすくなるので、ブログ内を回遊してもらうためにも便利な機能です。

関連記事の設定方法

「Cocoon設定」→「投稿」

から設定できます。

「関連記事設定」の

「関連記事を表示する」

にチェックを入れると、関連記事を表示できます。

表示数も変更できます。

ちなみに、私は4記事で設定しています。

ブログのデザインや記事の長さなどに合わせて、ちょうどいい表示数を探してみてください。

5．おすすめカード

続いて、おすすめカードです。

おすすめカードは、リンク付きの画像を使って、ブログ内のおすすめページを目立つ場所に表示できる機能です。

例えば、

などを表示できます。

おすすめカードの設定

私は、4つのカテゴリをメニューに登録して表示しています。

ブログを訪れた人に、

「まずこのカテゴリを見てほしい」

というものがある場合に便利です。

おすすめカードの設定方法

「Cocoon設定」→「おすすめカード」

から設定します。

まず、表示したい記事やカテゴリなどをメニューに登録します。

その後、「おすすめカード」の設定画面で、作成したメニューを選択します。

実際の表示を確認しながら、画像や表示する項目を調整してみてください。

ブログの中でも特に読んでほしいページがある場合は、こうした目立つ場所にリンクを設置しておくと便利です。

6．カルーセル

続いては、カルーセルです。

カルーセルは、ヘッダー下などに記事が横並びで表示され、記事が次々に入れ替わっていくような表示です。

カルーセルの表示イメージ

ブログを開いたときに、複数の記事を目立つ場所に表示できるので、

「おすすめの記事を見てもらいたい」

という場合に便利です。

カルーセルの設定方法

カルーセルは、

「Cocoon設定」→「カルーセル」

から設定できます。

表示するカテゴリや記事数などを設定して、自分のブログに合うように調整してみてください。

カルーセルを表示するときの注意点

私が使ってみて気になったのが、カルーセルを記事の上に表示した場合です。

記事を開いたときに、カルーセルが先に表示されるため、

「記事タイトルがすぐに見えない」

ということがありました。

そのため、私は

「投稿・固定ページ以外で表示」

にするのがおすすめだと思っています。

せっかく記事を読みに来てもらったのに、記事タイトルがすぐ見えないと、少しわかりにくいですよね。

ブログの見た目だけでなく、実際にスマホやパソコンから見て、使いやすいかどうかも確認しながら設定するのがおすすめです。

7．モバイルメニュー

続いて、モバイルメニューです。

スマホでブログを開いたときに、上部や下部にメニュー用のボタンを表示できます。

ブログへのアクセスはスマホからという人も多いので、スマホでの見やすさは結構大事だと思っています。

モバイルメニューの表示イメージ

スマホで表示したときに、

などのボタンを表示できます。

読者が別の記事を探したいときにも便利です。

モバイルメニューの設定方法

モバイルメニューは、

「Cocoon設定」→「モバイル」

から設定できます。

表示したい項目を選んで、自分のブログに合うメニューを作ってみてください。

私はスマホからブログを確認したときに、メニューがあるだけでかなり使いやすくなったと感じました。

特に、ブログをスマホで見ることが多い方は、一度設定してみるのがおすすめです。

詳しい手順はこちらの記事で紹介しています。
「【Cocoon／カスタマイズ】スマホ表示用のボタンを表示させる」

8．サイドバー・ボックスナビ

続いて、サイドバーにアイコン付きのメニューを表示するカスタマイズです。

こんな風に、サイドバーに画像やアイコンを使ったメニューを表示できます。

サイドバーにアイコン付きのメニュー

例えば、

などを表示できます。

ブログに訪れてくれた人に、

「このページも見てほしい」

というものを目立たせることができます。

私はサイドバーだけでなく、記事の下にも表示しています。

ブログ内を回遊してもらうためのメニューとしても使いやすいと思います。

詳しい設定方法

詳しい設定方法はこちらの記事で紹介しています。
「【Cocoon／カスタマイズ】サイドバーにアイコンボックスを表示させる」

少し設定を加えるだけで、普通のサイドバーとは違った雰囲気になるので、ブログの見た目を変えたい方にもおすすめです。

9．目次追従

続いては、目次追従です。

目次追従は、記事を読んでいる間、画面の右側などに目次がついてくるように表示する機能です。

目次追従のイメージ

記事が長くなると、

「今どこを読んでいるんだろう？」

となることがありますよね。

目次追従を設定しておくと、記事の見出しを確認しながら読み進めることができます。

特に、文字数が多い記事や、見出しがたくさんある記事との相性がいいと思います。

目次追従の設定方法

Cocoonでも目次を追従させる設定ができます。

詳しい設定方法はこちらの記事で紹介しています。
「【Cocoon／カスタマイズ】目次がついてくる！目次追従の設定」

ただし、スマホではパソコンとは表示のされ方が異なる場合があります。

設定したら、実際のスマホ表示も確認しておくのがおすすめです。

10．アイキャッチ画像のカテゴリ表示を消す

最後は、アイキャッチ画像の上に表示されるカテゴリ表示を消すカスタマイズです。

以前は、私のブログではこんな感じでアイキャッチ画像の上にカテゴリが表示されていました。

と、ちょっと気になっていました。そこで、カテゴリ表示を非表示にしてみました。

カテゴリ表示を消す方法

CocoonではCSSを使って、表示を調整することもできます。

WordPress管理画面から、

「外観」→「カスタマイズ」→「追加CSS」

を開きます。

そこにCSSを追加して、表示を調整します。

以下のコードを貼り付けます。

/***  トップページのアイキャッチ　カテゴリ非表示 ***/
.cat-label {
display: none;
}

ただし、Cocoonのバージョンや設定によって表示が異なる可能性があります。

また、CSSの指定方法によっては、トップページ以外のカテゴリ表示まで消えてしまう場合があります。

そのため、CSSを追加する場合は、設定前にバックアップを取るか、表示を確認しながら少しずつ変更するのがおすすめです。

以前の私は、アイキャッチ画像にカテゴリが被っているのが気になっていたので、この方法でスッキリしました。

「アイキャッチ画像をできるだけ大きく見せたい」という方は、試してみてもいいと思います。

Cocoon初心者なら、まずこの3つがおすすめ

ここまで、10個のカスタマイズをご紹介しました。

ただ、「10個もあると、どれからやればいいの？」と思う方もいるかもしれません。

私がブログを始めたばかりなら、まずは次の3つから設定します。

① フォント

まずはフォントです。

ブログ全体の雰囲気が変わるので、簡単に見た目を変えたい場合におすすめです。

「Cocoon設定」から変更できるので、比較的簡単にできます。

② モバイルメニュー

次に、モバイルメニューです。

スマホからブログを見たときの使いやすさに関わるので、早めに設定しておくと安心です。

特にスマホでブログを確認して、

「他の記事が探しにくいな」

と感じる場合は、設定してみてください。

③ おすすめカード

3つ目は、おすすめカードです。

ブログの中で特に見てほしい記事やカテゴリがあるなら、目立つ場所にリンクを置いておくと便利です。

ブログ記事が増えてきたら、

「このカテゴリを見てほしい」
「このまとめ記事を読んでほしい」

というものも出てくると思います。

そうしたときに、おすすめカードを使うとブログ内を案内しやすくなります。

Cocoonのカスタマイズは少しずつでOK

今回紹介した10個を、最初から全部設定する必要はありません。

私もブログを始めた頃は、何が何だかわからない状態でした。

「このブログ、見やすいな」

と思ったところを見つけては調べて、少しずつ自分のブログにも取り入れていきました。

最初から完璧なブログを作ろうとすると、それだけで時間がかかってしまいます。

まずは記事を書くことを優先して、

「ここをもう少し見やすくしたい」

と思ったタイミングで、少しずつカスタマイズしていけば十分だと思います。

Cocoonをもっとカスタマイズしたい方はこちら

今回紹介したもの以外にも、Cocoonにはさまざまな設定があります。

私が実際に試してきたCocoon関連のカスタマイズやブログ運営については、こちらの記事でも紹介しています。

テーマ「Cocoon」に関する記事

Cocoonの設定で、「ここをもっと変えたい」と思ったときは、ぜひ参考にしてみてください。

まとめ｜Cocoonを自分好みにカスタマイズしてみよう

いかがでしたか？

今回は、私が実際にやってよかったと思ったCocoonのカスタマイズ10個をご紹介しました。

今回紹介したのはこちらです。

Cocoonは便利で利用者も多く、調べればいろいろなことができるテーマだと思います。

私も最初は、

「こんなことできるんだ！」

と驚くことがたくさんありました。

カスタマイズをしてみて、理想のブログサイトに近づいていくと、気分も上がります。
記事を書くモチベーションにもつながりました。

自分で作り上げたサイトって感じがして、気合が入りますよね。

もちろん、カスタマイズをしすぎて記事を書く時間がなくなってしまったら本末転倒なので、そこはほどほどに。

まずは、

「もう少し見やすくしたい」と思ったところから、少しずつ変えてみるのがおすすめです。

また、ブログを訪れてくださった方にとっても、

「読みやすい」
「次の記事も探しやすい」

と感じてもらえるブログにできたらいいですよね。

私はこれからも、よいブログサイトを参考にしながら、いろいろとカスタマイズを試していきたいと思います。

よければ、今回紹介したカスタマイズを参考に、ぜひ自分好みのブログを作ってみてください。

「こんなカスタマイズがおすすめ！」

というものがあれば、ぜひコメントで教えてください。

CocoonやWordPressブログについては、こちらでもまとめています。

テーマ「Cocoon」に関する記事

あわせて読みたい

テーマ「Cocoon」に関する記事 WordPressテーマ「Cocoon」をお使いの方に役立つ記事をまとめます。 よろしければ、ご参考にしてください。 ※随時、更新していきます。 WordPress、ブログ運営に関する…

それでは、最後までお読みいただき、ありがとうございました。

おわり。