Cocoon目次カスタマイズを徹底解説｜失敗しない基本設定とデザイン例

Cocoonの目次をどうカスタマイズしたらいいか分からず、なんとなくそのままにしていないでしょうか。

読み終わるころには、自分のブログに合った目次デザインを、自信を持って設定できるようになります。

Cocoonで目次をカスタマイズする前に知っておきたいこと

Cocoonの目次機能の基本と他テーマ・プラグインとの違い

Cocoonは、無料テーマの中では珍しく、最初から目次機能が搭載されています。プラグインを入れなくても、見出しを設定しておけば自動で目次を作ってくれる仕組みです。

他の方法との違いをざっくり比べると、イメージはこんな感じです。

項目	Cocoon標準の目次	目次プラグイン（TOC系など）	他テーマの目次機能
導入の手間	テーマだけでOK	プラグイン追加が必要	テーマごとにバラバラ
表示設定	管理画面から細かく設定可能	プラグイン側で設定	設定項目が少ないこともある
カスタマイズ性	CSSでかなり自由に調整できる	プラグインの仕様次第	テーマにより差が大きい
サイトの軽さ	余計なプラグイン不要で比較的軽い	プラグイン数が増えるほど重くなりがち	テーマ＋プラグインの組み合わせ次第

「とりあえず目次を出したい」「プラグインは増やしたくない」という人にとって、Cocoon標準の目次はかなり優秀です。この機能をベースに、CSSで見た目を整えていくのが王道のやり方だと思ってください。

目次をカスタマイズすることで得られるメリット

目次を整えるメリットは、見た目だけではありません。実際に私のブログでも、目次を見直してから、記事を途中で離脱されにくくなったと感じます。

つまりCocoonで目次をカスタマイズすることは、「デザイン」と「読みやすさ」と「SEO」の土台を一気に底上げする作業でもあります。

目次カスタマイズ前に準備しておきたいこと

「よし、いじるぞ！」と勢いで触り始める前に、最低限これだけは押さえておくと安心です。

とくに、親テーマのstyle.cssを直接編集してしまうと、テーマ更新時に上書きされる可能性があります。Cocoonの公式でも、カスタマイズは子テーマや追加CSSを使うことが推奨されているので、ここは守っておきましょう。

Cocoonの目次設定をカスタマイズ：基本の画面操作

Cocoon設定＞目次タブの主な項目とおすすめ設定

WordPress管理画面から「Cocoon設定」→「目次」タブを開くと、たくさん項目が並んでいて少し圧倒されるかもしれません。よく使うところだけ絞って見ると、こんなイメージです。

項目名	内容	おすすめの初期設定
目次の表示	目次を自動で挿入するかどうか	ON（チェックを入れる）
表示ページ	投稿・固定ページなど、どこに出すか	投稿のみ、または投稿＋固定ページ
目次タイトル	「目次」「もくじ」などの見出しテキスト	ブログの雰囲気に合わせてお好みで
目次切り替え	開閉ボタンを付けるかどうか	ON（スマホで便利）
表示条件	見出しが何個以上あるときだけ目次を出すか	3以上を目安に設定
目次表示の深さ	H2まで、H3まで、などのレベル	H3までがバランス良くておすすめ
目次ナンバーの表示	番号を付けるかどうか	迷う場合はONでOK
目次の中央表示	目次ブロックを中央寄せにする	レイアウトに合わせてお好みで

すべてを完璧に理解しようとしなくて大丈夫です。まずはこの表の項目だけ見直して、実際の表示を確認しながら調整していきましょう。

表示位置や表示条件で読みやすさをカスタマイズ

同じCocoonの目次でも、表示位置や条件を変えるだけで読みやすさがガラッと変わります。

• 記事冒頭に自動で目次を出す
• サイドバーに目次を出す
• 一定以上のボリュームがある記事だけ目次を出す

とくに便利なのが「目次表示の条件」です。見出しが少ない短い記事で目次がどーんと出てしまうと、かえって読みにくいことがあります。見出しが3つ以上のときにだけ目次を表示するようにしておくと、全体のバランスが取りやすくなります。

記事ごとにCocoonの目次を表示・非表示にする方法

LP風のページや、画像中心の記事など、「このページだけ目次はいらない」という場面もありますよね。そんなときは、投稿ごとに目次のON/OFFを切り替えられます。

• 投稿編集画面の下の方にある「Cocoon設定」ボックスを開く
• 「目次」タブを選ぶ
• 「この投稿で目次を表示しない」にチェックを入れる

このチェックを覚えておくと、Cocoonの目次カスタマイズをより柔軟にコントロールできます。逆に、Cocoon設定側では目次をOFFにしておき、必要な記事だけショートコード（後述の

）で目次を出す、という運用も可能です。

CSSでCocoonの目次デザインをカスタマイズする手順

