SWELLで目次を作る7ステップと設定完全ガイド

ブログを書いていて、「SWELLで目次を出したいのに、うまく表示されない」「もう少しおしゃれな見た目にしたい」と感じたことはありませんか。

SWELLの目次機能だけでかなり柔軟なカスタマイズができるので、目次プラグインを入れなくても、読みやすくて整理された記事は十分作れます。

私が実際にSWELLでブログを運営しながら試行錯誤してきた経験も交えつつ、SWELLの目次を「とりあえず表示させる」だけでなく、「しっかり使いこなす」ためのポイントを順番にお伝えしていきます。

SWELL 目次の基本をサクッと理解しよう

SWELLの目次機能でできること一覧

SWELLの目次機能で、実際にどんなことができるのかを一覧で整理してみます。

項目	内容
自動生成	記事中のh2・h3といった見出しから、目次を自動で作成してくれる
デザイン	「シンプル」「ボックス」「上下ボーダー」「ストライプ背景」などから選べる
階層設定	h2だけ、h3まで、というように目次に含める階層を指定できる
表示位置	記事上部に自動挿入したり、サイドバーやウィジェットで表示させたりできる
表示条件	「見出しが◯個以上なら目次を表示」といった条件を設定できる
タイトル文言	「目次」「この記事で分かること」など、タイトルの文字を自由に変更できる
折りたたみ	開く・閉じるボタンを付けて、目次を折りたたみ形式にすることも可能
広告エリア	目次の近くに広告を表示する専用エリアも用意されている

ざっくり言えば、「見出しをちゃんと付けておけば、SWELLが良い感じに目次を作ってくれる」というイメージです。私も最初は別の目次プラグインを入れようとしていましたが、SWELL標準の機能を知ってからは、むしろプラグインを減らして管理がラクになりました。

SWELL 目次がブログ運営に役立つ理由

SWELLの目次をきちんと使うと、見た目が整うだけでなく、ブログ運営全体にもいい影響があります。

私のブログでも、目次を丁寧に作るようにしてから、「どこに何が書いてあるか分かりやすかった」と感想をもらえることが増えました。SWELLの目次は飾りではなく、読者の案内役として大事な役目を持っています。

SWELL標準の目次とプラグイン目次の違い

すでに目次プラグインを入れている方は、「SWELL標準の目次と何が違うの？」と気になると思います。ざっくり比べると、次のようなイメージです。

• SWELL標準の目次機能
  • テーマ側で最初から用意されているので、デザインの統一感が出しやすい
  • 目次のタイトルやデザイン変更、見出し階層の設定など、必要な機能は一通りそろっている
  • プラグインを増やさなくていいぶん、管理やトラブル対応がシンプル
• 目次プラグイン（TOC系など）
  • テーマに依存しないので、他テーマに乗り換えても同じプラグインを使い回しやすい
  • 細かいデザイン調整ができるものもあり、こだわろうと思えばかなり作り込める
  • SWELLと機能がかぶると、目次が二重表示になったり見た目が崩れたりすることもある

SWELLを使っているなら、「まずは標準の目次機能を使ってみる」が基本で大丈夫です。それで物足りなければ、あとからプラグインを検討しても遅くありません。

SWELL 目次の設定前に押さえたい準備

見出しタグ（h2・h3）の正しい使い方

目次は、記事中に置いた見出し（h2・h3など）をもとに自動で作られます。つまり、見出しの付け方がバラバラだと、目次もバラバラになってしまうということです。

基本のルールは次の通りです。

• 記事タイトルはh1（SWELLが自動で設定してくれるので、自分でh1を使う必要はほぼない）
• 大きな章のタイトルがh2
• h2の中の小見出しがh3
• さらに細かく分けたいときだけh4を使う

よくあるNGパターンも挙げておきます。

• 文字を大きくしたいだけでh2を多用してしまう
• デザインのためにh3とh4を感覚で使い分けている
• 強調したい一文を、見出しではないのにh2で囲んでしまう

