AFFINGER6(アフィンガー6)で目次を作成する3つの方法を解説

ブログ記事に何が書かれているかを示すために欠かすことができない要素が目次です。

リード文の直後に目次を設置することで、読者が読みたい記事なのかを瞬時に判断でき、読みたい場所を選んで求めている情報にアクセスしやすくなります。

目次は記事の満足度を上げるために重要な役割を果たすので、この記事を読んで必ず設定しておきましょう。

本記事の内容

• アフィンガーで目次を設置する方法
• アフィンガーにおすすめの目次
• 使いやすい目次にするコツ

AFFINGER6(アフィンガー6)で目次を作る3つの方法

アフィンガーで目次を作るには次の3つの選択肢があります。

• 外部プラグインを使う
• 公式プラグイン「すごいもくじ」を使う
• タグ機能を使って手動で作る

では、それぞれの特徴やメリット・デメリットを紹介します。

目次を作る方法①外部プラグインを使う方法

外部プラグインで目次を設置するには、「Rich Table of Contents(RTOC)」を使うのがおすすめです。RTOCの特徴は次のとおり

RTOCは無料で使える目次プラグインの中ではデザイン性が非常に高く、設定がしやすいため初心者でも使いやすいのが特徴です。

また人気テーマの「JIN」の開発チームが制作した国産プラグインという点でも安心です。

ただし、アフィンガー用に最適化されているわけではないため、ページ表示速度の低下が気になる場合は次の公式プラグインの利用をおすすめします。

目次を作る方法②公式プラグイン「すごいもくじ」を使う方法

AFFINGER6には目次を表示するためのプラグイン「すごいもくじ」が公式で用意されています。アフィンガー専用のプラグインのため、アフィンガーとは一番相性が良く設定も簡単です。

すごいもくじは「LITE版(無料)」と「PRO版(有料)」がある

すごいもくじにはアフィンガー購入時の特典でついてくる「LITE版(無料)」と追加購入が必要な「PRO版(有料)」の2種類あります。それぞれの特徴と機能を表で比較にしてみます。

すごいもくじLITE版	すごいもくじPRO版
・無料(アフィンガー購入時の特典) ・もくじ自動表示	・有料5,980円 ・もくじ自動表示 ・目次用に見出し変更可 ・記事ごとの見出しデザイン変更 ・クリック計測

PRO版は、投稿記事ごとに見出しデザイン変更ができたり、目次のどの見出しがクリックされたかを測定する機能が追加されます。

特にクリックか測定は「読者によく読まれている内容」を把握できるため、リライトに役立てることが出来ます。

外部プラグインと公式プラグインどっちがおすすめ？

本記事で外部プラグインと公式プラグインのすごいもくじを紹介しました。

どちらを使うべきか迷ったら「すごいもくじ」を使うのがおすすめです。

テーマとの相性を考えるとあえて外部プラグインを使う必要はあまりありません。

すごいもくじは無料のLITE版でも目次表示するだけなら充分。クリック計測をしたいならPRO版を使いましょう。

目次を作る方法③クイックタグ機能を使って手動で作る方法

アフィンガーにはタグ機能を使って手動で目次を作る機能もあります。

タグ機能を使った目次作成の手順は次のとおり。

• クラシックブロックを挿入する
  
• 「タグ＞その他パーツ＞目次(カスタム)」で雛形を作る
  
• 見出しを選択しHTMLアンカーをつける
  
• 「#HTMLアンカー」を目次にリンクする
  

AFFINGER6のタグ機能はおすすめしない

上記のようにタグ機能を使う方法はかなり原始的な方法です。

正直この方法は手間がかかり、効率が悪いためあまりおすすめはしません。どうしてもプラグインを使いたくない方はこの方法で目次を作りましょう。

AFFINGER6(アフィンガー)で使いやすい目次を作る3つのコツ

目次はただ設置するだけでなく、読者にとって読みやすい記事にするために工夫を凝らすことが大事です。

僕が目次を使いやすくするために次の3つのことを意識して目次を作っています。

• 目次は常に「開」いておく
• 目次の見出しは1行に収める
• いつでも目次に戻れるようにする

ではそれぞれのコツについて紹介します。

使いやすい目次を作るコツ①目次は常に「開」いておく

ブログの目次でよく見かける「開く/閉じる」などの開閉ボタンはデフォルト「開」いておくことをおすすめします。

たまに目次を閉じた状態をデフォルトにしているサイトを見かけますが、はっきり言って目次を閉じておくのはもったいないです。

記事を読んでいて目次が開いた状態で邪魔だと感じたことはありますか？

読者目線で考えると、記事の内容が一目でわかる目次はむしろ目立たせたほうがいいです。

使いやすい目次を作るコツ②目次の見出しは1行に収める

目次の見出しは長すぎず、短すぎず、できるだけ1行に収まる長さすることが見やすい目次を作るコツです。

目次は記事の内容を簡潔に伝える役割もあります。

なので、僕自身も直感的に記事内容が読み取れるように、できるだけ短い見出しになるように心がけています。

なお、すごいもくじPROなら、「実際の見出し」と「目次に表示する見出し」を変えることができます。

この機能があることで、キーワードをしっかり入れてSEOを意識しつつ、見やすい目次を作ることもできます。

使いやすい目次を作るコツ③いつでも目次に戻れるようにする

目次は通常導入文の後に置くことが多いです。しかし、記事のナビゲーションにもなるため目次にはいつでもアクセスできる状態を作っておくと読みやすさが格段にアップします。

当ブログでは、記事の下部に目次にいつでも戻れるように「目次に戻る」ボタンを設置しています。

すごいもくじを使えば簡単に設置できます。記事の邪魔になるようなものでもないので戻るボタンも表示しておきましょう。

まとめ：AFFINGER6(アフィンガー)は「すごいもくじ」を使うのがおすすめ

それでは今回のまとめです。

• 目次は記事内容の把握に役立つためユーザービリティ向上になる
• アフィンガーでは「すごいもくじ」がおすすめ
• 3つのコツを意識して見出しを作ると目次が見やすくなる

目次は読者にとって便利で役立つものです。

目次を設置したときのデメリットはほとんどありません。記事の満足度にも関係するので、目次設置は必ず実施しておきましょう！

AFFINGER6を検討中の方