【徹底解説】アフィンガー5で目次を作る方法3選

アフィンガー5で目次を作る方法が知りたいんだけど、誰か教えてくれないかぁ？

このようなお悩みにお答えします。

✔本記事の執筆者

今回はアフィンガー5で目次を作る方法を解説するのですが、実はその方法は3つあります。

本記事ではその3つの方法すべてを詳しく解説しますね。

※本記事はすでにAFFINGER5を購入している人向けの記事です。もし、まだ購入されていないのであれば、下記の記事をどうぞ。

アフィンガー5で目次を作る方法は3パターンある

導入でも申し上げた通り、アフィンガー5で目次を作る方法は3パターンあります。

それぞれ解説しますね。

１．【TOC＋】で目次を作る方法

こちらは最も簡単に目次を作る方法でして、無料プラグイン【TOC＋】を使います。

簡単な設定で目次を表示できますが、自由度が低い。また、プラグインの導入が必要なので、表示速度低下が懸念されます。

とは言え、それほど気にするレベルのデメリットではないですし、非常に簡単に使えるので導入をおすすめしますよ。

kazuki

当サイトの目次は【TOC＋】で作成しているよ！

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

kazuki

ワンクリックで詳細ページへ飛びます。

２．HTMLタグで目次を作る方法

2つ目は、記事編集画面の「目次（カスタム）」から目次を作成する方法。

自由度が高く、さらにはプラグインの導入が必要ないので、表示速度向上につながります。

とは言え、タグの編集が面倒なのでブログ初心者向きではないですね。

kazuki

ブログ中級者以上におすすめです！

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

kazuki

ワンクリックで詳細ページへ飛びます。

３．有料プラグインで目次を作る方法

3つ目はアフィンガー5専用のプラグイン「すごい目次」を使う方法。

有料のプラグインなので費用（5,980円）が掛かりますが、できることは凄まじいです。

目次に拘りたいなら有料プラグイン「すごい目次」を使いましょう。

kazuki

僕は拘らないので購入していませんが（笑）

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

kazuki

ワンクリックで詳細ページへ飛びます。

１．アフィンガー5に【TOC＋】を導入して目次を作る方法

無料プラグイン【TOC＋】を導入して目次を作る方法は、下記の3ステップでOKです。

1つずつ解説しますね。

手順①：【TOC＋】を導入

まずはWordPress管理画面から「プラグイン」→「新規追加」をクリックし、検索窓で「Table of Contents Plus」と入力してください。

すると、お目当ての【TOC＋】がありますので、「インストール」→「有効化」をクリック。

これで【TOC＋】の導入は完了です。

手順②：【TOC＋】の初期設定

導入が完了しましたら、次は初期設定。

WordPress管理画面から「設定」→「TOC＋」の順にクリック。

すると、下記画像のように【TOC＋】の設定画面に移行します。

とりあえずは赤枠部分を設定してもらえばOKです。

設定が終われば最後に「保存」をクリックすることを忘れずに。

これで目次が自動的に記事に挿入されるようになりました。

kazuki

一度自分の記事を確認してみてください！

手順③：【TOC＋】のカスタマイズ

目次のカスタマイズについては、「外観」→「カスタマイズ」をクリック。

すると、カスタマイズ画面に移行します。

そこから、「オプションカラー」→「目次プラグイン（すごい目次）」をクリック。

すると、目次のカスタマイズ画面が表示されます。

ここはお好きにカスタマイズしてください。

kazuki

ちなみに当サイトの目次はデフォルトのままです！

以上、【TOC＋】を導入して目次を作る方法でした

この方法についてさらに詳しく知りたい人は、こちらの【TOC+】「Table of Contents Plus」の設定方法と使い方をどうぞ。

細かい設定についても解説しているので、目次に拘るなら読んで損はないですよ。

２．アフィンガー5内のHTMLタグで目次を作る方法

次に、HTMLタグを使って目次を作る方法を解説します。

手順は次の通り。

1つずつ解説しますね。

手順①：タグから目次（カスタム）を追加

記事編集画面から「タグ」→「その他パーツ」→「目次（カスタム）」をクリックすると、下記のようにタグが挿入されます。

目次は3つまでしか表示されないので、足りなければ追加しましょう。

※<li>タグはビジュアルエディタでは追加できないので、テキストエディタに変更してください。

今回は例として、新たに3つ追加してみますね。コードは次の通り。

赤枠部分が新たに追加した部分です。

これで目次を増やすことができたのですが、このままでは使えません。

kazuki

記事本文のHタグと、<li>タグを紐付ける作業が必要です!

手順②：記事本文のHタグと<li>タグを紐付ける

紐づける作業とは、目次をクリックすることで指定したHタグにジャンプするように設定することです。

イメージとしてはこんな感じ。

id名を一致さればOKです。

編集が完了すれば、正しく機能しているかプレビュー画面で確認してみてください。

手順③：目次のカスタマイズ

カスタマイズについては、WordPress管理画面より、「外観」→「カスタマイズ」→「オプションカラー」→「目次プラグイン（すごい目次）」をクリック。

すると、目次のカスタマイズ画面が表示されます。

ここでお好きにカスタマイズしてください。

以上、HTMLタグで目次を作る方法でした。

こちらは設定が少しややこしいので、目次に拘るブログ中級者以上の人におすすめですよ。

３．アフィンガー5の有料プラグインで目次を作る方法

有料プラグイン「すごい目次」で目次を作成する方法は次の通り。

1つずつ解説しますね。

手順①：すごい目次の購入

まずは、こちらの「すごい目次」から公式ページへアクセスしてください。

すると、下記画像のような画面に移行するので、「ショッピングカートに入れる」をクリック。

クリックすると注文画面に移行しますので、支払方法の選択をして購入してください。

手順②：すごい目次の有効化

購入が完了しましたら、WordPress管理画面から「プラグイン」→「新規追加」→「プラグインのアップロード」→「ファイルの選択」をクリック。

そこで先ほど購入した「すごい目次」のZipファイルを選択していただき、「ダウンロード」→「有効化」を実行してください。

手順③：各種設定

有効化が完了しましたら、各種設定を行います。

これについては公式ページで詳しく解説しているので、そちらを参考にしてください。

>>すごい目次 公式ページ

以上、有料プラグインで目次を作る方法でした。

有料というだけあって、できることは非常に多い。目次に拘りたいなら有料の「すごい目次」を使ってみましょう。

まとめ：アフィンガー5で目次を作る方法は3パターンある

本記事ではアフィンガー5で目次を作る方法をすべて解説しました。

方法は次の3パターン。

この中で最もおすすめは【TOC＋】で目次を作る方法です。

というのも、非常に簡単に導入から設定・カスタマイズができるから。

kazuki

僕も使っています！！

また、当サイトではこのようにアフィンガー5に関する情報を幅広く発信しています。

他にも機能の使い方やカスタマイズ方法で悩まれることがあれば当サイトへお越しください。

kazuki

アフィンガー5の悩みは当サイトですべて解決しますよ！

参考までに、アフィンガー関連の記事を下記にまとめておきます。

気になるものがあればどうぞご覧ください。

気になるものがあれば読んでみてください。

それでは今日はこのへんで。グッバーイ