AFFINGER6

アフィンガー5に目次を設定するべき理由と3つの方法

アフィンガー5で目次が表示されないのですが、どうしたら表示できますか?使い方が分からないので教えてください。

といった悩みにお答えします。

 本記事の内容

  • アフィンガーで目次を使うべき理由【メリット3つ】
  • アフィンガーの目次が上手く表示されない原因は?【改善方法】

 本記事の信頼性


りょーた(@ryotablogger

アフィンガー5の目次は専用のプラグインを使わなくても簡単に設定することができます。

とはいえ、「アフィンガー5の目次はどうやって設定すればいいの?」「アフィンガー5の目次の使い方が分からない…。」と思っている方は多いのではないでしょうか?

今回はアフィンガー5の目次の使い方を中心に解説していきます。

本記事を読むことで、アフィンガー5に目次を設定することができるので読者が迷わずに自分

そうすることで、ユーザーの利便性が高まり、読者に優しいサイト設計ができます。

目次は読者がすぐに知りたいことを探すための導線です!
りょーた
初期設定を終わらせる
アフィンガー6の初期設定7つを最速で終わらせる【基本設定も解説】

続きを見る

デザインを終わらせる
【初心者向け】アフィンガー6のカスタマイズ方法を0から解説

続きを見る

AFFINGER5を導入しようか検討中の方は、[st_af id="10613"]もチェックしてみてください。AFFINGER5がどういったテーマなのかを14,000文字の大ボリュームで徹底解説しています。

アフィンガー5で目次を使うべき理由【メリット3つ】

まずは、アフィンガーで目次を使うべき理由を3つ紹介します。

  1. 記事を読むかどうかの判断材料となる
  2. 読者に興味をもってもらうことができる
  3. 滞在時間が上がるので、SEO対策に効果的

1つずつ解説していきます。

その➀:ブログの内容がひと目で分かる

1つ目の理由は、ブログの内容が一目で分かるからです。

例えば、本記事を見てもらえば分かると思うのですが、目次を開くとどのような内容が記載してあるのかが一目で分かります。

そうすることで、読者が目次を見たときに自分の求めている内容があるのかどうかをすぐに探すことができるので、手間をかけさせずに記事を読んでもらうことができます。

自分もそうですが、記事の内容がわからないと自分で見つけなきゃいけないのでかなり面倒ですよね!
りょーた

目的の内容まで飛ばせる

 

2つ目の理由は、「目的の内容まで飛ばせる」からです。

 

例えば、検索からやってきた読者は大抵目的が決まっていますが、目次があることで、自分に必要のない情報を見ずに目的の内容まで一気に飛ばして読むことができます。

 

 

 

 

検索結果に表示される

3つ目の理由は、検索結果に表示されるからです。

上記のように、Googleの検索結果に表示されているのを見たことがないでしょうか?

検索結果に表示されることにより、視認性が上がり、自分の求めている情報が書かれているかどうかを判断することができるので、CTR(クリック率)が高くなります。

アフィンガー5で目次を使う方法は3つ

アフィンガー5で目次を使う方法は以下の3つになります。

  1. Table of Contents Plusを使う方法【超簡単】
  2. AFFINGER5のタグを使う方法【やや難しい】
  3. SUGOI MOKUJIを使う方法【当ブログ使用】

当ブログでは、SUGOI MOKUJIというアフィンガー5専用プラグインを使っていますが、別途料金(税込5.980円)がかかってしまうので、無理に使う必要はありません。

 

その①:Table of Contents Plusを使う方法【超簡単】

最初に、プラグイン「Table of Contents Plus」を使った目次の作り方を解説していきます。

まずは、Table of Contents Plusをインストールして有効化していきます。

WordPress管理画面より、「プラグイン」「新規追加」をクリック。

右上の検索窓に、「Table of Contents Plus」と入力しましょう。

Table of Contents Plusが表示されたら、「インストール」というボタンをクリックして、「有効化」をクリックすれば完了です。

次にTable of Contents Plusの初期設定をしていきます。

WordPress管理画面より、「設定」「TOC+」とクリックして「基本設定」を変更していきます。

以下を参考にして変更してみてください。

表示条件4 → 2
以下のコンテンツタイプを自動挿入postに☑
目次の上にタイトルを表示Contents → 目次
テキストを表示show → 表示
テキストを非表示hide → 非表示
最初は目次を非表示☑を入れる
スムーズ・スクロール効果を有効化☑を入れる

設定が完了したら、「設定を更新」をクリックすれば初期設定が完了となり、各記事に目次が表示されます。

あとはお好みで、目次をカスタマイズすることも可能です。

 

 

「外観」→「カスタマイズ」→「[+]オプションカラー」「目次プラグイン(すごいもくじ)」

実際にカスタマイズした目次をデフォルトの目次と比べてみると以下のようになります。

●画像

 

上記のように簡単にオシャレな目次にカスタマイズすることができます。

 

目次のカスタマイズ例

●画像

 

目次アイコンはfontawesomeからお好きなアイコンに変更することができます。

 

ここに注意

目次のアイコンは下の画像の赤枠部分のUnicodeになります。

右側のHTMLコードだと正しく表示されないので気をつけてください。

 

その②:アフィンガー5のタグを使う方法【やや難しい】

次は、アフィンガー5のタグを使った目次の作り方を解説していきます。

HTMLをいじることになるので、若干難易度は上がります。

また、他の2つのやり方とは違い、記事1つずつに設定しなければいけないため、かなり面倒です。

 

あまりおすすめはしませんので、こんなやり方があるんだぐらいの気持ちで覚えておいてください。

それでは早速、新規記事を作成して、

 

WordPress管理画面より、「投稿」→「新規追加」をクリックしてください。(既存の記事に追加してもOKです。)

 

新規記事の投稿→タグの挿入

 

「投稿」→「新規追加」で新しい記事を作成します。(既存の記事でもOK)

 

 

「タグ」→「その他パーツ」「目次(カスタム)」で目次用のタグを追加していきます。

 

 

図のように「目次(カスタム)」が挿入できたら、一度「プレビュー」で確認してみてください。

すると、以下のような目次が出来上がっていると思います。

 

 

とりあえず、タグの挿入は完了です。

ただし、この状態だとリンクが正しく設定されていないので、目次の見出しをクリックすると、最上部に移動してしまいます。

次にコードを追加して正しく移動するようにしましょう。

 

コードの追加

●画像

 

次に「H2(見出し)を3つ作成」→「目次の見出しを追加」「各H2(見出し)にリンク」といった作業をします。

ここが重要で間違えると正しくリンクが飛ばない、といったことになりかねないのでご注意ください。

 

HTMLコードを追加して、正しい見出しに移動できるようにリンクさせていきます。

●注意:テキストエディタに変更しましょう。

 

目次の見出し数に応じて以下のHTMLコードを追加しましょう。

 

 html
<li><a href="#">任意のメニュー名</a></li>

 

 

目次の見出しをクリックしたときに移動するようにH2(見出し)を追加します。

 

 

目次の見出しとH2(各見出し)をリンクさせていきます。

 

 html
<h2 id="任意">メニュー1をクリックするとここに移動</h2> ※h2とidの間には半角スペースを忘れずに!

 

 html
<li><a href="#任意">メニュー1</a></li> ※#は必要だから消さないように!

 

上記の2つのHTMLコードの『任意』を変更すればOK!

これで一通りは完了!

 

ただし、これだけだと目次を階層化できていないので、さらにHTMLコードを追加していきます。

 

 html
<ol>
<li><a href="#kaisouka1">H3にリンク1</a></li>
<li><a href="#kaisouka2">H3にリンク2</a></li>
<li><a href="#kaisouka3">H3にリンク3</a></li>
</ol>

上記のコードを目次の見出しに入れてあげると無事に階層化することができます。

 

 

あとは先程と同じように、H3(見出し)にリンクさせればOKです。

 

 

目次のカスタマイズ

Table of Contents Plusを使う方法の目次のカスタマイズと同様の設定となります。

お好きなカスタマイズを行ってオシャレな目次を作ってみてください。

 

 

その③:SUGOI MOKUJIを使う方法【当ブログ使用】

その③:SUGOI MOKUJIを使う方法【当ブログ使用】

最後に、アフィンガー5専用プラグインである、「SUGOI MOKUJI」を使ったやり方です。

SUGOI MOKUJIとは

すごい目次は、目次のクリック数を計測できるアフィンガー専用プラグインです。

目次のクリック数が分かれば、どの見出しが読まれているのかを知ることが出来るので、クリックされていない見出しのリライトに役立ちます。

それ以外にもSUGOI MOKUJIでは以下のことができます。

  • 記事ごとに目次にする見出しタグを変更できる
  • 目次にしたくない見出しを除外できる
  • 目次のテキストを変更できる
  • 目次にしたい見出し以外のテキストを目次に追加できる
  • 目次にしたい範囲を指定できる

SUGOI MOKUJIは以下のリンクから購入することができます。

≫ SUGOI MOKUJIを導入する

ダウンロード威厳は購入日から7日間となっているので忘れずに!
りょーた

まずは、SUGOI MOKUJIをインストールして有効化していきます。

WordPress管理画面より、「プラグイン」→「新規追加」→「プラグインのアップロード」をクリックしてください。

「ファイルの選択」をクリックしたら、ダウンロードした〇〇の中の〇〇を選択してください。

今すぐインストールをクリックして、ンストールが完了したら有効化しましょう。

 

SUGOI MKUJIを有効化することができたら、設定していきます。

アフィンガー5で目次が表示されない場合

目次が上手く表示されない原因は?

アフィンガー5で目次が上手く表示されない場合には、以下を確認してみてください。

目次の表示方法原因箇所
Table of Contents Plus・プラグインが有効化されているか?
・「表示条件」は適切か?
・「以下のコンテンツタイプを自動挿入」にチェックが入っているか?
アフィンガー5のタグ・目次の見出しと飛ばしたい見出しがリンクしてますか?
SUGOI MOKUJI・他のプラグインと干渉

上記に加えて、記事内でH2やH3の見出しレベルが正しく階層化されていないと正しく表示されないので、確認してみましょう。

また、キャッシュ系プラグインを使っている場合には、キャッシュが残っている場合があるので、キャッシュを削除してみましょう。

どうしても改善できない場合には、公式サイトで一度問い合わせしてみると良いです。

まとめ:目次は読者のための道しるべ

まとめ:目次は読者のための道しるべ

今回は、アフィンガーで目次を使う方法を3つ紹介しました。

  1. Table of Contents Plusを使う方法【超簡単】
  2. AFFINGER5のタグを使う方法【やや難しい】
  3. SUGOI MOKUJIを使う方法【当ブログ使用】

アフィンガーに限らず、どんなテーマでも読者が必要としている情報にすぐ移動できるように、目次は必ず設定しておきましょう。

目次を設定することにより、読者が必要な情報をすぐに探し出すことができるので、利便性が良く、離脱率が下がります。

また利便性が良いとSEO対策としても効果的なので、まだ設定していないという方は本記事を参考に設定してみてください。

これからAFFINGER5の導入を検討している方は、AFFINGER5をガチレビュー!2年間使い続けた理由をデメリット含め解説もチェックしてみてください。

アフィンガー5について知りたい方は
【限定特典付き】AFFINGER6をガチレビュー!2年間使い続けた理由をデメリット含め解説

続きを見る

-AFFINGER6