こうした使い方をすると、SWELLの目次には本来いらない項目まで並び、読者が「どこが重要なのか」をつかみにくくなります。太字やマーカーは「強調」、見出しは「構造を示すもの」と分けて考えるのがコツです。

記事構成と目次の関係をイメージしよう

見出しは、記事の「骨組み」のようなものです。骨組みがしっかりしていれば、SWELLの目次も自然と読みやすい形になります。

見出しレベルと役割の関係を、表でイメージしてみましょう。

見出しレベル	役割	例
h2	章のタイトル	「SWELL 目次の基本」「SWELL 目次の設定手順」など
h3	章の中の小見出し	「準備すること」「デザインの選び方」など
h4	さらに細かい説明	「初心者におすすめのパターン」など

私もブログを書き始めた頃は、思いついた順に本文を書いて、最後に無理やり見出しを付けていました。そうすると、目次もどこかちぐはぐで、「話があちこち飛んでいる」ように見えてしまうんですよね。

おすすめは、まずh2とh3だけざっくり並べて記事の流れを決めてから、本文を書き始めるやり方です。この方法に変えてから、SWELLの目次を見ただけで記事の内容が伝わるようになりました。

SWELLで目次を表示するためのチェックポイント

SWELLの目次を使う前に、「ここだけ意識しておけば大きな失敗はしない」というポイントをまとめておきます。

このあたりを整えてからSWELLの目次を設定すると、あとでデザインや表示位置を変えるときもスムーズに進みます。

SWELLの目次の基本設定ステップ

カスタマイザーで目次を有効化する流れ

SWELLの目次機能は、テーマのカスタマイザーからまとめて設定できます。大まかな流れは次の通りです。

手順	内容
1	WordPress管理画面から「外観」→「カスタマイズ」を開く
2	「投稿・固定ページ」など記事設定のメニューをクリックする
3	「目次」という項目を選ぶ
4	投稿ページ・固定ページで目次を表示するかどうかを選択する
5	表示位置やデザイン、表示条件などの項目を調整する
6	設定を公開して、実際の記事で目次が表示されているか確認する

SWELLの仕様として、記事中にある最初のh2見出しの直前に、自動で目次が挿入される形になっています。新しいブログを立ち上げたときは、私もまずこの画面を開いて、目次まわりの設定を一気に済ませるようにしています。

表示条件（見出し数・レベル）の決め方

SWELLの目次では、「見出しが何個以上あったら目次を出すか」「どの階層の見出しまで目次に含めるか」といった条件を指定できます。

目安としては、次のような設定にしておくとバランスがとりやすいです。

短いお知らせページやお問い合わせページまで目次を出してしまうと、「ちょっと大げさな印象」になることもあります。私は、プロフィールや利用規約のような固定ページでは目次をオフにして、解説記事やレビュー記事など、情報量が多いページだけで目次を使うように分けています。

記事ごとに目次のオン/オフを切り替える方法

SWELLでは、カスタマイザーで全体のルールを決めたうえで、記事ごとに目次の表示・非表示を上書き指定できます。エディターの右側にある設定パネルから、「この投稿では目次を表示する／しない」と切り替えられるようになっています。

この機能を使うと、次のような運用がしやすくなります。

• 固定ページは基本非表示にしておき、一部のページだけ個別に目次を表示する
• 縦に短いランディングページやセールページでは、あえて目次を出さない
• 情報量が多いノウハウ記事や比較記事だけ、しっかりと目次を表示する

「すべての記事に目次を出す」よりも、「読者にとって必要な記事だけ目次を出す」ほうが、サイト全体の印象も整いやすくなります。

SWELL 目次のデザインとカスタマイズ

4種類の目次デザインを比較

SWELLでは、目次用にいくつかのデザインが用意されています。代表的な4種類を、特徴と合わせて比べてみます。

