
このようなお悩みにお答えします。
✔本記事の内容
- AFFINGER6で目次を作る3つのパターン紹介
- AFFINGER6で目次を作る手順
AFFINGER6で目次を作る方法は3つあるのですが、ほとんどの人がそれを知らない。目次は読者のためにも付けた方がいいので、作り方は知っておくべきです。
ということで今回は、AFFINGER6で目次を作る方法を詳しく解説します。
本記事を読めば、何の問題もなく目次を作ることができますよ。
目次
AFFINGER6で目次を作る方法は3パターンある
- 【TOC+】で目次を作る
- HTMLタグで目次を作る
- 有料プラグインで目次を作る
導入でも申し上げた通り、AFFINGER6で目次を作る方法は3パターンあります。
それぞれ解説しますね。
1.【TOC+】で目次を作る方法
メリット | デメリット |
無料で作成できる | 自由度が低い |
アフィンガー推奨のプラグイン | プラグインを導入する必要がある |
こちらは最も簡単に目次を作る方法でして、無料プラグイン【TOC+】を使います。簡単な設定で目次を表示できますが、自由度が低い。また、プラグインの導入が必要なので、表示速度低下が懸念されます。
とは言え、それほど気にするレベルのデメリットではないですし、非常に簡単に使えるので導入をおすすめします。

【TOC+】で目次を作りたい人は、こちらのアフィンガー6に【TOC+】を導入して目次を作る方法をどうぞ。
2.HTMLタグで目次を作る方法
メリット | デメリット |
自由度が高い | タグ編集が面倒 |
プラグインが必要ない | 記事ごとに作る必要がある |
― | 操作を間違えると目次として機能しない |
2つ目は、記事編集画面の「目次(カスタム)」から目次を作成する方法。自由度が高く、プラグインの導入が必要ないので、表示速度向上につながります。
とは言え、タグの編集が面倒なのでブログ初心者向きではないですね。

HTMLタグで目次を作りたい人は、こちらのアフィンガー6内のHTMLタグで目次を作る方法をどうぞ。
3.有料プラグインで目次を作る方法
メリット | デメリット |
記事ごとに目次にする見出しタグを変更できる | 少し高い(5,980円) |
クリックされた目次がわかる | ― |
目次にしたくない見出しを除外できる | ― |
目次のテキストを変更できる | ― |
目次にしたい見出し以外のテキストを目次に追加できる | ― |
目次にしたい範囲を指定できる | ― |
3つ目はAFFINGER6専用のプラグイン「すごい目次」を使う方法。
有料のプラグインなので費用(5,980円)が掛かりますが、できることは凄まじいです。目次に拘りたいなら有料プラグイン「すごい目次」を使いましょう。

有料プラグインで目次を作りたい人は、こちらの有料プラグインで目次を作る方法をどうぞ。
1.AFFINGER6に【TOC+】を導入して目次を作る方法
- 手順①:【TOC+】を導入
- 手順②:【TOC+】の初期設定
- 手順③:【TOC+】のカスタマイズ
無料プラグイン【TOC+】を導入して目次を作る方法は、上記の3ステップでOKです。1つずつ解説しますね。
手順①:【TOC+】を導入
管理画面から「プラグイン」→「新規追加」をクリックし、検索窓で「Table of Contents Plus」と入力してください。
すると、お目当ての【TOC+】がありますので、「インストール」→「有効化」をクリック。
これで【TOC+】の導入は完了です。
手順②:【TOC+】の初期設定
WordPress管理画面から「設定」→「TOC+」の順にクリック。
すると、下記画像のように【TOC+】の設定画面に移行します。
とりあえずは赤枠部分を設定してもらえばOK。
設定項目 | 設定方法 |
表示条件 | 『2』以上見出しがあるとき |
以下のコンテンツタイプを自動挿入 | post / page |
目次の上にタイトルを表示 | 任意の目次タイトル(例:Contents) |
見出しの表示/非表示切り替え文字 | 任意の表示 / 非表示ボタンの文字(例:Open / Close) |
目次の表示(初期値) | 最初に目次を表示するか表示しないか |
階層表示 | H2タグ→H3タグを階層表示にする |
設定が終われば最後に「保存」をクリックすることを忘れずに。
これで目次が自動的に記事に挿入されるようになりました。

手順③:【TOC+】のカスタマイズ
目次のカスタマイズについては、「外観」→「カスタマイズ」をクリック。
すると、カスタマイズ画面に移行します。
そこから、「オプションカラー」→「目次プラグイン(すごい目次)」をクリックすると、目次のカスタマイズ画面が表示されます。
ここはお好きにカスタマイズしてください。

