WordPressテーマ SWELL は、プラグイン不要で目次を実装できます。
基本設定から、サイドバーや固定ボタンの活用、カスタマイズ方法までまとめて解説します。
SWELLの目次機能の特徴
- プラグイン不要で標準装備
- 見出し（H2/H3など）を自動で抽出して目次にする
- サイドバー・固定ボタンでも表示可能
- デザインや抽出ルールのカスタマイズに対応
- ショートコードで好きな位置にも挿入できる
SWELLで目次を表示する基本ステップ
Step①：目次の基本設定を確認する
- WordPress管理画面 → 「外観」>「カスタマイズ」>「投稿・固定ページ」>「目次」 を開く
- 投稿ページ・固定ページに目次を表示するか をONにする
※固定ページは不要ならOFFでもOK
Step②：記事に見出しを必ず入れる
目次は 見出しブロック（H2・H3など） を元に作られています。
- 見出しが1つしかない → 目次は表示されない
- 複数の見出しを用意する → 自動で目次が生成される
見出しは H2やH3 を意識して使うと、読者が読みたい場所に移動しやすくなります。
Step③：必要に応じてショートコードも活用
デフォルトでは 最初の見出しの前 に目次が自動表示されますが、
好きな位置に目次を置きたいときはショートコードが便利です。
[swell_toc]※ ショートコードを使うには 目次が有効になっていて、見出しが複数あること が前提です。
追加の目次表示方法
サイドバーに目次を置く
- 外観 > カスタマイズ > サイドバー でサイドバーを表示
- 外観 > ウィジェット から 「SWELL 目次」 を 追尾サイドバー に追加
※PC表示で横に固定されて便利です
スマホでは追尾サイドバーが非表示になる場合があるので、レスポンシブもチェックしてください。
固定目次ボタンを表示する
目次をスクロール中ずっと追いかける固定ボタン を表示できます。
- 外観 > カスタマイズ > サイト全体設定 > 下部固定ボタン・メニュー
- 目次ボタンの表示 を ON にする
- 形を「四角」 or 「円形」から選択
※ 固定ボタンは「ページトップボタン上」に表示されます。
目次のカスタマイズ（見た目を整える）
カスタマイズでは次のような調整が可能です。
「外観」>「カスタマイズ」>「投稿・固定ページ」>「目次」
- 目次タイトル（例：「もくじ」「読みたい見出しへ」）
- 目次デザイン（シンプル／ボックス／上下ボーダー／ストライプ背景）
- リスト形式（数字 / ドット）
- 色や見出し抽出範囲（H2～H4など）
- 省略表示や開閉テキスト
目次が表示されない時の対処ポイント
もし目次が表示されない場合、よくある原因は次の通りです。
- 目次設定がOFFになっている
- 投稿単位で目次表示がOFFになっている
- 見出しがない／見出しが1つしかない
まずは 「外観 > カスタマイズ > 目次」 で全体設定を確認し、投稿エディタで記事ごとの目次表示設定をチェックしてみてください。
ちなみにこの記事を書こうと思ったきっかけは、つい最近、実際のクライアント様サイトで目次が表示されず、かなり悩んだからです。
クライアント様からのご依頼で約2年ほど前に制作したサイトのカスタマイズ作業中、特定のページだけ目次がどうしても表示されず、
- カスタマイザーの目次設定
- 追加CSS
- style.css
などを一通り確認しても原因が分からず、結果的に2時間ほど試行錯誤することになりました。
最終的に分かった原因は、固定ページごとの「カスタムCSS」で、目次を非表示にしていたことでした。（shock・・・）
当時はSWELLのカスタマイズにあまり慣れておらず、「特定のページだけ目次を消したい」という理由で、意図的にカスタムCSSで非表示にしていたようなのですが、自分でもすっかり忘れていて、完全に盲点でした。
（固定ページの編集画面から個別に設定できるのに・・・）
さすがに同じようなケースはないと思いますが、もし「設定もCSSも問題ないのに表示されない・・・」という場合は、固定ページ（または投稿）個別のカスタムCSS も、一度チェックしてみてください。（自分へのメモ）
まとめ｜SWELLなら簡単に目次が作れる！
- SWELLは プラグイン不要 で目次を実装できる
- サイドバー・固定ボタンなどの追加表示もOK
- デザイン・抽出ルールも柔軟に変更可能
- 目次があると読者満足度＆滞在時間UPに繋がる
サイトデザインに合わせて調整してみてください。
