【徹底解説】AFFINGER6で目次を作る方法3選

AFFINGER6で目次を作る方法が知りたいんだけど、誰か教えてくれないかぁ？

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

AFFINGER6で目次を作る方法は3つあるのですが、ほとんどの人がそれを知らない。目次は読者のためにも付けた方がいいので、作り方は知っておくべきです。

ということで今回は、AFFINGER6で目次を作る方法を詳しく解説します。

本記事を読めば、何の問題もなく目次を作ることができますよ。

AFFINGER6で目次を作る方法は3パターンある

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

それぞれ解説しますね。

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

こちらは最も簡単に目次を作る方法でして、無料プラグイン【TOC＋】を使います。簡単な設定で目次を表示できますが、自由度が低い。また、プラグインの導入が必要なので、表示速度低下が懸念されます。

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

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

kazuki

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

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

2つ目は、記事編集画面の「目次（カスタム）」から目次を作成する方法。自由度が高く、プラグインの導入が必要ないので、表示速度向上につながります。

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

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

kazuki

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

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

3つ目はAFFINGER6専用のプラグイン「すごい目次」を使う方法。

有料のプラグインなので費用（5,980円）が掛かりますが、できることは凄まじいです。目次に拘りたいなら有料プラグイン「すごい目次」を使いましょう。

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

kazuki

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

１．AFFINGER6に【TOC＋】を導入して目次を作る方法

無料プラグイン【TOC＋】を導入して目次を作る方法は、上記の3ステップでOKです。1つずつ解説しますね。

手順①：【TOC＋】を導入

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

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

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

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

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

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

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

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

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

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

kazuki

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

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

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

そこから、「オプションカラー」→「目次プラグイン（すごい目次）」をクリックすると、目次のカスタマイズ画面が表示されます。

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

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

kazuki

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

この方法についてさらに詳しく知りたい人は、こちらの【目次作成】WordPress目次プラグインTable of Contents Plusの使い方をどうぞ。

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

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

HTMLタグを使って目次を作る方法は上記の通り。

1つずつ解説しますね。

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

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

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

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

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

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

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

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

kazuki

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

紐づける作業とは、目次をクリックすることで指定したHタグにジャンプするように設定すること。イメージとしては下記の通り。

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

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

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

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

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

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

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

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

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

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

1つずつ解説しますね。

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

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

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

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

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

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

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

手順③：各種設定

有効化が完了しましたら、各種設定を行うのですが、これは公式ページで詳しく解説しているので、そちらを参考にしてください。

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

以上、有料プラグインで目次を作る方法でした。有料というだけあって、できることは非常に多いので、目次に拘りたいなら有料の「すごい目次」を使ってみましょう。

まとめ：AFFINGER6で目次を作る方法は3パターンある

本記事ではAFFINGER6で目次を作る方法をすべて解説しました。

方法は次の3パターン。

この中で最もおすすめは、非常に簡単に導入から設定・カスタマイズができる【TOC＋】で目次を作る方法です。

利用者も多く、安全性・信頼性も抜群ですよ。

僕も使っています！！

kazuki

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

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

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

kazuki

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

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

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

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