こんにちは、セイタです。
今回はAFFINGER7の目次を作る方法について解説します。
ブログ記事にアクセスしてきてくれたユーザーが記事の構成の全体を把握するのに重要なものとなるので、見出しは必ず設定するようにしましょう。
AFFINGER7の目次作成は「公式プラグイン（標準）」か「無料プラグイン」の2択
AFFINGER7で目次を作成するのは、公式プラグインの「SUGOI MOKUJI」を使用するか、「Table of Contents Plus」を使用するかどちらかになります。
AFFINGER7を使用していない方の場合は、Table of Contents Plusを使用している人が大半だと思いますね。
公式機能「すごいもくじ LITE / PRO」の特徴とメリット
SUGOI MOKUJIはAFFINGER7の公式サイトで購入できるプラグインですが、ユーザーが目次をクリックした回数が確認できるのが最大の特徴となっています。その他できることは以下です。Table of Contents Plusでも出来ないことが数多く備わっています。
SUGOI MOKUJIでできること
- 目次のクリック数がわかる
- 目次にしたくない見出しを除外可能
- 記事ごとに目次にする見出しタグを変更可能
- 目次のテキストを変更可能
- 目次にしたい見出し以外のテキストを目次に追加可能
- 目次にしたい範囲を指定可能
- サイドバーに目次を表示可能
これって結構重要で、「検索エンジンから来たユーザーが記事に対してどんな内容を求めているのか」というのが可視化できるため、記事の見直しや内容の組み方などを考え直す材料になります。主にリライトで役に立つことが多いですね。
また、自分が書いた記事でユーザーが想定していない部分に興味を持っている状況などにもいち早く気づくことができるため、検索ユーザーと自分のニーズミスマッチに気付くことにもつながるため、個人的に重宝しています。
定番の無料プラグインTOC+の特徴とメリット
Table of Contents Plusは目次を作成するのに定番といって良いプラグインです。メリットとしては、難しい設定なく手軽に目次を配置することができるのが良いところですね。
SUGOI MOKUJIのような色々な機能が備わっているわけではないですが、シンプルに目次を設定できるところがメリットですかね。
【結論】AFFINGER7の目次はどちらで作るべき？
AFFINGER7の目次は機能性を重視したい場合は「SUGOI MOKUJI」。コスパを重視したいなら「Table of Contents Plus」ですね。WordPressテーマのAFFINGER7以外に課金をすることに抵抗がある場合は、Table of Contents Plusで問題ないでしょう。
次の内容からは「SUGOI MOKUJI」と「Table of Contents Plus」の導入から設定方法について解説していきます。
AFFINGER7公式「すごいもくじ」での目次の作り方・設定手順
それでは、SUGOI MOKUJIで目次を作る方法について解説します。
1. プラグインのダウンロードとインストール
AFFINGER7公式サイトでSUGOI MOKUJIの購入をしたら、購入後到着したメール添付のURLをクリックするか、STINGER STOREにアクセスしてユーザーの購入履歴から「すごいもくじPRO」をダウンロードしましょう。
2. 基本的な表示設定（表示条件・対象ページ）
SUGOI MOKUJIプラグインをインストールして有効化したのち、WordPress左メニューから「目次」を選択するとSUGOI MOKUJIの設定画面へと移動します。
基本設定としては、以下の設定をどのように表示させたいかを設定していきましょう。
| 設定項目 | 選択肢 |
| 位置 | 最初の見出しの前 |
| 最初の見出しの後 | |
| 上 | |
| 下 | |
| 表示条件 | ◯つ以上見出しがあるとき |
| 以下の投稿タイプに自動挿入 | post or page |
| 見出しテキスト | 目次の上にタイトルを表示 |
| ユーザーによる目次の表示・非表示を切り替えを許可 | |
| 最初は目次を非表示 | |
| 階層表示 | 階層表示を有効化 |
| 目次ボタン | 目次ボタンを表示 |
| クリックで目次をオーバーレイ表示 |
上記の設定は基本的に全てONで大丈夫です。見出しの解析構成については以下画像のように設定しましょう。
H4などを多用する場合には、H4もチェックを入れる必要があると思いますが、基本的にはH2とH3にチェックを入れておけばOKですね。以下の入力欄の部分は初期値のままでOKで、最後の「クリック計測」の「ログインユーザーを計測から除外」チェックは正確な数字を取得するためにチェックを入れるのを忘れないように注意しましょう。
3. 目次のデザイン・カラーのカスタマイズ
SUGOI MOKUJIのカスタマイズはWordPress左メニューから「外観」⇒「カスタマイズ」と進み、続いて「オプション（その他）」⇒「目次プラグイン（すごいもくじ）」の中からカスタマイズをしていきます。
背景、目次タイトル、第一階層、第二階層移行のデザインを変更できるようになってい、デザインも選択するだけで変更が可能になっています。
Table of Contents Plusを使った目次の作り方
次にTable of Contents Plusを使用した目次の作り方について解説します。
Table of Contents Plus (TOC+) の設定手順
WordPressの左メニューから「プラグイン」⇒「プラグインを追加」と進み、画面右上の検索入力テキストボックスに「Table of Contents Plus」と入力し、インストールをクリックし有効化します。
設定項目はほぼSUGOI MOKUJIと同じですが、Table of Contents Plusの設定画面は日本語化されていないため、Google翻訳を使って日本語に変換してから設定すると設定しやすいです。
また、Table of Contents Plusは外観を設定する場面では、プレビュー画面を動的に確認しつつ編集できるので比較的設定をしやすい印象は変わらずでした。初心者でもこちらについては設定しやすいんじゃないかなと思いますね。
AFFINGER7で目次が表示されない・崩れる時のチェックポイント
最後にAFFINGER7で目次が表示されない状態や崩れるときのポイントについて解説します。
基本的には目次が表示されない状態になることは無いに等しいですが、稀に発生する事象なので簡単に原因について紹介します。
見出しタグ（H2やH3）が正しく使われているか
AFFINGER7でSUGOI MOKUJIおよびTable of Contents Plusで目次が表示されない原因として、各プラグインで設定した見出しの基本設定が上手くできていない可能性が高いです。
該当箇所としては「見出し個数以上の場合に表示」「見出しに含めるHタグのチェック」これらが正しく設定していない場合表示されない可能性が高いです。
例えば、H4を見出しとして書いている記事があったとして、表示されない場合は「見出しに含めるHタグ」にH4が含まれていない可能性があるため、もし想定外の表示となっている場合には、これらの設定がしっかりとされている状況になっているか確認をしてみてください。
プラグイン同士の競合が起きていないか
もう一つは、プラグイン同士の競合が起きていないか確認をしてみてください。例えば、SUGOI MOKUJIを入れているのに、Table of Contents Plusも入れていて互いのプラグインの機能が競合し合って表示を妨げているパターンです。
また、キャッシュ系のプラグインを入れている場合は、JavaScriptやCSSなどを短縮表示する機能が備わっているプラグインなども存在しているため、そのようなプラグインが表示を邪魔している可能性があります。少しこちらについては手間ですが、キャッシュ系のプラグインを入れている場合はバックアップを取ったうえで無効化して表示が正常に表示されるか確認してみてください。
AFFINGER7に最適な目次を設定して読者の利便性を高めよう
今回はAFFINGER7の目次設定についての解説を行いましたが、設定は出来そうでしょうか。
AFFINGER7はベースとなるWordPressで無料配布されているTable of Contents Plusを目次プラグインとして利用している人が多いかと思いますが、AFFINGER7を使用している人に限りSUGOI MOKUJIプラグインが使用できるという特権があります。
そのため、WordPress内でユーザーがどのような動きをしているのか。自分が書いた記事が想定された通りに読まれているかなどの情報を可視化するのに、とても優れているプラグインです。もし金銭的に余裕がある場合、先行投資に抵抗が無い場合はSUGOI MOKUJIプラグインを入れることで割と世界が変わるので、興味のある方は購入して設定してみてくださいね。