はじめに
WordPressの人気テーマ「SWELL」を使っていると、記事の視認性を高めるために目次を綺麗に整えたいと感じる場面は多いはずです。読者にとって目次とは、記事全体にどのような情報が書かれているかを瞬時に把握し、目的の段落へ素早く移動するための大切なナビゲーション機能です。しかし、標準機能の設定場所が分からなかったり、デザインのカスタマイズ方法に悩んだり、急に目次が表示されなくなって困ってしまうケースも珍しくありません。
この記事では、SWELLの目次に関する基本的な作り方から、おしゃれに見せるカスタマイズ、表示位置の調整、さらにはトラブル時の解決手順までを網羅して分かりやすく解説します。専門的なコードを使わなくても、ダッシュボードの簡単な操作だけで魅力的な目次を作り上げることができますので、ぜひ最後まで参考にしてください。
SWELL目次機能の魅力と基本概要
SWELLはプラグインを追加しなくても、標準機能だけで高品質な目次を自動生成できる点が大きな魅力です。従来のWordPress環境では「Table of Contents Plus」などのプラグインを導入して目次を作る手法が一般的でしたが、SWELLであればテーマ独自の機能として最適化されているため、余計なプラグインを増やす必要がありません。
プラグインの数を最小限に抑えることは、Webサイト全体の表示速度を高速に保つ上で非常に効果的です。また、デザインの一貫性も保たれるため、サイト訪問者にとっても見やすいレイアウトが実現します。さらに、見出しの階層表示や開閉アニメーション、特定のページでの非表示設定など、ブログ運営において役立つ細やかな調整が直感的な操作パネルから手軽に行えるよう設計されています。
SWELLにおける目次の基本的な作り方と設定
SWELLで目次を表示させるための設定は、WordPressの管理画面から数クリックで行えます。特別な知識がなくても、指定のメニューを開いて選択肢を調整するだけで、投稿ページや固定ページに自動で目次が差し込まれます。
全体設定の進め方
サイト全体の目次表示を一括で管理するには、WordPressのダッシュボードから設定を行います。具体的な操作手順は以下の通りです。
- ダッシュボードメニューから「外観」を選択し、「カスタマイズ」をクリックします。
- メニュー一覧の中から「投稿・固定ページ」を選び、「目次」の項目に進みます。
- 表示された設定画面で、「目次を表示する」にチェックを入れます。
この設定を保存するだけで、記事内の見出し（H2やH3など）を自動で抽出して目次が作成されます。投稿ページだけでなく固定ページにも個別に表示の有無を指定できるため、サイトの構造に合わせた柔軟な運用が可能です。
抽出条件の調整手順
目主にどのレベルの見出しまでを含めるか、または見出しが何個以上ある場合に目次を出すかという抽出条件も細かく指定できます。基本的には、以下の基準で設定するのがおすすめです。
| 設定項目 | 推奨する設定内容 | 設定の理由とメリット |
|---|---|---|
| 表示させる見出しの深さ | H2見出し〜H3見出しまで | H4以下まで入れると長くなり可読性が下がるため |
| 目次を表示する最小見出し数 | 見出し2個以上 | 1個以下の短文で目次が出ると冗長に見えるため |
これらの調整により、短すぎる記事では目次を隠し、長文記事では整理された見出し構造を読者に提示できるようになります。
SWELL目次のおしゃれなデザインカスタマイズ
SWELLには、目次の見た目をサイトのテーマに合わせて変化させるデザイン機能が標準で備わっています。色合いや形状を変更することで、記事全体の印象を大きく向上させることができます。
目次デザインの変更手順
目次のスタイルは、カスタマイザーの「目次」設定内にある「目次デザイン」の項目から選択できます。SWELLでは主に以下のようなデザインタイプが用意されています。
- シンプル：背景や装飾を最小限に抑えた、どのようなサイトにも馴染むデザインです。
- ボックス：目次全体を枠線で囲み、コンテンツとしての区切りを明確にするタイプです。
- 上下ボーダー：上部と下部にアクセントラインを配置し、スタイリッシュに見せるスタイルです。
- ストライプ背景：背景に控えめな斜めストライプを施し、視覚的なアクセントを加えます。
自分のブログの雰囲気やブランドカラーに合わせて、最も読みやすいと感じるデザインを選択してください。
リスト形式とカラーの調整
目次内の箇条書きスタイルは、数字付きリスト（olタグ）と通常の箇条書き（ulタグ）のいずれかを選択可能です。見出しの順番を強調したい場合は数字付き、すっきり見せたい場合は通常の箇条書きが適しています。
また、目次の配色についてもサイトのメインカラーと連動させるか、目次専用の色を指定するかを選べます。文字色や背景色、見出し番号の色を適切に組み合わせることで、読者の視線をスムーズに導くことができるようになります。
長い目次をすっきり見せる折りたたみ機能
記事が長くなり見出しの数が多くなると、目次自体が巨大化して本文にたどり着くまで時間がかかってしまうことがあります。この問題を解決するのが「折りたたみ（開閉）」機能です。
デフォルトで目次を閉じた状態にしておく設定や、「開く・閉じる」ボタンを設置する機能を利用することで、画面領域を無駄に圧迫しません。特に画面が狭いスマートフォンでの閲覧時において、ユーザーのスクロール負担を軽減するために非常に役立つ機能です。
目次を好きな位置に設置・非表示にする方法
基本設定では、目次は自動的に「最初のH2見出しの直前」に配置されます。しかし、記事構成によっては別の場所に置きたい場合や、特定のページだけ目次を隠したい場合もあります。
ショートコードを活用した配置の自由化
本文中の特定の場所に目次を差し込みたいときは、専用のショートコードを利用します。記事の執筆画面（ブロックエディタ）で以下のコードを入力することで、意図した位置へ目次を呼び出すことができます。
- 目次
このショートコードを入力すると、自動配置のルールに関わらず、そのコードが存在する場所に目次がレンダリングされます。前置きが長くなった記事で、通常より上の位置に目次を置きたい場合などに重宝します。
特定記事で目次を非表示にする手順
ランディングページ（LP）やお問い合わせページ、挨拶のみの短い投稿など、目次が存在することでかえって見栄えが悪くなるケースがあります。そのような場合は、記事ごとに個別の非表示設定を行います。
投稿編集画面の右側にあるサイドバー領域（「SWELL設定」ブロック）を確認すると、「目次を表示しない」というチェックボックスが存在します。ここにチェックを入れて記事を更新するだけで、そのページに限って目次を完全に非表示へ切り替えることが可能です。
回遊率を高めるサイドバー固定表示と追従ボタン
読者が記事を読み進めて画面を下にスクロールした際にも、常に目次へアクセスできる状態を作っておくことは、サイト内の滞在時間や回遊率を高める上で有効です。
パソコン表示向け追尾サイドバー設定
パソコンなどの大画面端末では、記事の横にあるサイドバー領域へ目次を常駐させることができます。設定はWordPressの「ウィジェット」画面から行います。
- ダッシュボードの「外観」から「ウィジェット」を選択します。
- 利用できるウィジェット一覧から「[SWELL]目次」を探します。
- 「追尾サイドバー」エリアへドラッグ＆ドロップで配置します。
これにより、読者が本文をスクロールしても目次が画面側面に固定されてついてくるため、いつでも他の章へジャンプできるようになります。
スマートフォン表示向け目次ボタン設定
画面が狭いスマートフォンではサイドバーを表示できないため、画面下に追従する「目次ボタン」を活用します。カスタマイザーの「サイト全体設定」にある「下部固定ボタン」の項目から、目次ボタンの表示を有効化します。
この設定をオンにすると、スマホ画面の右下などに小さな目次アイコンが固定配置されます。読者がそれをタップすると画面上に目次がポップアップ表示されるため、長い記事であっても目的の場所にすぐ戻れる操作性が手に入ります。
目次周りに広告を設置して収益化を図る方法
ブログやアフィリエイトサイトを運営する上で、目次の前後は広告のクリック率が最も高くなりやすい絶好のポイントとされています。SWELLには、この位置へ簡単に広告を差し込める機能があらかじめ組み込まれています。
目次上・目次下広告の設定手順
広告コードの配置は、テーマ固有の設定画面から一括で行うことができます。
- ダッシュボードメニューの「SWELL設定」から「広告コード」を選択します。
- 「目次上」または「目次下」の専用入力欄へ、取得した広告タグを貼り付けます。
- 「変更を保存」をクリックして反映させます。
ここに広告を設定しておくことで、全記事の目次前後に自動で広告が配置されます。個々の記事に手動で広告コードを貼り付ける手間が省けるため、管理が格段に効率化されます。
SWELLで目次が表示されないトラブルの原因と解決策
設定を完了したはずなのに記事上に目次が出てこない場合は、いくつかの代表的な原因が考えられます。慌てずに以下のチェック項目を確認し、対応を進めてください。
表示トラブルの主な原因と確認リスト
目次が表示されないときに確認すべきポイントを以下の表にまとめました。
| 原因となる要素 | 状況の解説 | 試してみるべきこと |
|---|---|---|
| 見出し数の不足 | 記事内のH2やH3の数が設定した最小値に達していない | 見出しタグを増やすか、カスタマイザーで条件を「1個以上」に変更する |
| 設定の相反 | 全体設定または個別の投稿画面で非表示になっている | 投稿画面の右サイドバーで「目次を表示しない」のチェックを外す |
| プラグインやキャッシュの干渉 | 他の目次プラグインの残存やブラウザキャッシュの影響 | 不要な目次プラグインを無効化し、サイトとブラウザのキャッシュを削除する |
特に、過去に他のテーマから移行してきたサイトの場合、昔使っていた目次用プラグインが有効化されたまま残っていて衝突を起こしているケースが多く見られます。まずは不要なプラグインを一度停止してみることをおすすめします。
成果を出すために今すぐするべきこと
SWELLの目次機能を最適化し、訪問者にとって読みやすく、サイト運用者にとっても成果が出やすい環境を作るために、以下の手順で設定を進めてください。
- カスタマイザーを開き、「投稿・固定ページ」＞「目次」から基本的な表示ルール（抽出する見出しの深さと個数）を決定する。
- サイトデザインの配色に合わせて、目次スタイルと箇条書きの見た目を調整する。
- パソコン用の「追尾サイドバー」とスマートフォン用の「下部固定ボタン」に目次を設定し、全端末での閲覧体験を向上させる。
- 収益化を目指す場合は「SWELL設定」から目次下へ適切な広告コードを配置する。
- 設定後に実際の記事ページを開き、正しく表示されているか、スマートフォンの実機等でも動作に問題がないか確認する。
Q&A（よくある質問）
SWELLの目次機能に関して、ユーザーから寄せられることの多い質問と回答をまとめました。
Q: 目次のタイトル文字（「目次」という見出し）を変更することはできますか？
A: はい、可能です。カスタマイザーの「目次」設定内にある「目次エリアのタイトル」という入力欄から、「CONTENTS」や「この記事の目次」など、お好みの文字列に自由に変更できます。
Q: H2見出しだけに限定して、H3見出しを目次に出さないようにできますか？
A: 可能です。カスタマイザーの「目次」設定にある「目次に見出しを抽出する階層」の項目で、「H2まで」を選択してください。これによりH3以下の見出しは目次から除外され、すっきりとした構成になります。
Q: 目次の枠線や背景の色だけを個別で変更したい場合はどうすれば良いですか？
A: SWELLのカスタマイザー機能で基本色の変更が可能ですが、より細かなデザイン変更を行いたい場合は「外観」＞「カスタマイズ」＞「追加CSS」の項目から、専用のCSSコードを記述してスタイルを上書きすることができます。
参考資料
この記事の執筆にあたり、以下の公式サイト情報を参考にいたしました。
・SWELL公式マニュアル：目次に関する設定
https://swell-theme.com/setting-manual/417/
・SWELL公式サイト：テーマの特徴と機能一覧
https://swell-theme.com/
コメント