SWELLの目次設定方法｜表示条件・デザイン・追従サイドバーを初心者向けに解説【2026年版】

SWELLでは、記事内の見出しから目次を自動生成できます。ただ表示するだけでなく、表示対象となるページ、見出し階層、デザイン、省略条件までカスタマイザーで設定でき、必要な記事だけ個別に上書きすることも可能です。

一方で、設定場所が「カスタマイザー」「投稿編集画面」「ウィジェット」に分かれているため、どこを変更すればよいか迷いやすい機能でもあります。

この記事では、SWELLの目次を初めて設定する方に向けて、共通設定、投稿ごとの上書き、追従サイドバーへの設置、表示されない場合の確認方法を順番に解説します。HOAI Journalで実際に使用している設定も紹介します。

まず、サイト全体の見た目や表示条件は「カスタマイザー」、特定の記事だけの例外は「投稿編集画面」、PCの右側にも目次を置く場合は「ウィジェット」を使います。初めて設定する方は、共通設定を整えてから、必要な記事だけ上書きすると迷いません。

SWELLの目次は見出しから自動生成される

SWELLの目次は、記事本文に設定したH2やH3などの見出しを読み取り、自動で一覧にする機能です。SWELL公式マニュアルの「目次に関する設定」では、通常、記事内にある最初のH2見出しの直前へ目次が自動生成されると案内されています。

本文目次と追従目次は、同じ見出しを異なる場面で案内します。

本文目次と追従サイドバー目次は役割が異なる

本文内の目次は、記事を読み始めた読者に全体像を伝える案内です。追従サイドバーの目次は、PCで記事を読み進めている途中でも別の見出しへ移動しやすくする補助導線です。

両方を使用しても問題ありません。本文目次を最初の案内、追従目次を読み進めた後の移動手段として使い分けます。

見出し階層が目次の読みやすさを決める

目次の設定を整えても、本文の見出し階層が崩れていると内容を把握しにくくなります。H2を大きな話題、H3をH2の補足として使い、H2の直下で突然H4を使うような飛び級は避けましょう。

見出しの作り方から確認したい方は、SWELLで記事を書く方法も参考にしてください。

カスタマイザーで目次の基本設定を開く

サイト全体に共通する目次設定は、カスタマイザーから変更します。次の手順で画面を開き、後続の節を参考に表示条件を選びます。

目次の表示条件とデザインを決める

目次設定では、最初に「どのページで表示するか」と「どの見た目にするか」を決めます。すべての項目を変更するのではなく、現在のサイトデザインと記事構成に必要な項目だけを調整します。

投稿ページは表示、固定ページは非表示にした設定例です。

投稿ページと固定ページを分けて考える

「投稿ページに目次を表示」と「固定ページに目次を表示」は別々に設定できます。ブログ記事では目次が役立つことが多い一方、お問い合わせや運営者情報など短い固定ページでは不要な場合があります。

まず投稿ページでは目次を表示し、固定ページはページの長さや目的に応じて、表示するかを判断しましょう。

デザインとリストタグを組み合わせる

SWELLには、シンプル、ボックス、上下ボーダー、ストライプ背景などの目次デザインがあります。リストタグは、順序を示す「ol」と、順序を付けない「ul」から選択できます。

手順や学習順を意識させたい場合はol、項目を並列に見せたい場合はulが候補です。ただし、サイト内の記事ごとに頻繁に変えず、基本デザインを統一した方が読者は迷いません。

HOAI Journalで採用しているデザインとリストタグ、その実際の表示例は、後述の「HOAI Journalの目次設定」で紹介します。

色は本文との読みやすさを優先する

数字やドットの色は、テキストカラー、メインカラー、カスタムカラーから選べます。目立たせることより、本文や背景とのコントラストを確保することを優先してください。

抽出する見出しと省略条件を整える

表示対象を増やしすぎると、本文より先に長い目次を読む状態になります。記事の平均的な見出し数に合わせて、抽出階層と省略条件を決めます。

表示条件は抽出対象の見出し数で判断します。

H2までかH3までかを選ぶ