デザイン	特徴	向いているブログの雰囲気
シンプル	枠や背景が控えめで、とてもスッキリした印象の目次	ミニマルデザイン、シンプルな解説ブログ
ボックス	目次全体が箱で囲まれ、情報がまとまって見える	マニュアル系、ハウツー記事が多いサイト
上下ボーダー	目次の上下に線が入り、本文との区切りがはっきりする	ビジネス寄り、堅めの情報を扱うサイト
ストライプ背景	背景にストライプが入り、パッと目に留まりやすい	個人ブログ、雑記ブログ、ポップなデザインのサイト

私の感覚では、最初は「シンプル」か「ボックス」を選んでおけば大きく外しません。サイトの世界観がはっきりしてきたら、「ストライプ背景」で少し遊んでみる、という順番でも良いと思います。

タイトル文言・色・番号表示を調整する

SWELLの目次タイトル部分は、「目次」以外の文言に自由に変更できます。

よく使われる例としては、次のようなものがあります。

• この記事の内容
• この記事で分かること
• コンテンツ一覧

読者側からすると、「この目次を見れば何が分かるのか」が一瞬でイメージできるタイトルのほうが親切です。私も、ノウハウ系の記事では「この記事で分かること」、レビュー記事では「この記事の内容」といった感じで、記事の種類に合わせて使い分けています。

また、目次の番号表示や色もカスタマイズできます。

• 番号ありにすると、「手順を追っていく記事」と相性がいい
• 番号なしにすると、コラムや雑記でも自然な印象になりやすい
• サイト全体のメインカラーに合わせて目次の線やアイコンの色をそろえると、統一感が出る

色をいじりすぎると、かえって落ち着きのない印象になることもあります。私は、「サイト全体でよく使う2〜3色の中から選ぶ」くらいに抑えるようにしています。

スマホ・PCでの見え方を意識したカスタマイズ

SWELLの目次は、PCとスマホで見たときの印象が少し違って見えることがあります。特にスマホでは、画面が縦に長くなりやすいので、目次が大きすぎると本文になかなかたどり着けません。

スマホの読みやすさを考えるなら、次のような工夫がおすすめです。

• 導入文のあと、早めのタイミングで目次を表示して、内容の全体像を見せる
• 目次を折りたたみ式にして、必要な人だけ開いて読めるようにする
• 見出しの文が長すぎるときは、目次で2行以内に収まるように少し短くする

私も、自分のスマホで記事を確認したとき、「目次の行数が多すぎて、画面のほとんどが目次で埋まっている」ことに気づきました。そのときは、見出しの言い回しを少し削ったり、似た内容の見出しをまとめ直したりして、目次がコンパクトになるよう調整しました。

SWELL 目次の表示位置とレイアウト活用術

記事上部の基本配置と注意点

多くのブログでは、「導入文 → 目次 → 本文」という流れが一般的です。SWELLも、最初のh2の直前に目次を挿入する仕様なので、この形がベースになります。

ただ、そのうえで次の点には気をつけておきましょう。

私が最近よく使っている型は、「導入文で共感と結論を簡潔に伝えたあと、すぐ下に目次を置く」形です。そのうえで、目次の下か少し下がった位置に、アフィリエイトリンクやバナーを1つだけ置くようにしています。

サイドバー追従やボタン表示でSWELL 目次を目立たせる

SWELLでは、ウィジェットを使ってサイドバーに目次を表示したり、追尾サイドバーに目次を置いたりすることもできます。さらに、テーマやカスタマイズによっては、画面の端に「目次」ボタンを出して、そこから目次を開くような見せ方も可能です。

こうした表示方法には、次のようなメリットがあります。

• 長い記事でも、「いま全体のどのあたりを読んでいるか」が分かりやすくなる
• スクロールしても常に目次が見えるので、読み飛ばしたい人にも優しい
• サイドバーの空きスペースを、有益なナビゲーションに変えられる

一方で、注意したいポイントもあります。

