SWELLの目次は、カスタマイザーの「投稿・固定ページ」＞「目次」で表示条件・階層・デザインを設定できます。
目次が表示されないときは、表示設定・見出しの数・記事ごとの設定・H2の有無の順に見ていくのが結論です。
目次の設定場所が分からない方と、目次が出なくて困っている方に向けた記事です。
見出しを隠す・文字を削るカスタマイズは別記事に分け、本記事は標準の設定と確認の順番を扱います。
項目名はテーマのバージョン2.19.0の文字列で、2026年10月25日に当方が運用するサイトのテーマで確かめました。
SWELLの目次はどこで設定するか
サイト全体の設定はカスタマイザー、記事ごとの切り替えは投稿編集画面のサイドバーです。
この2か所を押さえると、あとの項目はどこを触ればよいかで迷いません。
設定画面の場所と目次が入る位置
カスタマイザーは、WordPressの管理画面で「外観」→「カスタマイズ」を押すと開きます。
出典：WordPress.org 外観カスタマイズ画面（2026年10月25日確認）
- 管理画面の「外観」→「カスタマイズ」を押して、カスタマイザーを開く
- 左の一覧から「投稿・固定ページ」を開く
- その中の「目次」を選ぶと、目次の設定項目が並ぶ
- 右側のプレビューで見た目を確かめながら変え、上の「公開」ボタンで保存する
目次は本文の最初のH2タグの直前に自動で入る仕組みです。
設定画面の見出しには「目次を最初のH2タグの直前に自動生成することができます。」と書かれています。
つまり、本文に目次のブロックを自分で置く作業は要りません。
逆に言うと、本文にH2が1つも無い記事では目次の入る場所が無く、目次は出ません。
サイト全体の設定と記事ごとの設定の違い
記事ごとの設定は、投稿編集画面の右サイドバーにある「SWELL設定」の中にあります。
| 決めたいこと | 場所 | 項目名 |
|---|---|---|
| サイト全体で目次を出すか | カスタマイザー「投稿・固定ページ」＞「目次」 | 投稿ページに目次を表示／固定ページに目次を表示 |
| この記事だけ目次を出すか | 投稿編集画面のサイドバー「SWELL設定」 | 目次 |
| サイト全体の階層 | カスタマイザー「投稿・固定ページ」＞「目次」 | どの階層の見出しまで抽出するか |
| この記事だけの階層 | 投稿編集画面のサイドバー「SWELL設定」 | 目次抽出対象 |
記事ごとの設定は、サイト全体の設定より優先します。
全体では目次を出す設定でも、記事側の「目次」がオフならその記事には出ないので、確認のときに忘れやすい点です。
目次の表示条件を設定する
表示条件は「どのページ種別に出すか」と「見出しが何個あれば出すか」の2つです。
目次が表示されない相談の多くは、この2つのどちらかでつまずいています。
投稿ページに目次を表示／固定ページに目次を表示
「投稿ページに目次を表示」と「固定ページに目次を表示」は、それぞれ独立したチェックです。
投稿にだけチェックを入れると、固定ページには見出しが何個あっても目次は出ません。
会社案内のような固定ページで目次を見せたくない場合は、固定ページ側のチェックを外すだけで済みます。
見出し何個以上で表示するか
「見出し何個以上で表示するか」は1〜10の数値で、記事の見出しがこの数より少ないと目次は出ません。
数える見出しは、「どの階層の見出しまで抽出するか」で選んだ階層までのものです。
たとえば抽出対象がh2で、この値が3のとき、H2が2つしかない記事には目次が入りません。
- 短い記事にも目次を出したい：値を小さくする
- 見出しが1〜2個の記事では目次を出したくない：値を3以上にする
- h3まで抽出している：h3も数に入るので、同じ値でも目次が出やすくなる
目次のタイトル
「目次のタイトル」は、目次の上に出る文字を自由に入力する欄です。
「目次」のままでも伝わりますが、「この記事の内容」のように読者の言葉に寄せる使い方もできます。
空欄にするとタイトル行がどう出るかは当方では試していないので、変えるときは文字を入れた状態で確かめてください。
目次に出す階層を設定する（h3まで出すか）
階層はサイト全体で決めたうえで、長い記事や短い記事だけ記事側で変えるのが扱いやすい形です。
どの階層の見出しまで抽出するか
「どの階層の見出しまで抽出するか」の選択肢は、h2・h3・h4・h5の4つです。
h2を選ぶと大見出しだけの短い目次になり、h3を選ぶと小見出しまで並びます。
h3まで出すとスマホでは目次が画面を占めやすいため、次に説明する省略表示と組み合わせるのが現実的です。
記事ごとに「目次抽出対象」で変える
投稿編集画面のサイドバー「SWELL設定」にある「目次抽出対象」で、その記事だけ階層を変えられます。
選択肢は「H2まで表示」「H3まで表示」「H4まで表示」「H5まで表示」の4つです。
サイト全体はh2までにしておき、手順が長い記事だけ「H3まで表示」にする、という使い分けができます。
目次の省略表示と項目数
「目次の省略表示」は、項目が多いときに一部を折りたたむ設定です。
| 選択肢 | 動き |
|---|---|
| 省略しない | すべての項目を開いた状態で出す |
| 指定の数を超えた分を省略する | 「項目が何個を超えると省略するか」の数を超えた項目を折りたたむ |
| h3以下を省略する | h2は出し、h3以下の項目を折りたたむ |
| 指定の数を超えた分 + h3以下を省略する | 上の2つを両方かける |
「項目が何個を超えると省略するか」は数値で、超えた分に「開くボタンのテキスト」で入れた文字のボタンが付きます。
設定画面には「※ 目次の項目数が「指定した数 + 1」個の時は省略されません。」という注記があります。
注意点として、1項目だけ隠すボタンを出さないための仕様なので、境目の記事で省略が働かなくても設定ミスではありません。
「閉じるボタンのテキスト」は、開いたあとに戻すボタンの文字です。
目次のデザインを設定する
見た目の設定は3項目で、CSSを書かなくても番号や点の色まで変えることができます。
| 項目名 | 選択肢 |
|---|---|
| 目次のデザイン | シンプル／ボックス／上下ボーダー／ストライプ背景 |
| 目次のリストタグ | olタグ／ulタグ |
| 擬似要素(ドット・数字部分)のカラー | テキストカラー／メインカラー／カスタムカラー |
目次のデザイン
「目次のデザイン」は、シンプル・ボックス・上下ボーダー・ストライプ背景の4種類から選びます。
枠の有無と背景の違いなので、記事の本文と区別がつく程度の控えめなものを選ぶのが無難です。
目次のリストタグ
「目次のリストタグ」は、olタグとulタグのどちらで目次を組むかです。
olタグは項目の前に番号が付き、ulタグは番号の代わりに点が付きます。
手順の記事が多いサイトは番号が付くolタグ、読む順番が決まっていないサイトはulタグが合います。
擬似要素(ドット・数字部分)のカラー
「擬似要素(ドット・数字部分)のカラー」は、番号や点の色だけを変える項目です。
テキストカラーなら本文と同じ色、メインカラーならサイトの基調色になり、カスタムカラーを選ぶと色の指定欄が出ます。
本文の文字色が濃い灰色のサイトでは、メインカラーにすると番号だけが浮いて見やすくなります。
目次広告を設定する
目次の前後に広告を入れる設定もカスタマイザーの同じ画面にあり、位置と表示条件の2項目です。
目次広告の位置
| 項目名 | 設定画面の説明文 |
|---|---|
| 目次広告の表示設定 | 「SWELL設定」から広告コードを設定すると表示されます。 |
| 目次がなくても広告を表示するかどうか | ※ 1つ目のh2タグの前に表示されます。 |
説明文のとおり、カスタマイザーの項目は位置と条件だけで、広告のコードそのものは「SWELL設定」側に入れる分担です。
「目次広告の位置」は、「目次の前に設置する」と「目次の後に設置する」の2択から選びます。
目次がなくても広告を表示するかどうか
「目次がなくても広告を表示するかどうか」は、「投稿ページで表示する」「固定ページで表示する」のチェックです。
見出しが足りず目次が出ない記事でも、ここにチェックが入っていれば広告だけが出ます。
上の表の注記のとおり、広告の位置は1つ目のH2タグの前で、目次が出るときと同じ場所です。
当方のサイトでは目次広告を使っておらず、広告の見え方は確かめていません。
目次が出ないときに見る順番
目次が表示されないときの対処は、原因を決めつけずに設定→本文→環境の順で見ていくことです。
上から順に見れば、たいていは4つ目までのどこかで止まります。
1〜4：設定と本文を見る
- カスタマイザーの「投稿ページに目次を表示」「固定ページに目次を表示」に、そのページ種別のチェックが入っているか
- 「見出し何個以上で表示するか」の数より、記事の見出し（抽出対象の階層まで）が少なくないか
- 投稿編集画面の「SWELL設定」にある「目次」が、その記事でオフになっていないか
- 本文にH2があるか（目次は最初のH2の直前に入る）
2つ目は、下書きの段階で見出しが少ない記事ほど起きやすい点です。
4つ目は、本文をH3だけで組んだ記事や、見出しブロックではなく太字で見出しを作った記事で起きます。
太字の見出しはテーマからは本文の段落に見えるため、見出しブロックに置き換えると目次に入ります。
5〜6：キャッシュとプラグインを見る
設定と本文に問題が無ければ、古い表示が残っていないかと、別の目次機能が重なっていないかを見てください。
- SWELLのキャッシュ機能やWP Rocketなどのキャッシュを消して、ページを再表示する
- Table of Contents PlusやRich Table of Contents（RTOC）などの目次プラグインが有効になっていないか
WP Rocketのキャッシュは、管理バーの「WP Rocket」メニューにある「Clear and preload cache」で全体を消せます。
出典：WP Rocket Clear WP Rocket cache（2026年10月25日確認）
目次プラグインは、SWELLの目次と二重に目次を作ったり、見出しのIDを書き換えたりして表示に影響することがあります。
- Table of Contents Plus（WordPress.org、2026年10月25日確認）
- Rich Table of Contents（WordPress.org、2026年10月25日確認）
SWELLには目次機能が入っているので、目次プラグインを止めてテーマの目次に寄せるのが基本です。
→ 関連：SWELLと相性の良いプラグイン（目次プラグインは不要）
6つまで見ても出ない場合は、目次に限らず表示全体が崩れていないかを疑います。
→ 関連：SWELLの表示が崩れる原因と直し方
標準の設定でできないこと（カスタマイズ記事への振り分け）
ここまでの項目はサイト全体に一律にかかる設定で、「この見出しだけ」「この文字だけ」といった細かな調整はありません。
そこから先はコードやCSSを足す作業になるため、やりたいこと別に記事を分けています。
設定画面だけでは足りない場面
- 特定の見出しだけ目次から外したい（設定は階層単位でしか選べない）
- 目次に出る文字の一部を削りたい（見出しの文字がそのまま出る）
- サイドバーの目次で、今読んでいる見出しを光らせたい
- 目次の下にウィジェットやバナーを置きたい
- 各見出しの末尾に「目次へ戻る」リンクを入れたい
- スマホの追従する目次ボタンの見た目や文字を変えたい
サイドバーの目次は「目次ウィジェット」で置けますが、設定画面の説明文に「目次用デザインは適用されないので「サイドバー」でご利用ください。」とあります。
つまり、本文の目次と同じデザインにはならず、見た目を揃えるにはCSSが要ります。
やりたいこと別の記事
| やりたいこと | 標準の設定 | 読む記事 |
|---|---|---|
| 特定の記事だけ階層や表示を変える | できる（目次・目次抽出対象） | 特定の記事だけ目次の見出し表示設定を変更する |
| 特定の見出しを目次から外す | できない | 目次に対して特定の項目を表示非表示にする |
| 目次の文字を削る | できない | 目次の文字を削る |
| サイドバーの目次をハイライトする | できない | サイドバーの目次をハイライトする |
| 目次の下にウィジェットを置く | できない | 目次下にウィジェットを追加する |
| 「目次へ戻る」リンクを自動で入れる | できない | 「目次へ戻る」のアンカーリンクを自動挿入する |
| スマホの目次ボタンを調整する | 表示の有無と文字だけ | スマホ追従目次ボタンのカスタマイズ |
- 目次に対して特定の項目を表示非表示にする
- 目次の文字を削る
- サイドバーの目次をハイライトする
- 目次下にウィジェットを追加する
- 「目次へ戻る」のアンカーリンクを自動挿入する
- スマホ追従目次ボタンのカスタマイズ
コードを足す記事は、テーマの更新で動かなくなることがあるため、まず標準の設定で足りないかを見てから進んでください。
まとめ：目次の設定で次にやること
SWELLの目次は、カスタマイザーの「投稿・固定ページ」＞「目次」と、記事側の「SWELL設定」の2か所で決まります。
表示されないときの対処は、表示設定・見出しの数・記事ごとの設定・H2の有無・キャッシュ・プラグインの順に見ることです。
- カスタマイザーで「投稿ページに目次を表示」を入れ、「見出し何個以上で表示するか」を自分の記事の長さに合わせる
- 「どの階層の見出しまで抽出するか」をh2かh3に決め、長い記事は省略表示を入れる
- デザイン・リストタグ・擬似要素のカラーをサイトの色に合わせる
- 目次が出ない記事があれば、上の6つを順に見る
- 標準の設定で足りない部分は、振り分け表の記事へ進む
→ 関連：SWELLカスタマイズまとめ
