AFFINGER6

【完全解説】AFFINGER6で目次を表示する方法4選!【アフィンガー6】

2021年9月20日

【完全解説】AFFINGER6で目次を表示する方法4選!【限定特典あり】

AFFINGER6で目次を表示する方法がわかりません。
おすすめの方法を教えてください!

このような、AFFINGER6で目次を作りたい方におすすめの記事です。

AFFINGER6には標準で目次機能がないので、目次の表示方法で迷うと思います。

そこで今回は、AFFINGER6で目次を表示する方法の4つを比較しつつ、最もおすすめな方法を紹介します。

この記事で、目次のを最適に表示させられると思いますよ!

AFFINGER6(アフィンガー6)で目次を表示する方法4選!

AFFINGER6で目次を表示する方法4選!

AFFINGER6で目次を表示する方法は以下の4つです。

目次を表示する方法

  • HTMLタグで目次を手動表示
  • functions.phpで目次を自動表示
  • 公式プラグインで目次を表示
  • その他のプラグインで目次を表示

それでは、それぞれの特徴とやり方を順番に解説します。

方法①:HTMLタグで目次を手動表示

主な特徴

  • 自由度が高い
  • ページ速度に悪影響がない
  • 手動で目次を作るのが面倒

まず、HTMLタグで目次を作る方法は毎回手動で作るので効率が悪くなります。

ただ、プラグインを使わないのでページ速度が遅くなることはありません。

目次を表示する手順

  • Gutenbergの場合「クラシック」ブロックを追加する
  • 「タグ→その他のパーツ→目次(カスタム)」をクリック
  • コードエディタから見出しタグと目次に同じidを指定する

コードエディタは以下のように記述しましょう。

<h2 id="idを指定">見出し</h2>

<div id="st_toc_container" class="only-toc">
<p class="st_toc_title">目次</p>
<ul class="st_toc_list">
<li><a href="#idを指定">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>

目次のデザインは管理画面の「外観→カスタマイズ(その他)→目次プラグイン(すごいもくじ)」から設定できます。

正直なとこ、この方法を使うことは少ないので覚えなくてもOKです。

方法②:functions.phpで目次を自動表示

主な特徴

  • 自動で目次が表示できる
  • ページ速度に影響がない
  • 機能が少ない

2つ目は、functions.phpにコードを追加して目次を自動表示する方法で、シンプルな目次を作りたい方におすすめです。

まず、WordPress管理画面の「外観→テーマエディター」から、子テーマのfunctions.phpに以下のコードを追加します。

そして、「外観→カスタマイズ→追加CSS」に以下のCSSをコピペしましょう。

表示設定は、「外観→カスタマイズ→投稿ページ設定」からできますが、デザインのカスタマイズにCSSが必要なのが欠点ですね〜。

参考:ワードプレスで目次をプラグインなし(functions.php)で実装する方法

方法③:公式プラグインで目次を表示

主な特徴

  • AFFINGER6に最適化されている
  • 初心者でも簡単に使える
  • 一部の機能は有料

3つ目は、公式プラグインの「すごいもくじ」で目次を表示する方法です。

公式プラグインなのでAFFINGER6に最適化されており、ページ速度に影響がなく、初心者でも使いこなせます。

また、今なら「すごいもくじLITE」という無料版の目次プラグインが期間限定特典としてインストールできます。

ただし、「投稿記事別の設定」や「クリック率の測定」などの機能を使うには、PRO(有料版)を購入しないといけません。

参考:【期間限定】すごいもくじLITEの使い方&インストール方法【AFFINGER6】

方法④:その他のプラグインで目次を表示

主な特徴

  • 機能が豊富
  • 初心者でも簡単に使える
  • ページ速度が低下する

4つ目は、その他のプラグインで目次を表示させる方法です。

例えば、「Easy Table of Contents」「Table of Contents Plus(TOC+)」などのプラグインが定番ですね。

ちなみに、AFFINGER6はTOC+のデザインを用意しているので、TOC+がおすすめです。

ただ、公式プラグインとは違って最適化されていないので、ページ速度が低下するかもしれません。

【比較】最もおすすめの方法は?