• スマホ表示で追従要素が多いと、画面が窮屈に感じられることがある
• 広告やプロフィール、人気記事など、サイドバーに置きたいものが他にもある場合は優先順位の整理が必要
• 読者の視線がサイドバーに流れすぎると、本文への集中が途切れてしまうこともある

追従サイドバーやボタン表示はとても便利ですが、「どの読者に、どう使ってほしいか」をイメージしながら、少しずつ試していくのがおすすめです。

目次まわりの広告・CTA配置

SWELLの目次付近は、収益や会員登録などの導線（CTA）を置くのに相性が良い位置でもあります。代表的な配置パターンを表にまとめておきます。

配置パターン	具体例	狙い
目次の直前	目次のすぐ上にテキストリンクやボタンを配置する	目次で内容を確認する前に、結論やおすすめを軽く提示する
目次の直後	目次のすぐ下にバナーや商品リンクを置く	「どんな内容か」を把握した人に、自然な流れで提案できる
サイドバー	サイドバーに目次と関連性の高い広告やリンクを置く	記事を読み進めながら、いつでも関連サービスに移動できるようにする

私がよく使うのは「目次の直後」です。目次で全体像を確認したあと、「詳しく読む前に結論だけ知りたい」という読者も一定数いるので、そのタイミングでおすすめを見せてあげると、クリックされやすい印象があります。

とはいえ、目次の上下に広告を詰め込みすぎると、せっかくのナビゲーションが見づらくなってしまいます。個人的には、「目次のまわりに置く導線は1〜2個まで」を目安にしています。

SWELL 目次が表示されないときのチェックリスト

設定ミス・見出し構造のエラーを確認

まずは、基本的な設定や見出し構造に問題がないか、落ち着いて確認していきます。

ブロックエディターでは、段落ブロックの文字に太字をかけただけだと、見た目は見出しっぽくても、SWELLの目次には拾われません。エディターの左上に「見出し」と表示されているかどうか、念のため確認してみてください。

プラグイン競合やキャッシュを疑うケース

設定や見出しに問題がなさそうなのにSWELLの目次が出てこない場合は、プラグインとの相性やキャッシュの影響も疑ってみます。

私も以前、目次プラグインを残したままSWELLの目次をオンにしてしまい、二重表示とレイアウト崩れが起きたことがあります。そのときは、目次プラグインを停止してから再度表示を確認し、問題が解消しました。

それでも直らないときに試したいこと

ここまで確認してもSWELLの目次がうまく出ない場合は、少し踏み込んだ確認が必要になることもあります。

• 一時的にSWELL以外のプラグインを全部オフにして、テーマと目次だけの状態で動作を確認する
• ブラウザのシークレットモードや別のブラウザで、キャッシュに影響されていない表示を確認する
• PCとスマホの両方でチェックして、端末固有の問題ではないかを確認する
• SWELL公式サイトの目次設定ページやフォーラムで、似た症状の事例を探してみる

それでも原因が分からない場合は、テーマのサポートや、WordPressに詳しい人に相談するのも大いにアリです。目次が表示されない状態で無理にカスタマイズを重ねると、他の部分まで崩れてしまうことがあるので、「ここまでやってダメなら相談する」とラインを決めておくと気持ちもラクになります。

SWELL 目次とSEO・ユーザビリティの関係

目次があることで得られるSEO上のメリット

目次を付けたからといって、それだけで検索順位が劇的に上がるわけではありません。ただ、間接的な効果は十分期待できます。

検索エンジンは、「ユーザーがそのページで満足したかどうか」をさまざまなデータから判断しています。SWELLの目次は、その満足度を高めるための「導線づくり」に役立つ、と考えておくと分かりやすいです。

読者行動から考える目次の役割

読者が実際にどう動いているかを想像すると、SWELLの目次の役割がよりクリアになります。

• 検索から記事を開いたら、まずざっとスクロールしてボリュームを確認する
• 目次を見て、自分に関係がありそうな見出しを探す
• 気になる見出しをタップして、その部分を中心に読み込む

この流れを前提にすると、次のような工夫が効果的です。