記事の全体像を簡潔に見せたい場合はH2まで、各項目の詳細まで直接移動してほしい場合はH3までが候補です。H3を多く使う長文記事でH3まで表示すると目次が長くなりやすいため、実際の記事で確認して決めます。

見出しが何個以上なら表示するかを決める

見出しが少ない短い記事では、目次がなくても全体を把握できます。「見出し何個以上で表示するか」は、抽出対象になっている見出しの数で判断します。たとえば「H2まで・2個以上」なら、H2が1個、H3が3個あっても条件を満たしません。H2が2個以上ある記事で表示を確認してください。

長い目次は省略表示を使う

「目次の省略表示」では、指定数を超えた分やH3以下を省略する方法を選べます。「指定の数を超えた分を省略する」を選ぶ場合は、「項目が何個を超えると省略するか」も設定します。現在の画面には、項目数が「指定した数＋1」のときは省略されないという注意書きがあります。15に設定した場合、16項目では省略されません。

省略対象がある記事では、開くボタンで残りの項目が表示され、閉じるボタンで元に戻ることを確認します。ボタンの文言は変更でき、HOAI Journalでは「もっと見る」「折りたたむ」を使っています。設定値だけで判断せず、長い記事をPCとスマートフォン幅の両方で確認しましょう。

HOAI Journalの目次設定

HOAI Journalで現在使用している設定例です。投稿記事の読み進めやすさと、サイト内での統一感を優先しています。

設定項目	現在の設定	採用理由
投稿ページ	表示	長文の解説記事で全体像を示すため
固定ページ	非表示	短い案内ページでは不要な場合が多いため
デザイン	ストライプ背景	本文と区別しつつ強く目立ちすぎないため
リストタグ	ol	読む順序を把握しやすくするため
抽出階層	H2まで	目次を簡潔に保つため
表示条件	見出し2個以上	短い記事では表示しないため
省略表示	15（16項目では省略しない）	長い目次の占有面積を抑えるため

HOAI Journalと同じ設定をそのまま採用する必要はありません。記事の長さ、H3の数、読者が途中の項目へ直接移動する必要性を基準に選びましょう。

投稿ごとに目次表示を上書きする

共通設定を決めた後も、特定の記事だけ目次を非表示にしたり、抽出階層を変更したりできます。SWELLの投稿ページ設定方法で紹介した投稿別の「SWELL設定」を使用します。

変更後は右上の「保存」で反映します。

目次の表示・非表示を変更する

投稿編集画面右側の「投稿」タブを開き、下へスクロールして「SWELL設定」内の「表示の上書き設定」を探します。「目次」で表示・非表示を選ぶと、その記事だけに適用されます。「----」のままなら共通設定を引き継ぎます。

目次抽出対象を変更する

「目次抽出対象」では、その記事だけH2まで、H3までなどの抽出範囲を変更できます。共通設定を頻繁に変えるのではなく、例外となる記事だけ上書きします。

変更後は編集画面右上の「保存」を押し、保存完了後に公開記事を開き直します。WordPressのバージョンによってはボタンが「更新」と表示されます。未公開の記事は下書き保存してプレビューで確認し、目次確認のためだけに新規公開する必要はありません。

追従サイドバーに目次を表示する

PCで長い記事を読む場合は、追従サイドバーに目次を置くと、現在位置から別の見出しへ移動しやすくなります。SWELL公式の目次ウィジェット解説では、［SWELL］目次を表示したいウィジェットエリアへ設置する方法が案内されています。

本文目次が無効なページでは表示されない

SWELL公式マニュアルでは、目次ウィジェットは投稿・固定ページの「目次の表示設定」が有効な場合に表示されると説明されています。ウィジェットだけを設置しても表示されない場合は、カスタマイザーと投稿別設定の両方を確認してください。

スマートフォンでは本文目次を中心に考える

SWELLの「追尾サイドバー」はPCサイズでのみ表示されるため、スマートフォンでは本文内の目次が主な移動手段になります。PCだけで判断せず、実機またはブラウザのスマートフォン幅でも本文目次の長さと開閉を確認します。

読みやすい目次にする見出しの作り方

