アッフィーこんな悩みを解決できる記事をご用意しました！
私はブログを始めて3年。
これまでに100本以上の渾身の記事を書き上げてきました。
その結果、累計で6桁の収益を達成することができました。
SWELLは他のWordPressテーマにはない高機能な目次機能を標準搭載しています。
標準搭載なのでプラグインも必要ありません。
この記事では、３年間SWELLを使ってきた経験をもとに、以下の項目を画像付きで詳しく解説します。
ぜひ最後まで読んで実践し、読者にとって使いやすく、SEO効果も期待できる目次を作成しましょう。
それでは、さっそく始めましょう！
まだSWELLを購入していないなら、以下の記事を参考にSWELLを導入しましょう。
SWELLの目次機能とは
SWELLには高機能な目次機能が標準搭載されており、プラグインを導入する必要がありません。
他のWordPressテーマと比較しても圧倒的に優秀な機能を持っています。
高機能な目次（プラグイン不要）
SWELLの目次機能は、記事内の見出しを自動で抽出して目次を生成してくれます。
記事の冒頭に目次が表示されるので、読者は記事全体の構成を一目で把握できます。
デザインは4種類から選択でき、11項目以上の詳細なカスタマイズにも対応しています。
プラグインを追加することなく、これほど高機能な目次を利用できるのがSWELLの大きな魅力です。
他のWordPressテーマとの違い
多くのWordPressテーマでは目次機能が搭載されておらず、別途プラグインの導入が必要になります。
| テーマ名 | 目次機能評価 | 目次機能の搭載の有無 |
|---|---|---|
| SWELL | ◎ | 標準搭載（デザイン4種類） |
| THE THOR | 〇 | 標準搭載（デザイン1種類） |
| SANGO | △ | 「目次ブロック」搭載 （ただし、利用制限あり） |
| JIN | × | 別途プラグインが必要 |
| AFFINGER6/ACTION | × | 別途プラグインが必要 |
| STORK19 | × | 別途プラグインが必要 |
目次機能があるTHE THORでも、デザインは1種類のみ。
一方、SWELLでは4種類のデザインパターンから選択でき、細かいカスタマイズも可能です。
SWELLは、目次機能では一歩先を行くデザインテーマです。
目次がSEOに与える効果
記事に目次を設置することは、SEO対策として非常に重要です。
目次があれば、読者は記事を読む前に全体の構成を把握でき、知りたい情報へすぐにアクセスできます。
これにより、サイトからの離脱を防いで滞在時間を延ばす効果が期待できます。
さらに、このような読者の利便性の高さはGoogleにも評価され、検索順位の向上につながる可能性があります。
SWELLで目次を作る方法
SWELLで目次を作る手順は次のとおりです。
順番に見ていきましょう。
①目次の表示設定
まずは、目次を表示する設定を行いましょう。
WordPress管理画面から「外観」⇒「カスタマイズ」とクリックしてください。
続いて、「投稿・固定ページ」⇒「目次」の順にクリックしましょう。
「投稿ページに目次を表示」にチェックを入れると、すべての投稿記事に目次が表示されるようになります。
固定ページには基本的に目次は不要なので、チェックを外したままで問題ありません。
ちなみに固定ページとは、「サイト全体で共通して使いたい情報」を載せるページで、次のようなページが該当します。
- お問い合わせページ
- プライバシーポリシー
- 免責事項
- プロフィール
- サイトマップ
②見出しの作成
目次を表示するためには、記事内に見出しを作成する必要があります。
編集画面で「+」ボタンをクリックし、「見出し」ブロックを選択してください。
ブロックツールバーの「H2」をクリックして見出しの階層を表示させ、階層（H2〜Ｈ６）を決めましょう。
見出しの中にテキストを入力してください。
見出しは最低2個以上作成しましょう。
というのも、SWELLでは見出しが2個未満の場合、目次が表示されない設定になっているからです。
なお、SWELLの見出しについては以下の記事で詳しく解説していますので参考にしてください。
③目次のカスタマイズ
SWELLでは目次のデザインや表示方法をカスタマイズできます。
カスタマイズできる項目は以下のように豊富です。
- 目次のタイトル
- 目次のデザイン
- 目次のリストタグ
- 疑似要素（ドット・数字部分）のカラー
- どの階層の見出しまで抽出するか
- 見出し何個以上で表示するか
- 目次の省略表示
- 項目が何個を超えると省略するか
- 開くボタンのテキスト
- 閉じるボタンのテキスト
- 目次広告の表示設定
アッフィーカスタマイズ内容の詳細はこの後「SWELL目次の11個のカスタマイズ」で説明しますね。
④個別記事での表示・非表示切り替え
目次の表示設定をしたものの、特定の記事だけ目次を非表示にしたい場合がありますよね。
そんな時は、投稿編集画面の右サイドバーの「投稿」タブにある「目次」の項目を「非表示」にしましょう。
逆に、固定ページで目次を表示したい場合は、「固定ページ」タブにある「目次」の項目を「表示」にしましょう。
SWELL目次の11個のカスタマイズ
SWELLの目次は以下の11項目のカスタマイズが可能です。
各設定項目を順番に解説していきますね。
①目次のタイトル
目次のタイトルは自由に変更できます。
デフォルトの「目次」から、たとえば
- この記事でわかること
- 読みたい箇所へジャンプ
など、読者の立場に立った表現へと変更しましょう。
アッフィー読者目線の表現にするだけで、クリック率の向上が期待できますよ！
②目次のデザイン
目次デザインは次の4つのパターンから選択できます。
デフォルトは「ストライプ背景」。
アッフィー当サイトは「ボックス」を選択しています！
③目次のリストタグ
目次の先頭に表示されるデザインを選択できます。
- 「olタグ（数字）」：1、2、3と番号が表示される
- 「ulタグ（ドット）」：「・」記号が表示される
タブをクリックすると、それぞれのデザインが確認できます
アッフィー数字は全体を一瞬で把握できるので、olタグ（数字）がおすすめです
④疑似要素（ドット・数字部分）のカラー
目次の番号やドット部分の色を3つのパターンから選択できます。
- 「テキストカラー」は記事本文と同じ色
- 「メインカラー」はサイトのテーマカラー
- 「カスタムカラー」では好きな色を自由に設定可能
アッフィーおすすめは、デフォルトの「テキストカラー」です
⑤どの階層の見出しまで抽出するか
目次に表示する見出しのレベルは、「ｈ2」から「ｈ5」まで選択できます。
アッフィーおすすめは「ｈ3」までの表示です！
目次でｈ3までを表示することで、記事全体の構成がわかりやすくなり、目次が長くなりすぎて読みにくくなることも避けられるからです。
タブをクリックすると、それぞれの目次が確認できます
⑥見出し何個以上で表示するか
表示する目次の最低見出し数を設定できます。
デフォルトは「2個以上」で、見出しが1個だけの短い記事では目次が表示されません。
アッフィーこの設定もデフォルトでOKです！
⑦目次の省略表示
見出しが多い記事で目次を省略表示する方法を選択できます。
選択できるのは以下の４パターンです。
- 省略しない
- 指定の数を超えた分を省略する
- h3以下を省略する
- 指定の数を超えた分＋h3以下を省略
タブをクリックしてデザインを確認しましょう
アッフィー当サイトは「指定の数を超えた分を省略する」で設定してます！
⑧項目が何個を超えると省略するか
省略表示を設定した場合に、表示される目次の最大数を指定します。
デフォルトは「15個」で、見出しが15個を超えると省略機能が働きます。
アッフィーこの項目もデフォルトでOKです！
⑨開くボタンのテキスト
省略された目次を開くボタンのテキストを変更できます。
デフォルトは「もっと見る」と、読者目線の表現になっているのでおすすめです。
⑩閉じるボタンのテキスト
開いた目次を再び折りたたむボタンのテキストを設定します。
デフォルトは「折りたたむ」ですが、実際に目次を閉じる読者は少ないでしょう。
それほど重要な設定ではないので、デフォルトで問題ありません。
⑪目次広告の表示設定
SWELLでは広告（Googleアドセンス）を目次の前後に表示することができます。
目次広告の位置
広告を「目次の前に設置する」のか、「目次の後に設置する」のかを選択します。
広告は「目次の前」が一番クリックされるので、「目次の前に設置する」がおすすめです。
目次がなくても広告を表示するかどうか
デフォルトでは、「投稿ページで表示する」にチェックが入っています。
固定ページには広告は必要ないので、デフォルトでOKです。
設定した内容を保存する
すべての設定が完了したら、「公開」をクリックしてサイトに反映させましょう。
その他のSWELL目次に関する設定
カスタマイザー以外でできる以下の設定も見ていきましょう、
これらを活用すれば、より読者が使いやすいサイトになりますよ。
目次をサイドバーに表示する手順
サイドバーに目次を表示すれば、読者は記事を読みながら好きな箇所にジャンプできるようになります。
WordPress管理画面から「外観」→「ウィジェット」をクリックしてください。
ウィジェット管理画面が表示されます。
利用可能なウィジェット一覧から「[SWELL]目次」を見つけます。
これを「追尾サイドバー」エリアにドラッグ&ドロップしてください。
![「[SWELL]目次」をドラッグ&ドロップ](https://affi-weblog.com/wp-content/uploads/2025/08/7c5b41a31457748199f1a72ae7217a13-1024x468.png)
ウィジェットが追加されたら「完了」をクリックします。
実際の記事ページでサイドバーに目次が表示されることを確認しておきましょう。
目次広告を設置する手順
目次の前後に広告を表示させるよう設定した場合の、目次広告の設定方法を解説します。
WordPress管理画面から「SWELL設定」→「広告コード」の順にクリックしてください。
広告設定画面が表示されます。
「目次広告」の入力欄に、GoogleアドセンスやASPから取得した広告コードを貼り付けましょう。
画面下へとスクロールし、「変更を保存」をクリックしてください。
アッフィーこれだけで目次広告の設定は完了しますよ！
目次ボタンを固定表示する手順
最後に、画面右下に目次ボタンを固定表示する手順を見ていきましょう。
WordPress管理画面から「外観」⇒「カスタマイズ」とクリックしてください。
「サイト全体設定」⇒「下部固定ボタン・メニュー」の順にクリックします。
「目次ボタンの表示設定」で「表示する（四角形）」または「表示する（円形）」を選択してください。
目次ボタンの形は、トップページボタンと合わせるのがおすすめです。
設定後は「公開」をクリックしましょう。
実際に目次ボタンをクリックすると、以下のように表示されます。
SWELL目次に関するよくある質問
SWELL目次について、読者から寄せられることの多い質問に回答します。
記事に目次は必要ですか？
目次は絶対必要です。
目次があることで、読者は記事の全体像を瞬時に把握でき、興味のある箇所に直接ジャンプできるからです。
また、Googleなどの検索エンジンからも高く評価され、SEO効果の向上につながります。
全ての記事に目次を設置することをおすすめします。
目次が表示されないのですが、原因は？
目次が表示されない主な原因は3つあります。
まず、カスタマイザーで「投稿ページに目次を表示」のチェックが外れている可能性があります。
「外観」⇒「カスタマイズ」⇒「投稿・固定ページ」⇒「目次」と進み、「投稿ページに目次を表示」にチェックがあるかどうか確認しましょう。
次に、見出しが２個以上あることを確認しましょう。
記事内の見出しが2個未満の場合は目次が表示されないからです。
最後に、個別記事の設定で「非表示」になっていないことを確認しましょう。
これらの設定を順番に確認してください。
それでも解決しない場合は、プラグインとの競合やキャッシュの影響も考えられるため、一度プラグインを無効化して確認してみましょう。
SWELL目次はショートコードでも表示できると聞きましたが…
そのとおりです。
SWELLでは[swell_toc]というショートコードを使えば、任意の場所に目次を表示できます。
[swell_toc]
ただし、一般的なブログ記事では自動表示で十分なケースがほとんどです。
アッフィーショートコードで目次が表示できることだけ覚えておきましょう。
まとめ｜SWELL目次は高機能！プラグイン不要です
今回はSWELLの目次機能について詳しく解説しました。
SWELLの目次機能の特徴は以下の通りです。
SWELLの目次機能の特徴
- プラグイン不要で高機能な目次を標準搭載
- 11項目の細かなカスタマイズに対応
- サイドバー表示や広告設置などの応用機能も充実
これだけの機能があれば、読者にとって使いやすく、SEO効果も期待できる目次を簡単に作成できます。
SWELLの目次機能を活用して、読者が使いやすいサイトを構築しましょう。
本ブログではWindowsテーマにSWELLを使用しています。
あなたも、目次機能が搭載されたSWELLにしませんか？
今回は以上です。
最後までお読みいただきありがとうございました。
