ブログを始めたばかりのころ、私も「あれ、目次ってどうやって出すの？」と2時間以上悩んだ経験があります（笑）。
AFFINGER6は非常に多機能なWordPressテーマですが、目次だけは自分でプラグインを入れないと表示されない仕様になっています。
この記事では、実際にAFFINGER6を使っているアラフィフブロガーの私が、目次を設定する方法3つを画像つきで丁寧に解説します！
✅ この記事でわかること
- AFFINGER6に目次が必要な理由（SEOにも効く！）
- 目次を設定する3つの方法と、それぞれのメリット・デメリット
- 【最推奨】すごいもくじLITEの設定手順（画像つき）
- 【無料】Easy Table of Contentsの設定手順（画像つき）
- 目次のカスタマイズ方法（色・余白・デザイン変更）
- 目次が表示されないときのトラブル対処法
- よくある質問（FAQ）
１．そもそもAFFINGER6に目次が必要な理由
「目次って、そんなに重要なの？」と思う方もいるかもしれません。
でも、目次はブログ運営において読者体験とSEOの両方に直結する重要な要素なんです。
読者にとって目次がある記事は「読みやすい」
読者がGoogleで検索して記事を開いたとき、最初に見るのは記事の冒頭です。目次があると、
- 「この記事に自分が求めている情報が書いてある」とすぐわかる
- 興味のある見出しに一瞬でジャンプできる
- 記事全体の構成が一目で把握できる
という3つのメリットがあり、読者の離脱率を下げる効果があります。
SEOにも目次は効果的！
目次を設置するとGoogleの検索結果に「スニペット（記事の見出しリスト）」が表示されることがあります。
（※スニペットとは、ひとことで言うと、**Googleの検索結果に表示される「記事の説明・見出しリスト」**のことです。）
これが表示されると、検索結果でのクリック率（CTR）が大幅に上がります。
同じ順位でもクリック率が違えば、長期的に検索順位も上がりやすくなるんです！
２．AFFINGER6で目次を作る3つの方法を比較
AFFINGER6で目次を設置する方法は、主に以下の3つです。
| 方法 | 難易度 | 費用 | おすすめ度 | 特徴 |
|---|---|---|---|---|
| ①すごいもくじLITE | ★☆☆（簡単） | 無料（AFFINGER6購入特典） | ★★★★★ | AFFINGER6公式プラグイン。相性抜群！ |
| ②Easy Table of Contents | ★☆☆（簡単） | 無料 | ★★★★☆ | AFFINGER6を持っていない人でも使える汎用プラグイン |
| ③HTML手動設置 | ★★★（難しい） | 無料 | ★★☆☆☆ | プラグイン不要。ただし手間がかかる |
⚠️ 重要：TOC+（Table of Contents Plus）は2024年に廃止されました！
以前は「TOC+（Table of Contents Plus）」というプラグインがよく使われていましたが、2024年に公式リポジトリから廃止宣言がされました。今後は「すごいもくじLITE」または「Easy Table of Contents」を使いましょう！
３．【最推奨】すごいもくじLITEの設定手順
すごいもくじLITEはAFFINGER6を購入した方なら無料で使える公式プラグインです。
AFFINGER6に最適化されているので、動作の安定性も抜群です！
すごいもくじLITE・すごいもくじPROの違い
| 比較項目 | すごいもくじLITE（無料） | すごいもくじPRO（有料） |
|---|---|---|
| 費用 | 無料（AFFINGER6の特典） | 有料（別途購入が必要） |
| 目次の自動挿入 | ○ | ○ |
| デザインカスタマイズ | 基本的なもの | より細かい設定が可能 |
| クリック数の計測 | × | ○ |
| 初心者向け | ◎ | ○ |
初心者の方はまずLITE版で十分です！LITE版でも目次の基本機能はすべて揃っています。
STEP1：すごいもくじLITEをダウンロードする
まず、AFFINGER6の購入者限定ページからプラグインをダウンロードします。
①「ACTION（AFFINGER6版）ログインページ」にアクセスします。
②ログイン後、「購入ユーザー限定ページ一覧」をクリック。
③「AFFINGER6」をクリック（商品ページ→WordPressテーマ）。
※少し下にスクロールしていくと左側に出てきますよ。
④ACTION（AFFINGER6版）購入ユーザー限定ページに飛びます。
少し下にスクロールしてください。
ユーザー特典の中にある「すごいもくじLITE」をクリックしてダウンロードします。
ダウンロードしたファイルは「.zip形式」のままでOKです。解凍しないように注意してください！
STEP2：WordPressにプラグインをインストールする
①WordPress管理画面から「プラグイン」→「新規追加」をクリックします。
②「プラグインのアップロード」をクリックします。
（※プラグインのアップロードボタンの画像を入れてください）
③「ファイルを選択」をクリックして、先ほどダウンロードしたすごいもくじLITEの.zipファイルを選択します。
④「今すぐインストール」をクリックし、その後「プラグインを有効化」をクリックすれば完了です！
STEP3：すごいもくじLITEの基本設定をする
プラグインを有効化すると、WordPress管理画面に「目次」というメニューが追加されます。
①「すごいもくじ」→「設定」をクリックします。
設定画面が開いたら、以下のとおりに設定してみてください。
| 設定項目 | おすすめの設定 | 理由 |
|---|---|---|
| 自動挿入 | 「post（投稿）」にチェック | すべての記事に自動で目次が入る |
| 表示位置 | 「最初の見出しの前」 | 記事冒頭に目次が来て読者が全体像を把握しやすい |
| 表示条件 | 「2」以上の見出しがある時 | 見出しが1つしかない短い記事に目次が出なくなる |
| 見出しテキスト | 「目次」 | シンプルでわかりやすい |
| 最初は目次を非表示 | チェックを外す（開いた状態） | 記事を開いてすぐ目次が見える状態がおすすめ |
| 階層表示 | チェックを入れる | H2・H3の見出しレベルが見やすくなる |
②設定が終わったら「変更を保存」をクリックして完了です！
STEP4：すごいもくじLITEのデザインをカスタマイズする（任意）
インストール直後でも十分きれいな目次が表示されますが、ブログのカラーに合わせてデザインを変更することもできます。
①AFFINGER管理画面から「外観」→「カスタマイズ」→「オプション（その他）」
→「目次プラグイン（すごいもくじ）」をクリックします。
主に変更できるのは以下の2項目です。
- 背景色：目次ボックスの背景色を変更できます
- ボーダー：目次ボックスの枠線の色・太さを変更できます
自分のブログのメインカラーに合わせて変更してみましょう！
４．【無料】Easy Table of Contentsの設定手順
「すごいもくじLITEのダウンロード方法がわからない」「AFFINGER6はあるけど購入者ページにログインできない」という方は、Easy Table of Contentsを使いましょう。
WordPressのプラグインリポジトリから直接インストールできるので、AFFINGER6のログイン情報がなくても大丈夫です！
⚠️ 注意：Table of Contents Plus（TOC+）は廃止済み
古い記事ではTOC+（Table of Contents Plus）が紹介されていることがありますが、2024年に開発終了が宣言されています。今後は「Easy Table of Contents」を使いましょう！
STEP1：Easy Table of Contentsをインストールする
①WordPress管理画面から「プラグイン」→「新規追加」をクリックします。
②検索欄に「Easy Table of Contents」と入力します。
③「今すぐインストール」→「有効化」をクリックすれば完了です！
STEP2：Easy Table of Contentsの基本設定をする
①WordPress管理画面から「設定」→「Table of Contents」をクリックします。
（※設定画面の画像を入れる！）
以下のとおりに設定するのがおすすめです。
| 設定項目 | おすすめの設定 | 理由 |
|---|---|---|
| 自動挿入 | 「post（投稿）」にチェック | すべての投稿に自動で目次が入る |
| 表示条件 | 「2」以上の見出しがある時 | 見出しが少ない記事には目次が表示されなくなる |
| 見出しテキスト | 「目次」 | シンプルでわかりやすい |
| 初期状態で目次を表示 | 展開した状態（表示する） | 記事を開いてすぐ目次が見える |
| 階層表示 | チェックを入れる | H2・H3の見出し階層が見やすくなる |
②設定が終わったら「変更を保存」をクリックして完了です！
５．【上級者向け】HTMLを使って目次を手動設置する方法
「プラグインを増やしたくない」「ブログの表示速度にこだわりたい」という方向けに、HTMLを使った手動設置の方法も紹介します。
ただし、この方法は記事ごとに手動で目次を作る必要があり、難易度が高めです。
初心者の方は①か②の方法をおすすめします。
手動目次の設定手順
①WordPress記事作成画面で「クラシック版の段落」ブロックを追加します。
②「タグ」→「その他のパーツ」→「目次（カスタム）」をクリックします。
③目次用のショートコードが挿入されます。この中に見出しのリンクを手動で入力していきます。
手動設置は記事数が多くなると管理が大変になります。よほどの理由がない限り、①すごいもくじLITEの使用をおすすめします！
６．目次の余白・デザインをCSSでカスタマイズする方法
プラグインで目次を設置すると、デフォルトでは目次の上下の余白が狭くて少し窮屈に見えることがあります。
以下のCSSコードを「外観」→「カスタマイズ」→「追加CSS」に貼り付けるだけで、見やすい目次に調整できます！
目次の上下余白を広げるCSSコード
/* 目次の上下余白を調整 */
.ez-toc-container {
margin-top: 30px !important;
margin-bottom: 30px !important;
}
７．目次が表示されないときのトラブル対処法
「プラグインを入れたのに目次が出てこない…」というトラブルは、初心者の方によく起こります。以下のチェックリストを順番に確認してみてください！
チェックリスト
✅ 目次が表示されないときの確認ポイント
- プラグインが「有効化」されているか確認する
「プラグイン」一覧で、すごいもくじLITE（またはEasy Table of Contents）が「有効」になっているか確認しましょう。 - 記事にH2またはH3の見出しが2つ以上あるか確認する
設定で「見出しが2つ以上のとき表示」にしている場合、見出しが1つだと目次が表示されません。 - 設定の「自動挿入」にpostのチェックが入っているか確認する
自動挿入をオフにしていると、記事に目次が自動で入りません。 - キャッシュを削除してみる
キャッシュプラグインを使っている場合、キャッシュが古いままで目次が反映されていないことがあります。キャッシュをクリアしてから再度確認してみましょう。 - 他のプラグインと競合していないか確認する
複数の目次プラグインを同時に有効化していると競合することがあります。1つだけ有効にしてください。
８．よくある質問（FAQ）
Q1. すごいもくじLITEとEasy Table of Contents、どちらがおすすめですか？
A. AFFINGER6ユーザーならすごいもくじLITEが断然おすすめです。
すごいもくじLITEはAFFINGER6専用設計なので、動作の安定性が高く設定も簡単です。AFFINGER6を購入した特典として無料で使えるので、使わない手はありません！
一方、Easy Table of Contentsは汎用プラグインなので、もしAFFINGER6から他のテーマに移行した場合もそのまま使い続けられるというメリットがあります。
Q2. 目次はSEOに効果がありますか？
A. はい、間接的にSEO効果があります。
目次を設置することで、Googleの検索結果に記事の見出しが「ジャンプリンク」として表示されることがあります。これにより検索結果での表示面積が大きくなり、クリック率の向上が期待できます。
また、読者が目的の情報にすぐたどり着けるため、ページ内の滞在時間が長くなり、SEO評価にもプラスに働くことがあります。
Q3. 目次は記事のどこに表示されるのがベストですか？
A. 最初の見出し（H2）の前がベストです。
記事を開いたときに冒頭の導入文の後、最初の見出しの前に目次があるのが最も自然で読みやすい配置です。設定画面で「表示位置：最初の見出しの前」に設定しておきましょう。
Q4. 固定ページにも目次を表示できますか？
A. はい、設定で「page（固定ページ）」にもチェックを入れれば表示されます。
ただし、固定ページには目次が不要なケース（お問い合わせページ・プロフィールページなど）もあるので、必要に応じて判断してください。
Q5. 特定の記事だけ目次を非表示にできますか？
A. はい、記事ごとに目次の表示・非表示を切り替えられます。
すごいもくじLITEもEasy Table of Contentsも、記事の編集画面で個別に目次の表示を「オフ」にすることができます。短い記事や目次が不要な記事に対して使ってみてください。
Q6. 目次の見た目（デザイン）を変更できますか？
A. はい、変更できます。
すごいもくじLITEはAFFINGER管理画面から背景色・ボーダーの色などを変更できます。
Easy Table of Contentsも設定画面からテーマカラーを変更可能です。
さらに追加CSSを使えば、より細かいカスタマイズもできますよ。
まとめ
今回は、AFFINGER6で目次を設定する方法を3つ解説しました！
ポイントのおさらい
- AFFINGER6はデフォルトで目次が表示されないので、自分で設定が必要！
- 目次はSEOにも効果的（検索結果のクリック率アップ）
- AFFINGER6ユーザーには①すごいもくじLITEが断然おすすめ
- 購入者ページからダウンロードして、WordPressにアップロードするだけでOK！
- 古い記事でよく紹介されていた「TOC+」は2024年に廃止されているので注意
- 目次が表示されないときは「有効化されているか」「見出しの数」を確認しよう
目次を設定するのは難しそうに見えて、実際にやってみると10分もかからず設定完了できます。
この記事を読んで「なんだ、意外と簡単じゃん！」と思ってもらえたら嬉しいです。
AFFINGER6のカスタマイズはまだまだ奥が深いので、他の設定方法も少しずつ記事にしていきますね！気になることがあればコメントもお気軽にどうぞ！
▼次に読みたいAFFINGER6関連記事