目次は設定だけでなく、本文の見出し文によって読みやすさが変わります。

見出しだけで内容が分かるようにする

「詳しく解説」「ポイント」など抽象的な見出しが並ぶと、目次から読みたい場所を判断できません。「H2までかH3までかを選ぶ」のように、その節で分かる内容を具体的に書きます。

長すぎる見出しを避ける

結論や条件をすべて見出しへ入れると、スマートフォンで何行にも折り返されます。中心となる内容を見出しにし、理由や例外は本文で説明します。

見出しの数を増やすことを目的にしない

短い説明まで細かくH3へ分けると、本文と目次の両方が断片的になります。読者が内容を探す単位として意味があるところに見出しを置きます。

SWELLの目次が表示されないときの確認項目

サイト全体で出ない場合は共通設定、一部の記事だけ出ない場合は投稿別設定と見出し数から確認します。本文目次は出るのに右側だけ出ない場合は、PC幅で開いているか、追尾サイドバーへウィジェットを置いているかを確認してください。

確認項目	主な原因	対応
共通設定	投稿または固定ページの目次が無効	カスタマイザーの表示設定を確認する
投稿別設定	「非表示」で上書きされている	投稿編集画面のSWELL設定を確認する
見出し数	表示条件の数に達していない	見出し数と最小表示数を照合する
見出し階層	H2など対象の見出しがない	段落の太字ではなく見出しブロックを使う
追従目次	本文目次が無効、または追尾サイドバー未設置	PC幅・本文目次・ウィジェットの順で確認する
表示確認	キャッシュに古い状態が残っている	変更した画面で保存し、公開記事または下書きプレビューを再読み込みする

目次設定と見出し数を最初に照合する

「見出し2個以上」などの表示条件に達していなければ、機能は正常でも目次は表示されません。見出しブロックの数と抽出階層を確認します。

投稿別の上書きを確認する

同じサイトで一部の記事だけ表示されない場合は、投稿別設定が原因になりやすい箇所です。「----」は共通設定を引き継ぐ状態で、「非表示」はその記事だけ無効にする状態です。

保存後の公開面で確認する

エディター上の設定だけで判断せず、プレビューまたは公開面で本文目次と追従目次を確認します。設定変更後も古い表示が残る場合は、ブラウザやサイト側のキャッシュを順番に確認してください。

よくある質問

設定を変えたのに一部の記事だけ変わらないのはなぜですか？

投稿別の「SWELL設定」で上書きされていないか確認してください。共通設定を使う場合は「目次」「目次抽出対象」を「----」へ戻して保存します。それでも反映しなければ、抽出対象の見出し数と、保存後の公開ページを確認します。

H3まで表示した方がよいですか？

必須ではありません。H3が少なく、読者が詳細項目へ直接移動するメリットが大きい記事では有効です。H3が多い長文記事では、H2までの方が全体像を把握しやすい場合があります。

本文目次と追従サイドバー目次を両方使ってもよいですか？

はい。本文目次は読み始めの全体案内、追従目次はPCで読み進めた後の補助移動として役割を分けられます。

固定ページにも目次を表示した方がよいですか？

固定ページの目的によります。長い解説ページでは役立ちますが、お問い合わせや短い案内ページでは不要な場合があります。共通設定は非表示にし、必要な固定ページだけ個別に表示する方法もあります。

まとめ

SWELLの目次は、カスタマイザーの共通設定、投稿ごとの上書き、追従サイドバーのウィジェットという3つの場所を分けて考えると整理しやすくなります。

最初に投稿ページの表示条件とデザインを決め、実際の記事で目次の長さを確認します。その後、例外となる記事だけ表示や抽出階層を上書きし、長文記事が多い場合は追従サイドバーへ［SWELL］目次を設置しましょう。

目的別に次の記事を選ぶ

目次の設定を終えたら、次に整えたい内容に合わせて記事を選んでください。

見出し階層や装飾を含めて記事の書き方を確認したい方は、記事の書き方の記事が役立ちます。

サイドバーや記事下エリアを含むウィジェットの使い分けを確認したい方は、ウィジェット設定の記事へ進んでください。