AFFINGER5 目次の作り方3パターン【簡単に無料で作る】

悩む人

「AFFINGER5（アフィンガー5）」を買ったはいいけど、目次がついてない…何で？
「SUGOI MOKUJI（すごいもくじ）」っていうプラグインがあるけど有料か…無料はないの？

こんな悩みに答えます。

本記事では、アフィンガーで目次を作る方法を無料・自動生成を含み3パターンご紹介します。

レイ

無料プラグインで簡単に自動生成が可能です
有料プラグインだとさらにクリック数を計測できます

AFFINGER5 目次の作り方①無料プラグインで自動生成

デフォルトだと目次がついていませんが、無料プラグインで簡単に追加することが可能です。

プラグインを入れるだけでh2~h6タグを自動で読み込み、目次を自動生成してくれるので、とにかくお手軽に導入したい方におすすめです。

目次を自動生成してくれるWordPressプラグインは以下の記事で解説しています。

関連記事目次生成 Table of Contents Plus(TOC+)

AFFINGER5 目次の作り方②手動で作る方法（HTMLタグ）

少し手間ですが、アフィンガーの機能を使い、手動で作る方法もあります。こちらはHTMLを使うのに抵抗ない方向けです。

自動生成よりもカスタマイズ性は高いですが、記事ごとに設定する必要があるので時間がかかります。

プラグインで簡単につくれるので、この方法で作っている方は少ないと思いますし、あまりおすすめしません。

※一度、生成したコードはひな形としてテキストファイル等にバックアップして使いまわしましょう。

①記事編集画面から目次(カスタム)を追加

AFFINGER5 - 目次(カスタム)

AFFINGER5の記事編集画面から元となる目次を追加します。

タグ⇒その他パーツ⇒目次(カスタム)を選択します。

追加しただけだと機能しないので、ページ内リンクの設定が必要になります。

※目次(カスタム)を追加する時は、ビジュアルエディターから操作します。

②目次に必要な分だけ、liタグをコピーする

AFFINGER5 - 目次のliタグをコピー

目次の分だけ、liタグが必要ですので、コピーして増やします。

※タグをコピーするには、テキストエディターから操作します。

③aタグでページ内リンクを設定する

AFFINGER5 - ページ内リンクを設定

ページ内のhタグにidを割り振ります。※重複しないように設定が必要。

つぎに目次のaタグにページ内リンクを設定します。「href="#id名"」のように＃をつけて設定します。

リンクには、内部リンク、外部リンクの他にページ内リンクが存在します。つまり、目次はページ内リンクのまとまりみたいなものですね。

本サンプルをプレビューするとこんな感じです。

AFFINGER5 - 目次をプレビュー

これで設定は完了です。

AFFINGER5 目次の作り方③有料プラグインで自動生成・クリック計測

「AFFINGER5（アフィンガー5）」には、専用プラグインとして「SUGOI MOKUJI（すごいもくじ）[PRO]」があり、お値段は5,980 円（税込）となっています。

無料プラグインより機能が豊富で、例えばクリック計測で読者ニーズを視覚化することも可能です。

ブログに力を入れているのであれば、有料に切り替えるのもありです。

後から購入して追加することが可能。※その場合は、他の目次プラグインは重複するので削除してください。

まとめ：目次は簡単に設置できる無料プラグインがおすすめ

目次を設定すると、記事の内容が把握しやすいため、ユーザビリティの向上につながります。

さらに、有料プラグインでクリック数を計測すれば、記事内のどの部分がよく読まれているか、どういった意図で流入しているかなどがわかります。

これを利用してリライトの判断材料としたり、記事内のキーワードを見直したりすれば、読者ニーズにあった改善が可能です。

関連記事FontAwesomeの使い方【オシャレなアイコンを表示する】
関連記事ココナラでアイコンを作成する流れを徹底解説【依頼内容の実例つき】