追加CSSと子テーマ、どちらで目次カスタマイズするか

まず決めたいのは「どこにCSSを書くか」です。代表的なパターンを整理しておきます。

方法	設定場所	向いている人	注意点
追加CSS	外観 > カスタマイズ > 追加CSS	CSS初心者、まずは少しだけ変えてみたい人	量が増えると管理が大変になりやすい
子テーマのstyle.css	外観 > テーマファイルエディター	カスタマイズをしっかり管理したい人	編集ミスに注意。必ずバックアップをとる

私個人のおすすめは、「最初は追加CSSで試してみて、安定してきたら子テーマ側にまとめる」というやり方です。いきなり子テーマだけでやると、慣れないうちは緊張すると思うので、まずは追加CSSで感覚をつかんでみてください。

コピペで使えるシンプルなCocoon目次カスタマイズCSS

まずはベースとして使いやすい、シンプルなボックス風の目次デザイン例です。外観 > カスタマイズ > 追加CSS に貼り付けて使えます。

.toc {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  background: #f9f9f9;
}

.toc-title {
  font-weight: bold;
  margin-bottom: 8px;
}

.toc a {
  text-decoration: none;
}

.toc a:hover {
  text-decoration: underline;
}

このCSSを入れるだけで、「文字が並んでいるだけのリスト」から、ちゃんとまとまったボックスとして見えるようになります。色や角丸の大きさ、余白の数値を少し変えるだけでも、サイトの雰囲気に合わせやすくなります。

かわいい系・おしゃれ系の目次カスタマイズ例

もう一歩踏み込んで、少し「かわいい系」「おしゃれ系」に寄せたい場合のアイデアです。

• 背景をうっすらカラーにする
• タイトルの左にアイコンや記号を付ける
• リンクの下線ではなく、点線のボーダーにする

例えば、目次タイトルに記号アイコンを付けるCSSはこんな感じです。

.toc-title {
  position: relative;
  padding-left: 28px;
  font-weight: bold;
}

.toc-title::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0;
}

Font Awesomeを使ったり、別の記号にしたりすれば、もっとバリエーションを増やせます。目次デザインの方向性をざっくり決めておくと、迷いにくくなります。

目次デザインの方向性	向いているブログ	ポイント
シンプル	雑記・ビジネス系	飽きにくく誰にでも読みやすい
かわいい	日記・子育て・イラスト系	色を増やしすぎないのがコツ
ミニマル	テック・デザイン系	枠線を消して文字と余白で見せる

自分のブログの雰囲気に合う方向性をひとつ選んでから、細かい色や線の太さを調整していくと、軸がぶれずにCocoonの目次カスタマイズを進めやすくなります。

スマホ・サイドバーでの目次カスタマイズのポイント

スマホ向けのCocoon目次レスポンシブCSS

PCではちょうど良くても、スマホで見ると「目次が大きすぎて邪魔」に感じることがあります。そんなときは、メディアクエリを使ってスマホだけスタイルを変えます。

@media (max-width: 768px) {
  .toc {
    padding: 12px;
    font-size: 14px;
  }
  .toc-title {
    font-size: 15px;
  }
}

ざっくり言うと、PCとスマホでは次のようなイメージで調整してあげるとバランスが取りやすいです。

端末	目次の幅	文字サイズ	余白
PC	本文と同じか少し狭め	16px前後	ゆったりめ
スマホ	横幅いっぱいが基本	14〜15px	少し控えめ

Cocoonで目次をカスタマイズするときは、PCの見た目だけで満足せず、スマホで実際にスクロールしてみる習慣をつけておくと失敗しにくくなります。

サイドバー目次・スクロール追従を使ったカスタマイズ

長めの記事が多いブログなら、サイドバーに目次を置くのもおすすめです。Cocoonでは、「ウィジェット」で目次をサイドバーやスクロール追従エリアに追加できます。

• WordPress管理画面で「外観」→「ウィジェット」を開く
• 「目次」または「[C]目次」ウィジェットをサイドバーに追加する
• スクロール追従用のウィジェットエリアに入れれば、画面を動かしても目次が付いてくる

PCユーザーにとって、サイドバーの目次はとても便利です。一方でスマホではサイドバーが表示されないレイアウトも多いので、スマホ用には記事冒頭の目次も併用しておくと安心です。

長文記事のCocoon目次を見やすくカスタマイズするコツ

1万字クラスの長文記事になると、目次が縦に長く伸びてしまって、逆に迷いの原因になることがあります。そんなときは、次のような工夫をしてみてください。

• 目次の深さをH3までにする
• H4以降は本当に必要なところだけに絞る
• 見出しタイトルを短めにして、目次で折り返しを減らす

