運用しているWordPressサイト(このkirinoteとは別のWordPressサイト)に、目次を自動で作ってくれるプラグイン「Table of Contents Plus」を初めて導入しました。
本文の見出し(h2、h3など)を自動でスキャンして目次を作ってくれる便利なプラグインなのですが、使ってみると想像以上に設定項目が多く、地味に迷った点と、1つだけ本当にハマった落とし穴があったので、まとめておきます。
基本の設定(Displayタブ)
| Auto-insert for | 目次を自動で入れる投稿タイプにチェック(通常の記事なら「投稿」) |
|---|---|
| Heading levels | 目次に含める見出しレベル(h2だけにするか、h3まで含めるか) |
| Minimum headings | 目次を表示する最低見出し数。初期値は「4 or more headings(4個以上)」(この設定が今回の落とし穴の本体、詳しくは後述) |
| Exclude headings | 特定の文言を含む見出しを目次から除外できる欄。パイプ「|」区切りで複数指定でき、「*」でワイルドカードも使える(例:共通CTAバナーの見出しだけ除外したい時に便利) |
| Show on the homepage | トップページにも目次を表示するかどうかの切り替え |
| Restrict to path | 特定のURLだけに適用したい場合に使う。サイトのルートからの相対パス(例:/2026/07/03/sample/)を入れる必要があり、https://から始まるフルURLを入れても効かないので注意 |



見た目を既存デザインに合わせる(Appearanceタブ)
タイトル文字・番号の付け方・色・幅など、GUIだけでかなり細かく調整できます。
| Title text / Title alignment | 目次タイトルの文言と左右位置 |
|---|---|
| Show hierarchy | ONにするとh3などの子見出しを親見出しの下に入れ子表示(階層番号「6.1」のような表示になる) |
| Numbered list / Numbering style | 番号付けの有無と形式 |
| List spacing | 項目間の余白(詰まって見える時はここをON) |
| Box style(Theme) | 色プリセットの他に「Custom」を選ぶと背景色・枠線色などを自由に指定できる |
| Custom colors | Box styleで「Custom」を選んだ時に出てくる欄。背景色・枠線色・タイトル色・リンク色・ホバー色・訪問済みリンク色まで個別に指定できる |
| Width | 目次ボックスの幅。「Auto」の他に「Custom」でピクセル数を直接指定できる |
| Font size | 目次内の文字サイズ(%指定) |
| CSS container class | 任意のクラス名を目次の外枠に付けられる欄。ここに独自のクラス名を入れておくと、そのクラスをテーマ側のCSSで狙い撃ちして装飾を追加できる |
| Disable plugin CSS | プラグイン標準のCSSを読み込まないようにする設定。自前で全部スタイルを組みたい場合向け |




GUIの設定だけでは足りない部分(背景色を細かく指定したい、余白をもっと調整したいなど)は、「CSS container class」欄に好きなクラス名(例:gg-toc)を入れておき、そのクラス名を目印にWordPressのテーマ(子テーマ)のstyle.cssへ直接CSSを追記する、という方法で対応しました。管理画面の「外観 → テーマファイルエディター」からstyle.cssを開いて、そこに追記するだけです。
ちょっとしたコツ: CSSで色や余白を上書きしようとしても反映されない時は、プラグイン側のCSSが#toc_containerのようなID指定で書かれていることが多いのが原因です。CSSはID指定の方がクラス指定より優先されるため、自分で書いたクラス指定のCSSが負けてしまいます。!importantを付けて上書きするか、IDとクラスを組み合わせたセレクタにすると確実に効きます。
日本語化できる(Behaviorタブ)
| Collapsible | 目次を開閉できるようにする。ONにすると、開閉リンクの文字が初期状態では英語(show / hide)になる |
|---|---|
| Link labels | 開閉リンクの文字を直接書き換えられる欄。「表示」「閉じる」のように日本語化できる |
| Collapse control | 開閉の操作の見た目(プラス・マイナスアイコン、矢印アイコン、テキストリンクなど)を選べる |
| Collapsed by default | 最初から目次を折りたたんだ状態で表示するかどうか |
| Smooth scrolling | 目次のリンクをクリックした時になめらかにスクロールする演出の有無。スクロール時の上部の余白(Top offset)も指定できる |


初期状態だと「Collapsible」をONにした時の開閉リンクの文字が英語(show / hide)のままなので、「Link labels」で「表示」「閉じる」に書き換えると自然になります。
本当にハマった落とし穴:「Minimum headings」
一通り設定を終えて全記事をチェックしていたところ、3記事だけ目次がまったく表示されないことに気づきました。「見出しはちゃんとあるのに、なんで表示されないんだろう」という状態でした。
原因はDisplayタブの「Minimum headings(最小見出し数)」でした。初期値は「4個以上の見出しがある記事だけ目次を表示する」という設定で、この3記事は見出し2が2〜3個しか無く、条件を満たしていなかったのです。バグではなく、仕様通りの動作でした。
この設定画面はすべて英語表記なので、原因にたどり着くまでにはかなり時間がかかりました。「Minimum headings」の値を変更すると、3記事とも無事に目次が表示されるようになりました。

まとめ:目次が出ない時のチェックリスト
・見出し(h2/h3など)は本当に必要な数だけ入っているか(ナビゲーションや共通バナーの見出しを混同していないか)
・「Minimum headings」のような最低見出し数の設定になっていないか
・「Restrict to path」を使っている場合、フルURLではなく相対パスになっているか
・CSSで見た目を変えても反映されない時は、プラグイン側のID指定にCSSが負けていないか(!importantで解決できることが多い)
設定項目が多い分、見た目もかなり自由に調整できるプラグインでした。目次まわりで悩んでいる人の参考になればうれしいです。