結論、一番おすすめなのは公式プラグイン(すごいもくじ)です。

というのも、機能が豊富なのにデメリットが少ないからです。
例えば以下のようなイメージです。

公式プラグイン(すごいもくじ)

  • カスタマイズ性が高い
  • シンプルに使える
  • ページ速度に影響がない
  • PRO版を使えばクリック計測ができる

また、クリック計測でクリック率の高い見出しにアフィリエイトリンクを配置し、成約率を高めることもできます。

※ただし、無料で使える「すごいもくじLITE」は期間限定特典なので、早めにインストールすることをおすすめします。

参考:【期間限定】すごいもくじLITEの使い方&インストール方法【AFFINGER6】

AFFINGER6で目次を表示する3つのメリット

AFFINGER6で目次を表示する3つのメリット

目次を表示するメリットは、以下の3つがあります。

目次を表示するメリット

  • 離脱率が下がる
  • 検索結果に表示される
  • SEOの改善に効果があるかも

それでは、順番に解説します。

メリット①:離脱率が下がる

まず、目次を表示することで離脱率を下げられます。

というのも、ユーザービリティ(読者の利便性)が上がるからです。

実際、サイトに目次があると、記事の内容を把握できて快適に記事が読めますよね。

ただし、目次が見づらいデザインだと、逆に離脱率が上がってしまうかも知れないので注意しましょう。

メリット②:検索結果に表示される

2つ目のメリットは、検索結果に表示されることです。

目次を表示すると、以下のように検索結果に表示されることがあります。

目次が検索結果に表示される

このように、検索結果に表示されると読者の目に留まりやすくなり、クリック率UPに繋がるわけです。

メリット③:SEOの改善に効果があるかも

目次を表示すると、SEOの改善に効果があるかもしれません。

というのも、利便性が改善し、良質なコンテンツに評価されるからです。

利便性が改善→アクセスアップ→評価(SEO順位)アップ

上のようなイメージです。
読者にもブログの運営者にもメリットがあるのがわかりますね。

AFFINGER6(アフィンガー6)の目次を最適化する3つのコツ

AFFINGER6の目次を最適化する3つのコツ

場合によっては、目次を表示すると離脱率が上がる可能性もあるので、目次最適化しましょう。

目次を最適化するコツ

  • 見やすいデザインにする
  • h3見出しまで表示する
  • 読みたくなる目次にする

それでは上の3つを順番に解説します。

コツ①:見やすいデザインにする

まず、目次が見づらいと離脱率が上がる原因になってしまいます。

例えば、画像①のように文字が青色で行間が狭いと、見づらくて離脱率が上がってしまいます。

見づらい目次デザイン
画像①
見やすい目次デザイン
画像②

なので、画像②のように見やすい行間や配色にしましょう。

コツ②:h3見出しまで表示する

目次に表示する見出しレベルは、h3見出しまでにしましょう。

もし、h4見出しまで表示すると読みづらくなるからです。

なので、記事の内容が一眼でわかるようにh3見出しまで表示するのがおすすめです。

コツ③:読みたくなる目次にする

読者が読みたくなる目次にすると離脱率を下げられます。
例えば以下のようなイメージです。

読みたくなる目次

  • 適度な文字数にする→1行くらいが目安
  • 数字を入れる→「〇〇する3つの方法」など
  • 内容を理解しやすくする→「方法①:〇〇」など

以上の3つをすれば読みやすくなると思います。

このように見出しを工夫すると、離脱率を下げられます。

まとめ

今回は、AFFINGER6で目次を表示する方法やメリット、最適化するコツを解説しました。

まとめ

  • 公式プラグイン(すごいもくじ)がおすすめ!
  • 利便性や離脱率が改善し、SEOに影響するかも!
  • 読みやすいデザインで、離脱率を減らそう!

今回おすすめした「すごいもくじLITE」は期間限定で無料インストールができます。

まだAFFINGER6を使用していない方は、配布期間が終了する前にインストールするのがおすすめです。

AFFiNGER6をインストール

既にAFFINGER6を使っている方も、早めにすごいもくじLITEをインストールしておきましょう。

-AFFINGER6