【AFFINGER6】目次の表示方法4選!クリック率の高め方も3つ解説【+限定特典】はこぶWEB3.0・アフィリエイト・ブログなどを愛する中学生ブロガーです。小5でビジネスを学習→小6からブログを1年継続→月間1.7万PV・収益5桁を達成。普段はWEB3.0を学びつつ、ブログを運営しています。2023年5月10日AFFINGER6で目次を表示する方法がわかりません。おすすめの方法を教えてください!このような、AFFINGER6で目次を作りたい方におすすめの記事です。AFFINGER6には標準で目次機能がないので、目次の表示方法で迷うと思います。そこで今回は、AFFINGER6で目次を表示する方法の4つを比較しつつ、最もおすすめな方法を紹介します。まとめAFFINGER6(アフィンガー6)で目次を表示する方法4選!AFFINGER6で目次を表示する方法は以下の4つです。公式プラグインで目次を表示その他のプラグインで目次を表示それでは、それぞれの特徴とやり方を順番に解説します。自由度が高いページ速度に悪影響がない手動で目次を作るのが面倒まず、HTMLタグで目次を作る方法は毎回手動で作るので効率が悪くなります。プラグインを使わないのでページ速度が遅くなることはありません。目次を表示する手順Gutenbergの場合「クラシック」ブロックを追加する「タグ→その他のパーツ→目次(カスタム)」をクリックコードエディタから見出しタグと目次に同じidを指定するコードエディタは以下のように記述しましょう。href="#">メニュー3</a></li></ul></div>目次のデザインは管理画面の「外観→カスタマイズ(その他)→目次プラグイン(すごいもくじ)」から設定できます。正直なとこ、この方法を使うことは少ないので覚えなくてもOKです。自動で目次が表示できるページ速度に影響がない機能が少ない2つ目は、functions.phpにコードを追加して目次を自動表示する方法で、シンプルな目次を作りたい方におすすめです。WordPress管理画面の「外観→テーマエディター」から、子テーマのfunctions.phpに以下のコードを追加します。(記事内の最初のhタグの手前に自動で挿入されます。目次のHTMLを入れる変数を定義します。h1?h6タグの個数を入れる変数を定義します。記事内のh1?h6タグを検索します。記事内で使われているh1?h6タグの中の、1?6の中の一番小さな数字を取得します。※以降ソースの中にある、levelという単語は1?6のことを表します。スタート時のlevelを決定します。※このレベルが上がる毎に、<ul></li>タグが追加されていきます。各レベルの出現数を格納する配列を定義します。記事内で見つかった、hタグの数だけループします。見つかったhタグのlevelを取得します。見つかったhタグの、タグの中身を取得します。ulタグを閉じる処理です。2ループ目以降に中に入る可能性があります。h3タグ用のulを閉じて、h2タグに備えます。同じlevelの場合、liタグを閉じ、新しく開きます。liタグを追加していきます。h3タグのためにulを追加します。見出しのレベルが変わった場合は、現在のレベル以下の出現回数をリセットします。各レベルの出現数を格納する配列を更新します。現在処理中のhタグの、パスを入れる配列を定義します。2)のようになります。※level_fullpath[0]の1は、1番目のh2タグの直下に入っていることを表します。※level_fullpath[1]の2は、2番目のh3を表します。見出し</a>のような形式で見出しを追加します。ような形式で置き換えます。hタグのループが終了後、閉じられていないulタグを閉じていきます。//目次を作成します。目次関連の情報を取得します。カスタマイザーで目次を非表示にする以外が選択された時&個別非表示が1以外の時に目次を追加します。記事内にショートコードがある場合、ショートコードを目次で置換します。最初のhタグの前に目次を追加します。'add_outline');そして、「外観→カスタマイズ→追加CSS」に以下のCSSをコピペしましょう。1.2em;}表示設定は、「外観→カスタマイズ→投稿ページ設定」からできますが、デザインのカスタマイズにCSSが必要なのが欠点ですね〜。主な特徴AFFINGER6に最適化されている初心者でも簡単に使える一部の機能は有料3つ目は、公式プラグインの「すごいもくじ」で目次を表示する方法です。公式プラグインなのでAFFINGER6に最適化されており、ページ速度に影響がなく、初心者でも使いこなせます。今なら「すごいもくじLITE」という無料版の目次プラグインが期間限定特典としてインストールできます。「投稿記事別の設定」や「クリック率の測定」などの機能を使うには、PRO(有料版)を購入しないといけません。初心者でも簡単に使えるページ速度が低下する4つ目は、その他のプラグインで目次を表示させる方法です。Plus(TOC+)」などのプラグインが定番ですね。ちなみに、AFFINGER6はTOC+のデザインを用意しているので、TOC+がおすすめです。公式プラグインとは違って最適化されていないので、ページ速度が低下するかもしれません。【比較】最もおすすめの方法は?結論、一番おすすめなのは公式プラグイン(すごいもくじ)です。いうのも、機能が豊富なのにデメリットが少ないからです。以下のようなイメージです。公式プラグイン(すごいもくじ)カスタマイズ性が高いシンプルに使えるページ速度に影響がないPRO版を使えばクリック計測ができるまた、クリック計測でクリック率の高い見出しにアフィリエイトリンクを配置し、成約率を高めることもできます。※ただし、無料で使える「すごいもくじLITE」は期間限定特典なので、早めにインストールすることをおすすめします。参考:【期間限定】すごいもくじLITEの使い方&インストール方法【AFFINGER6】AFFINGER6で目次を表示する3つのメリット目次を表示するメリットは、以下の3つがあります。目次を表示するメリット離脱率が下がる検索結果に表示されるSEOの改善に効果があるかもそれでは、順番に解説します。メリット1:離脱率が下がるまず、目次を表示することで離脱率を下げられます。いうのも、ユーザービリティ(読者の利便性)が上がるからです。実際、サイトに目次があると、記事の内容を把握できて快適に記事が読めますよね。目次が見づらいデザインだと、逆に離脱率が上がってしまうかも知れないので注意しましょう。メリット2:検索結果に表示される2つ目のメリットは、検索結果に表示されることです。目次を表示すると、以下のように検索結果に表示されることがあります。このように、検索結果に表示されると読者の目に留まりやすくなり、クリック率UPに繋がるわけです。メリット3:SEOの改善に効果があるかも目次を表示すると、SEOの改善に効果があるかもしれません。いうのも、利便性が改善し、良質なコンテンツに評価されるからです。利便性が改善→アクセスアップ→評価(SEO順位)アップ上のようなイメージです。読者にもブログの運営者にもメリットがあるのがわかりますね。AFFINGER6(アフィンガー6)の目次を最適化する3つのコツ場合によっては、目次を表示すると離脱率が上がる可能性もあるので、目次は最適化しましょう。目次を最適化するコツ見やすいデザインにするh3見出しまで表示する読みたくなる目次にするそれでは上の3つを順番に解説します。1:見やすいデザインにするまず、目次が見づらいと離脱率が上がる原因になってしまいます。画像1のように文字が青色で行間が狭いと、見づらくて離脱率が上がってしまいます。画像1画像2なので、画像2のように見やすい行間や配色にしましょう。2:h3見出しまで表示する目次に表示する見出しレベルは、h3見出しまでにしましょう。h4見出しまで表示すると読みづらくなるからです。記事の内容が一眼でわかるようにh3見出しまで表示するのがおすすめです。3:読みたくなる目次にする読者が読みたくなる目次にすると離脱率を下げられます。以下のようなイメージです。数字を入れる→「〇〇する3つの方法」など内容を理解しやすくする→「方法1:〇〇」など以上の3つをすれば読みやすくなると思います。このように見出しを工夫すると、離脱率を下げられます。まとめ今回は、AFFINGER6で目次を表示する方法やメリット、最適化するコツを解説しました。まとめ公式プラグイン(すごいもくじ)がおすすめ!利便性や離脱率が改善し、SEOに影響するかも!読みやすいデザインで、離脱率を減らそう!今回おすすめした「すごいもくじLITE」は期間限定で無料インストールができます。AFFINGER6を使用していない方は、配布期間が終了する前にインストールするのがおすすめです。AFFiNGER6をインストール既にAFFINGER6を使っている方も、早めにすごいもくじLITEをインストールしておきましょう。PostShareHatenaLINE-AFFINGER6author関連記事AFFINGER6【期間限定】すごいもくじLITEの使い方&インストール方法【AFFINGER6】このような、すごいもくじLITEを使いたい方におすすめの記事です。すごいもくじLITEとは、AFFINGERを購入した方が無料で使えるAFFINGER専用目次プラグインのことです。...AFFINGER6【5分で完了】AFFINGER6でGoogleアナリティクスに連携する方法【アフィンガー6】このような、AFFINGER6でGoogleアナリティクスに連携したい方におすすめです。...AFFINGER6【10分で完了】AFFINGER6の初期設定を7つ解説【アフィンガー6】このような、AFFINGER6導入後の初期設定についての疑問にお答えします。当ブログではAFFINGERを8ヶ月ほど利用しています。...AFFINGER6【1件7,000円】AFFINGER6をアフィリエイトする方法【アフィンガー6】このような疑問に答えます。結論として、infotopに無料登録すればAFFINGER6を7,000円でアフィリエイトできます。今回は、AFFINGER5でFontAwesome5を使う方法を、次の2つに分けて解説しました。AFFINGER5で、FontAwesomeのアイコンが使える裏技です。AFFINGER6【欠点あり】AFFINGER6にしかできないこと3選【使うコツを紹介】%どのWordPressテーマを買おうか迷ってるんだけど、AFFINGER6にしかできない独自の機能とかあるのかな?もしないなら、他のテーマでいい気がするけど..。このような疑問に答えます。【5分で完了】AFFINGER6でGoogleアナリティクスに連携する方法【アフィンガー6】はこぶWEB3.0・アフィリエイト・ブログなどを愛する中学生ブロガーです。小5でビジネスを学習→小6からブログを1年継続→月間1.7万PV・収益5桁を達成。普段はWEB3.0を学びつつ、ブログを運営しています。>当サイトはリンクフリーです当サイトへのリンクは許可なく貼ることができます。スクリーンショットも引用元のURLを貼っていただければ問題なしです。記事にPRが含まれてる場合があります。