• 見出しには、読者の悩みや検索キーワードをそのまま入れてあげる
• 似たような表現の見出しを連発せず、「役割」が分かるように書き分ける
• 1つの見出しに情報を詰め込みすぎず、分けたほうが読みやすいときはh3を増やす

私も、過去の記事を見直したときに、「どの見出しも似た言い回しで、目次を見るだけでは違いが分からない」という状態になっていたことがあります。そこを修正してからは、ユーザーが目次を頼りにしながら記事を読んでくれている感覚が強くなりました。

アフィリエイト記事でのSWELL 目次の活かし方

アフィリエイト記事では、「どのタイミングで商品やサービスを紹介するか」を決めることがとても大切です。SWELLの目次をうまく使うと、その動線設計がだいぶやりやすくなります。

たとえば、次のような構成を考えてみます。

• h2：まず結論とおすすめ商品を紹介
• h2：SWELLの目次機能や関連機能の詳しい解説
• h2：メリット・デメリットや他商品との比較
• h2：よくある質問とその回答

このとき、目次には「結論」「メリット」「デメリット」「Q&A」などの見出しが並びます。読者は、自分が知りたい部分をすぐに選んで読めるので、「とりあえず結論だけ知りたい人」「じっくり比較したい人」どちらにも対応しやすくなります。

私もレビュー記事を書くときは、目次より上に「この商品はこういう人におすすめです」という結論パートを置き、そのあとでSWELLの目次から詳細説明へ飛べるようにしています。こうすると、忙しい読者にも、じっくり読みたい読者にも、ストレスなく読んでもらいやすくなります。

よくある質問：SWELL 目次の疑問を解決

Q1. SWELLの目次機能を使うとき、目次プラグインは本当に必要ありませんか？

A1. 基本的には、SWELLの目次機能だけで十分です。標準機能で、自動生成・デザイン変更・見出し階層の調整・表示条件の設定までひと通り行えます。目次プラグインを追加すると機能がかぶって不具合の原因にもなりやすいので、どうしてもプラグインならではの見た目を使いたい場合だけ、テスト環境などで慎重に検証してから導入するのがおすすめです。

Q2. SWELLの目次が記事の途中や変な位置に出てしまいます。どうしたらいいですか？

A2. SWELLの目次は、基本的に「記事中で最初に出てくるh2見出しの直前」に自動で挿入されます。ショートコードやカスタムコードで目次の位置を変えている場合や、独自カスタマイズが入っているテーマ子テーマを使っている場合は、その設定が影響していることもあります。まずはカスタマイズを外した状態で、デフォルトの位置で正しく動くか確認してみてください。

Q3. SWELLの目次に表示される見出しが長すぎて、スマホで読みづらいです。短くしたほうがいいでしょうか？

A3. SWELLの目次には、見出しのテキストがそのまま表示されます。見出しが長すぎると、スマホでは目次が縦に伸びてしまい、全体が把握しづらくなります。私の基準としては、「検索されそうなキーワードは入れつつ、2行以内に収まるくらい」に調整するのがおすすめです。足りない説明は本文側で補うようにすると、目次もスッキリ見えるようになります。

まとめ：SWELLの目次を使いこなして読者に優しい記事に

この記事のポイントを振り返ります

今日からできる最初の一歩としては、まずあなたのブログの中で、よく読まれている記事を1つだけ選んでみてください。そして、その記事の見出し構成を見直しながら、SWELLの目次設定を整えてみましょう。

そのうえで、自分のスマホから記事を開いて、「目次は読みやすいか」「読みたい情報にすぐ飛べるか」を自分の目でチェックしてみてください。ほんの少し手を加えるだけでも、読者の読みやすさは確実に変わってきます。

SWELLの目次機能を味方につけて、読者にも検索エンジンにもやさしい記事を、コツコツ増やしていきましょう。私も、これから書く記事では、毎回「目次がちゃんと仕事をしているか」を意識しながら、いっしょにアップデートしていきたいと思います。