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

【TOC+】で目次を作りたい人は、こちらのアフィンガー5に【TOC+】を導入して目次を作る方法をどうぞ。

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

HTMLタグで目次を作りたい人は、こちらのアフィンガー5内のHTMLタグで目次を作る方法をどうぞ。

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

有料プラグインで目次を作りたい人は、こちらの有料プラグインで目次を作る方法をどうぞ。

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

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

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

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

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

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