【Cocoon】見やすさとSEOを両立する「正しい目次」の設定ガイド

目次のデザインを整えて読者を迷子にさせない工夫

WordPressでブログを運営するにあたり、読者の利便性を高めるために欠かせない機能が「目次」です。しかし、ただ標準設定のまま表示させているだけでは、その効果を最大限に活かしきれていない可能性があります。今回は、無料の人気テーマ「Cocoon」をベースに、読者の離脱を防ぎ、検索エンジン（Google）にも評価されやすい、美しく機能的な目次のカスタマイズ手法を解説します。

目次を正しく生成するための「見出しルール」

Cocoonの目次は、本文内に配置された「見出しタグ（Hタグ）」を元に自動で生成される仕組みになっています。そのため、目次を正しく機能させるには、以下の鉄則を遵守する必要があります。

見出しには絵文字ではなく「Font Awesome」を採用する

見出しの先頭に絵文字を直接入力すると親しみやすさは出ますが、Cocoonの標準仕様では、見出し内の絵文字がそのまま目次テキストにも反映されてしまいます。

目次は記事全体の「簡潔な地図」であるべきなので、見出しの装飾に使用するのは、絵文字ではなく「Font Awesome アイコン」がおすすめです。この方法であれば、記事内の見出しはお洒落に演出しつつ、自動生成される目次の中身はテキストだけでスマートに統一することができます。

目次は最初から「開いた状態（展開）」が鉄則

Cocoon設定では、目次の初期状態を「閉じる」か「開く」かを選択できますが、ここは迷わず「最初から展開（開いた状態）」に設定してください。

モバイルファーストの現代において、読者は短時間で情報を探しています。記事を開いた瞬間に全体のボリュームや目的の項目が1秒で視界に入る親切設計にすることが、ページの離脱を防ぐ強力なポイントとなります。現代のGooglebotは、折りたたまれた（隠された）テキストも理解できますが、「最初から見えているテキスト」の方が重要度が高いと判断する傾向が依然としてあります。見出しに含まれる重要なキーワードを、ページの主要な要素としてGoogleに正しく伝えるためにも、開いておく方が無難です。

広告の手前に目次を表示する必須設定

Cocoon設定の「目次」タブ内にある、見落としがちな重要項目について解説します。

• ✅ 広告の手前に目次を表示する ➔ 【必ずチェックを入れる】

Googleアドセンスなどの自動広告を有効にしている場合、設定によっては最初のH2見出しの手前に巨大な広告が割り込んで表示されるケースがあります。この項目にチェックを入れておくことで、広告よりも先に目次を確実に配置させることができ、読者にストレスを与えないスムーズな誘導線が確保できます。

利便性の向上！サイドバーに追従する目次の設置手順

PC環境において、画面をスクロールしても常に視界の横に残り続ける「追随型（スクロール追従）の目次」は、読者が現在地を把握しやすく非常に効果的です。設定は以下の手順で簡単に完了します。

1. WordPressの管理画面から「外観」 ➔ 「ウィジェット」を選択します。
2. 「利用できるウィジェット」一覧の中から「[C] 目次」を探します。
3. 対象ウィジェットを、「サイドバースクロール追従」エリアへ追加します。

以上のシンプルな操作だけで、読者のスクロールに連動する機能的な追従型目次が実装されます。

見出しの先頭にFont Awesome アイコンをつける方法

ここまでCocoonの目次設定について解説してきましたが、見出しのデザインをより洗練させ、かつ目次バグなどのトラブルを完全に回避するための具体的なカスタマイズ方法をご紹介します。

見出しに直接アイコンのHTMLコード（iタグ）を書き込むのではなく、テーマ全体のCSS（スタイルシート）を使って、すべての見出しの先頭に一括でアイコンを表示させるのが最もスマートで洗練された手法です。

一括表示のためのCSSコード

以下のCSSコードを、WordPressの管理画面から子テーマのスタイルシート（style.css）にそのままコピー＆ペーストして保存してください。

/* H2見出しの先頭にお好みのアイコンを一括表示 */
.article h2::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* Solid では必須 */
    content: "\f009"; /* 文字コード */
    margin-right: 0.4em; /* アイコンと右側の文字との隙間 */
}

/* H3見出しの先頭にお好みのアイコンを一括表示 */
.article h3::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* Solid では必須 */
    content: "\f00c"; /* 文字コード */
    margin-right: 0.4em; /* アイコンと右側の文字との隙間 */
}

フォントアイコンの変更方法

1. Font Awesome 5の無料アイコンを公式サイトで探す にアクセスしてください。
   Font Awesome 5 の無料アイコンは2026年7月現在で1,600アイテム以上あります。
   ページが開いたら、右上の1 [Free] ボタンをクリックして絞り込んでください。その際、右側にあるバージョンが2「Font Awesome 5.x」であることを確認してくださいね。上述のCSSコード「font-weight: 900;」は左側の3Solid（塗りつぶし）を選択すると必須となるコードです。
2. 表示させたいアイコンをクリックして開きます。
   
3. 右上の [Copy Unicode] をクリックします。（クリップボードにコピーされます）
   
4. 先ほどのCSSコードの content: "\f009"; /* 文字コード */ の部分に貼り付けます。
   👍このように表示されていれば成功です！
   

   同様に、H3（必要であればH4）も好きなアイコンを選んで設定してみてくださいね！

カスタマイズのメリット

このカスタマイズを適用すると、本文内のH2見出しとH3見出しの先頭に、自動的に異なるデザインのフォントアイコンが表示されるようになり、視覚的なメリハリが生まれます。

HTMLコードを一切汚さないため、記事を執筆する際はいつも通り普通のテキストで記述するだけで、均一なデザインが自動で反映されます。もちろん、自動生成される目次の中身は文字だけでスッキリと構築されます。

一度設定してしまえば、過去の記事から未来の記事まで一瞬で美しいデザインに統一されます。ブログの作業効率化とデザイン性の向上のために、ぜひ取り入れてみてくださいね！

thumb_up0

送信中です

×

※コメントは最大500文字、1回まで送信できます

送信

送信中です送信しました！