AFFINGER6を購入したけど、「目次」の設置の仕方はどうするの？
そんな悩みを解決します。
結論
AFFINGER6で「目次」を設置することができます。
方法は2通り。
- 目次（カスタム）
- 目次（TOC+）←プラグイン（無料）：オススメ！
上記のどちらかを利用する方法です。
簡単なのは、プラグインを使う方法です。
こんな方におすすめです
- AFFINGER6を使用しているけど「目次」の設置の仕方がわからない
- AFFINGER6でもっと簡単に「目次」を設置したい
- AFFINGER6で「目次」の使い方を知りたい
- AFFINGER6の購入を検討している方
上記のような人には参考になります。
AFFINGER6で「目次」を設置する2つの方法と使い方
別のテーマによっては、何も設定をしなくても自動で「目次」を設置してくれるものもあります。
AFFINGER6は「目次」を手動で設置するか、プラグイン（無料）を使う必要がありますが、すごく簡単です。
特にプラグインを使う方法は、最初に設定を済ませておくと非常に簡単に「目次」を設置することができるのでおすすめです。
AFFINGER6で「目次」を設置する方法
- 目次（カスタム）の設置方法（手順）と使い方
- 目次（TOC+）プラグインの設置方法（手順）と使い方
それぞれ設置方法と使い方を解説します。
①目次（カスタム）の設置方法（手順）と使い方
AFFINGER6の記事を書く画面で、「目次（カスタム）」を選択して、自分でメニュー名やリンク先を入力する方法です。
HTMLタグを理解する必要があり、手間が掛かりますが、好きにテキストが変えられるので自由度が高いです。
AFFINGER6：目次（カスタム）の設置手順
- 目次を設置したい場所でタグを選択
- 目次にしたいテキストを入力
- リンク先の見出しに「ID（名前）」を付ける
- 目次のリンク設定にIDを入力
タグ→その他パーツ→目次（カスタム）を選択すると目次の要素が自動的に追加されます。
目次を設置する場所は、最初の見出しの直前が良いでしょう。
デフォルトでは「メニュー」となっていますので、目次にするテキストを入力します。
基本的には、見出しと同じにするのが良いでしょう。
極端に長い見出しは、目次を省略して書くこともできます。
目次をクリックしたときの遷移先である見出しに「ID（名前）」を付けます。
「目次を押したら、ここまで飛ばしてくださいね」という目印を付ける作業になります。
WordPressの入力モードを「ビジュアル」から「テキスト」に変更して、見出しに「id=”mokuji1″」を入力します。
「mokuji1」部分は、半角英数字の任意となります。
分かりやすい名前をつけましょう。
目次にも「ID（名前）」を付けます。
見出しにつけた「ID」と同じものを目次にも付けます。
目次にはIDの前に「#」をつけるのを忘れずに！
WordPressの入力モードを「ビジュアル」から「テキスト」に変更して、見出しに「id=”mokuji1″」を入力します。
これで目次が完成しました。
目次のタグを設置して、目次と見出しにIDを付けるだけの作業となります。
プレビューで実際に動作するか確認をしましょう。
目次（カスタム）を使うメリット
- メニューのテキストを好きに変えることができる
- メニューを厳選することができる
自分で好きにテキストを変えることができます。
目次を短くすることも、目次にする必要のないものは省くこともできます。
目次（カスタム）を使うデメリット
- メニューを自分で記入する必要がある
- メニューのリンク先のIDを記入する必要がある
手間が掛かりますし、入力ミスで目次のリンクが遷移しないことも。
目次（TOC+）プラグインの設置方法（手順）と使い方
予めプラグイン「Table of Contents Plus」をインストールして設定を済ませておくと、自動的に目次が設置される非常に簡単な方法です。
※本文中の見出しが自動的に目次になります。
AFFINGER6：目次（TOC+）の設置手順
- プラグイン「Table of Contents Plus」のインストール
- プラグイン「Table of Contents Plus」の設定
それぞれ解説します。
WordPressの「プラグイン→新規追加」で「Table of Contents Plus」を検索して、インストール＆有効をしてください。
主な設定を解説します。
①位置
記事中のどこに目次を自動挿入させるかの設定となります。
以下4つから選択が可能ですが、「最初の見出しの前（デフォルト）」が良いでしょう。
- 最初の見出しの前（デフォルト）
- 最初の見出しの後
- 上
- 下
②表示条件
目次を表示させる条件を設定できます。
「2〜10」つ以上見出しがあるとき
見出しが少ないと目次はいらないと思われるなら、3以上がおすすめです。
③コンテンツタイプを自動挿入
投稿記事と固定ページに自動的に目次を表示させたいときには、「post」「page」にチェックを入れておくと良いでしょう。
- post・・・投稿記事のこと
- page・・・固定ページのこと
④見出しテキスト
目次の上に「もくじ」や「CONTENTS」など任意でタイトルを付けることができます。
また、目次を「表示／非表示」することができるテキストボタンを設置することができます。
⑤スムーズ・スクロール効果を有効化
目次をクリックしたときに、パッと移動するのか、スルスルッと移動するのかを選択することができます。
その他、デザインや上級者向けの設定もすることができますので、好みに合わせて試してみてはいかがでしょうか。
設定を保存すると、あとは記事を書くだけで自動的に目次が表示されるようになります。
まとめ：【簡単】AFFINGER6で「目次」を設置する2つの方法と使い方
AFFINGER6で「目次」を設置する方法は2通り。
- 目次（カスタム）
- 目次（TOC+）←プラグイン（無料）：オススメ！
上記のどちらかを利用する方法です。
簡単なのは、プラグインを使う方法です。
目次（TOC+）を利用すると最初の設定だけで、あとは非常に簡単に目次を設置することができるのでおすすめです。
読者が読みたい場所にすぐにたどり着けるように今すぐブログ記事に「目次」を設置しましょう。
