「Cocoonの目次、表示はできたけど見た目がちょっと地味…」
「もっと見やすくしたいけど、CSSは苦手で手が止まる」
そんな人に向けて、この記事ではCocoonの目次設定の基本から、コピペで使えるCSSカスタマイズまでをまとめました。難しいコードの知識はいりません。気になるところだけ取り入れればOKです。
この記事でわかること
・Cocoon目次の基本設定（表示条件・深さ・開閉ボタンなど）
・記事ごとに目次を出し分ける方法
・コピペで使える目次デザインのCSS
・目次が消えない・重複するときの対処法
はじめに｜Cocoonの目次は標準機能だけでも十分使える
Cocoonには目次機能が最初から搭載されています。そのため、専用プラグインを入れなくても、設定画面でチェックを入れるだけで目次を表示できます。
Cocoonテーマには目次が標準搭載されている
Cocoonでは、WordPressの管理画面から目次の表示・非表示・見出し階層・デザイン調整までまとめて行えます。記事に見出し（H2やH3）を入れていくと、その見出しをもとに目次が自動でつくられる仕組みです。
Cocoonの目次でできること
- プラグインなしで目次を表示できる
- 目次に含める見出しの深さ（H2〜H6）を選べる
- 開閉ボタンやナンバー表示を切り替えられる
- スキンやCSSでデザインを変えられる
目次はそもそも必要？SEO効果と読者へのメリット
結論から言うと、目次が直接SEO順位を上げる魔法はありません。ただ、読者が記事を読みやすくなることで、間接的なメリットは十分にあります。
僕も最初は目次を軽く考えていたんですが、長い記事ほど「今どこを読んでいるか」の地図になるんですよね。読者目線だと、あると安心します。
実際にCocoon目次を整えて感じた変化
ここからは、僕（ソラ）が実際にこのブログでCocoonの目次をさわってみて感じたことです。
正直に言うと、これまでやったのはスキンを変えて目次の見た目ごと変わったところまで。CSSでガッツリ作り込んだわけではありません。それでも、変えてみて気づいたことがあります。
- スキンを変えるだけでも目次の色や枠が変わり、記事全体の印象が変わった
- 目次があると、自分で読み返すときも記事の全体像をつかみやすかった
- 逆に見出しが多い記事だと目次が長くなり、少し邪魔に感じる場面もあった
最初タイトルの背景をべた塗りの青を使ってみたのですが少しくどく感じ、淡い青にすることで馴染みました。
Cocoon目次の基本設定
まずは管理画面から基本項目を整えましょう。場所は 「Cocoon設定」→「目次」タブ です。
| 設定項目 | 何ができる？ |
|---|---|
| 目次の表示・非表示 | 目次を出すかどうか |
| 目次タイトルの変更 | 「目次」の文言を好きな言葉に変える |
| 表示条件 | 見出しがいくつ以上で目次を出すか |
| 表示の深さ | H2〜H6のどこまで目次に含めるか |
| 目次ナンバーの表示 | 1, 2, 3… の番号を出すか |
| 開閉ボタン | 目次を開く／閉じるボタンを付けるか |
| 広告の手前に目次を表示 | 目次を広告の前に置くか |
迷ったらこの設定でOK
・表示条件＝見出し2つ以上
・表示の深さ＝H3まで
・ナンバー表示＝お好みで
デフォルトのままでもSEO的に問題ありません。
目次は最初から「開いた」状態の方がいい？
基本的には、記事の内容がパッと伝わる「開いた状態」がおすすめです。ただしケースによります。
| 開いた状態がおすすめ | 閉じた状態でもOK |
|---|---|
| 情報量が多く全体像を見せたい記事 | 見出しが多くて目次が長くなりすぎる記事 |
| 目的の見出しに飛びたいハウツー記事 | スマホで目次がファーストビューを占領する場合 |
スマホで自分の記事を開いて、目次が長すぎて本文がなかなか出てこない…となっていないか、一度チェックしてみてください。
特にスマホ表示で邪魔になっていないかは必ず確認しましょう。
【ケース別】Cocoon目次の表示を調整する方法
目次は記事の種類によって、表示・非表示や位置を調整すると読みやすくなります。
目次を非表示にしたい場合
サイト全体で消したいときは、Cocoon設定＞目次で「目次を表示する」のチェックを外します。
特定の記事だけ目次を表示・非表示にしたい場合
記事ごとに切り替えたいときは、投稿編集画面の「目次」設定から、その記事だけ表示・非表示を選べます。
目次の表示位置を変えたい場合
通常は最初の見出しの直前に表示されます。位置を変えたいときは、本文の好きな場所に
と入力すると、そこに目次を表示できます。
スクロール時にサイドバーへ目次を表示したい場合
外観＞ウィジェットで「サイドバースクロール追従」エリアに［C］目次ウィジェットを入れると、スクロールに合わせて目次が追従します。
目次に改行を入れたい場合
見出しが長いと目次も長くなります。基本は見出し自体を短くするのがおすすめですが、どうしても整えたいときはCSSで調整します。
Cocoonで目次デザインをカスタマイズする方法
目次の見た目を変える方法は大きく2つ。スキンを変えるか、CSSを追加するかです。
手っ取り早いのはCocoonのスキンを変えること
Cocoonはスキンを変えるだけで、サイト全体と一緒に目次のデザインも変わります。CSSを書く必要がないので、まずはスキン変更から試すのがおすすめです。
CSSを使う前にバックアップを取っておく
CSSをいじる前に、必ず今の内容をコピーして控えておきましょう。
今の「追加CSS」の中身を、メモ帳などにまるごとコピーしておくと安心です。表示がおかしくなっても、すぐ元に戻せます。
CSSを追加する場所
CSSは 「外観」→「カスタマイズ」→「追加CSS」 に貼り付けるのが一番かんたんで安全です。子テーマの style.css に書く方法もあります（→ 子テーマが反映されないときの確認はこちら）。
CSSコピペでできるCocoon目次カスタマイズ
ここからはコピペするだけで使える目次デザインのCSSを紹介します。色のコードは好みに合わせて変えてください。
定番カラー（色コードを置き換えるだけ）
・青系 #4a90d9
・落ち着いた青 #5b8db8
・グレー #6c7a89
・緑系 #4caf93
「目次」の文字を太字にする
.toc-title {
font-weight: bold;
}目次タイトルの文字色を変更する
.toc-title {
color: #4a90d9; /* 好きな色に変更 */
}目次タイトルの背景に色をつける
.toc-title {
background: #4a90d9;
color: #fff;
padding: 8px 12px;
border-radius: 4px;
}一番見た目が変わるのでおすすめです。
目次全体に枠線をつける
.toc {
border: 2px solid #4a90d9;
border-radius: 6px;
}目次全体に背景色をつける
.toc {
background: #f5f8fc;
}目次タイトルにアイコンを付ける
.toc-title::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f0ca";
margin-right: 6px;
}目次の項目に下線をつける
.toc-list a {
text-decoration: underline;
}項目の文字色と大きさを変更する
.toc-list a {
color: #333333;
font-size: 15px;
}Before
After
CSSは全部入れようとせず、まずは「タイトルの背景色」だけでも十分見違えます。欲張らないのがコツです。
【補足】サイドバーにも目次がある人は要チェック
本文内の目次と、サイドバーの目次が両方表示されていると、読者によっては少ししつこく感じることがあります。
- 本文内目次：記事の冒頭に表示。スマホでも見やすい
- サイドバー目次：PCで横に表示。スマホでは見えにくい位置になりがち
初心者のうちは、まず本文内目次だけでもOK。慣れてから追従サイドバー目次を足すと管理がラクです。
Cocoonで目次が消えない・重複している時の対処法
「目次が消えない」「目次が二重に出る」ときは、設定やプラグインの重複を確認しましょう。
二重表示の原因で一番多いのは、Cocoonの目次と目次プラグインの併用です。
まとめ｜Cocoon目次は「見やすさ優先」で整えればOK
Cocoonの目次は細かくカスタマイズできますが、最初から凝りすぎる必要はありません。
この記事のまとめ
・まずは基本設定（表示条件・深さ・開閉ボタン）を整える
・デザインは読みやすさ重視。スキン変更でも十分
・CSSは必要な部分だけコピペでOK
目次が整うと、記事全体がグッと読みやすくなります。あわせて Cocoonの見出しデザイン も整えると、さらに見栄えがよくなりますよ。
Cocoonの基本設定をまだ済ませていない人は、Cocoonの初期設定はこれだけ もあわせてどうぞ。
コメント