よくある悩み	おすすめの対策
目次が長すぎてスクロールが大変	目次の深さをH3までにする
1行が長くて読みづらい	見出しを短くシンプルに書き直す
どこから読めばいいか分からない	大きな塊ごとに見出し名で内容をハッキリさせる

見出しの付け方自体も、広い意味ではCocoonの目次カスタマイズの一部です。読者が目次だけ見ても内容をイメージできるような見出しを目指してみてください。

トラブル別に見るCocoon目次カスタマイズの改善方法

Cocoonで目次が表示されないときのチェックリスト

「Cocoonの設定で目次をONにしたのに、画面に出てこない」という相談はかなり多いです。原因として多いパターンを表にまとめました。

症状	よくある原因	確認ポイント
目次がまったく出ない	Cocoon設定側で目次がOFFになっている	Cocoon設定 > 目次 の「目次を表示する」にチェックがあるか
特定の記事だけ目次が出ない	その投稿だけ「目次を表示しない」にしている	投稿編集画面のCocoon設定で目次をOFFにしていないか
目次の項目が少ない	見出しタグを使っていない、またはH2がない	太字や大きい文字だけで見出しにしていないか

とくに3つ目は本当によくあります。目次は「H2」「H3」などの見出しタグを元に作られるので、ただ文字を大きくしただけでは目次に反映されません。ブロックエディタの場合、「見出し」ブロックを使っているか確認してみてください。

目次が二重に表示される・レイアウトが崩れるとき

もう一つよくあるのが、「目次が二つ表示されてしまう」パターンです。これは、次のいずれか、または複数が重なっていることが多いです。

どこから目次が出ているかを整理して、「Cocoon標準機能にまとめる」のか「プラグインにまとめる」のか、どちらかに統一するとスッキリします。CSSで見た目を変えている場合は、どのクラス名に対して書いているかも合わせてチェックすると良いです。

クリックしても飛ばない・ヘッダーと被るときの対処

固定ヘッダーを使っていると、目次をクリックしたときに、見出しがヘッダーの裏に隠れてしまうことがあります。この場合は、見出しの少し上に余白を足すCSSで調整できます。

.entry-content h2 {
  scroll-margin-top: 80px;
}

このように設定しておくと、目次のリンクをクリックしてスクロールしたときに、見出しが少し下の位置に表示されるようになります。数値は、ヘッダーの高さに合わせて微調整してみてください。

よくある質問：Cocoonの目次カスタマイズ

Q1. CSSが分からなくても、Cocoonの目次カスタマイズはできますか？

A. できます。Cocoonの目次は、CSSを書かなくても設定画面だけでかなり整えられます。目次の表示・非表示、表示位置、見出しの深さなどを変えるだけでも、使い勝手は大きく変わります。

色や枠線など、細かいデザインを変えたいときだけ、この記事のようなCSSサンプルをコピペして、一部のカラーコードや数値を変えるイメージで少しずつ覚えていけば大丈夫です。

Q2. Cocoonで目次をカスタマイズすると、本当にSEOに効果がありますか？

A. 目次を入れたからといって、それだけで順位が上がるわけではありません。ただ、間接的なプラスは期待できます。

• 記事の全体像が分かりやすく、読み進めてもらいやすくなる
• 欲しい情報へすぐ飛べるので、途中離脱しにくくなる
• 見出し構造が整理されて、検索エンジンにも内容が伝わりやすくなる

このように、Cocoonの目次カスタマイズは読者の体験を良くするための施策で、その結果として「滞在時間」や「直帰率」などの面でじわじわ効いてくるイメージを持っておくと良いと思います。

Q3. 複数ブログで同じCocoon目次カスタマイズCSSを使っても大丈夫ですか？

A. 基本的には問題ありません。同じCocoonテーマ同士なら、同じCSSがそのまま動くケースが多いです。ただ、全く同じ色・同じデザインにすると、どのサイトも同じ印象になってしまうので、少しだけ調整を入れるのがおすすめです。

ブログのタイプ	目次カスタマイズで意識したいこと
ビジネス系ブログ	派手すぎない色・落ち着いた枠線で信頼感を出す
個人の日記・趣味ブログ	柔らかい色・丸みのある角で親しみやすくする
解説特化ブログ	シンプルで読みやすさ重視、装飾は控えめに

同じCSSをそのまま使い回すのではなく、「ベースは同じだけど、色や線の太さだけ変える」という感覚で、Cocoonの目次カスタマイズを楽しんでみてください。

まとめ：Cocoonの目次カスタマイズを今日から始めよう

ここまでの内容を整理します

今日からの最初の一歩として、まずはWordPress管理画面から「Cocoon設定」→「目次」を開き、自分のブログに合う基本設定を10分だけ見直してみてください。

そのあとで、この記事のシンプルなCSSを1つだけ追加してみましょう。それだけでも、あなたのブログの印象と読みやすさは、しっかりレベルアップしていきます。