以上、【TOC+】で目次を作る方法でした
この方法についてさらに詳しく知りたい人は、こちらの【目次作成】WordPress目次プラグインTable of Contents Plusの使い方をどうぞ。
細かい設定についても解説しているので、目次に拘るなら読んで損はないですよ。
2.AFFINGER6内のHTMLタグで目次を作る方法
- 手順①:タグから目次(カスタム)を追加
- 手順②:記事本文のHタグと<li>タグを紐付ける
- 手順③:目次のカスタマイズ
HTMLタグを使って目次を作る方法は上記の通り。
1つずつ解説しますね。
手順①:タグから目次(カスタム)を追加
記事編集画面から「タグ」→「その他パーツ」→「目次(カスタム)」をクリックすると、下記のようにタグが挿入されます。
目次は3つまでしか表示されないので、足りなければ追加しましょう。
※<li>タグはビジュアルエディタで追加できないので、テキストエディタに変更して下さい。
今回は例として、新たに3つ追加してみますね。コードは次の通り。
赤枠部分が新たに追加した部分です。
これで目次を増やすことができたのですが、このままでは使えません。

手順②:記事本文のHタグと<li>タグを紐付ける
紐づける作業とは、目次をクリックすることで指定したHタグにジャンプするように設定すること。イメージとしては下記の通り。
- 目次:<a href="#id名">クリック</a>
- 見出し:<h2 id="id名">見出し</h2>
id名を一致さればOKです。
編集が完了すれば、正しく機能しているかプレビュー画面で確認してみてください。
手順③:目次のカスタマイズ
カスタマイズについては、WordPress管理画面より、「外観」→「カスタマイズ」→「オプションカラー」→「目次プラグイン(すごい目次)」をクリック。
すると、カスタマイズ画面が表示されます。
ここでお好きにカスタマイズしてください。
以上、HTMLタグで目次を作る方法でした。
こちらは設定が少しややこしいので、目次に拘るブログ中級者以上の人におすすめですよ。
3.AFFINGER6の有料プラグインで目次を作る方法
- 手順①:すごい目次の購入
- 手順②:すごい目次の有効化
- 手順③:各種設定
有料プラグイン「すごい目次」で目次を作成する方法は上記の通り。
1つずつ解説しますね。
手順①:すごい目次の購入
まずは、こちらの「すごい目次」から公式ページへアクセスしてください。
すると、下記のような画面に移行するので、「ショッピングカートに入れる」をクリック。
クリックすると注文画面に移行しますので、支払方法の選択をして購入してください。
手順②:すごい目次の有効化
購入が完了しましたら、管理画面から「プラグイン」→「新規追加」→「プラグインのアップロード」→「ファイルの選択」をクリック。
そこで先ほど購入した「すごい目次」のZipファイルを選択していただき、「ダウンロード」→「有効化」を実行してください。
手順③:各種設定
有効化が完了しましたら、各種設定を行うのですが、これは公式ページで詳しく解説しているので、そちらを参考にしてください。
以上、有料プラグインで目次を作る方法でした。有料というだけあって、できることは非常に多いので、目次に拘りたいなら有料の「すごい目次」を使ってみましょう。
まとめ:AFFINGER6で目次を作る方法は3パターンある
本記事ではAFFINGER6で目次を作る方法をすべて解説しました。
方法は次の3パターン。
- 【TOC+】で目次を作る方法
- HTMLタグで目次を作る方法
- 有料プラグインで目次を作る方法
この中で最もおすすめは、非常に簡単に導入から設定・カスタマイズができる【TOC+】で目次を作る方法です。
利用者も多く、安全性・信頼性も抜群ですよ。

また、当サイトではこのようにアフィンガー5に関する情報を幅広く発信しています。
他にも機能の使い方やカスタマイズ方法で悩まれることがあれば当サイトへお越しください。

参考までに、アフィンガー関連の記事を下記にまとめておきます。
気になるものがあればどうぞご覧ください。
-
【アフィンガー6 JET】評価、導入・カスタマイズ方法【すべて語る】
続きを見る
-
【最短5分】AFFINGER6(アフィンガー)の初期設定を徹底解説
続きを見る
-
AFFINGER6(アフィンガー)がSEOに強いと言われる5つの理由
続きを見る
-
【初心者向け】AFFINGER6の使い方【絶対に使う機能6選】
続きを見る
-
[コピーOK]AFFINGER6でトップページをカスタマイズする手順
続きを見る
-
【AFFINGER6】吹き出し機能の設定から使い方まで徹底解説
続きを見る
-
AFFINGER6(アフィンガー)のブログカードの作り方。2秒で作れます。
続きを見る
-
AFFINGER6のランキング作成手順を徹底解説
続きを見る
-
【超おしゃれ】AFFINGER6のスライドショーの設定方法と使い方
続きを見る
気になるものがあれば読んでみてください。
それでは今日はこのへんで。グッバーイ