【徹底解説】アフィンガー5で目次を作る方法3選

【徹底解説】アフィンガー5で目次を作る方法3選

2020年11月27日

 

アフィンガー5で目次を作る方法が知りたいんだけど、誰か教えてくれないかぁ?

 

このようなお悩みにお答えします。

 

この記事がおすすめの人

  • アフィンガー5で目次を作る方法を知りたい人

 

✔本記事の執筆者

かずきの武器庫運営者

 

今回はアフィンガー5で目次を作る方法を解説するのですが、実はその方法は3つあります。

本記事ではその3つの方法すべてを詳しく解説しますね。

 

※本記事はすでにAFFINGER5を購入している人向けの記事です。もし、まだ購入されていないのであれば、下記の記事をどうぞ。

購入特典

当サイト経由でAFFINGE5をご購入いただけますと、購入者限定特典として6つの特典をプレゼントします。

>>AFFINGER5購入特典についてはこちら

>>AFFINGER5の口コミ・評判はこちら

 

この記事でわかること

  • アフィンガー5で目次を作るすべての方法を理解できる

 

 

アフィンガー5で目次を作る方法は3パターンある

アフィンガー5で目次を作る方法は3パターンある

 

導入でも申し上げた通り、アフィンガー5で目次を作る方法は3パターンあります。

 

  • 【TOC+】で目次を作る方法
  • HTMLタグで目次を作る方法
  • 有料プラグインで目次を作る方法

 

それぞれ解説しますね。

 

1.【TOC+】で目次を作る方法

 

こちらは最も簡単に目次を作る方法でして、無料プラグイン【TOC+】を使います。

 

メリットデメリット
無料で作成できる自由度が低い
アフィンガー推奨のプラグインプラグインを導入する必要がある

 

簡単な設定で目次を表示できますが、自由度が低い。また、プラグインの導入が必要なので、表示速度低下が懸念されます。

とは言え、それほど気にするレベルのデメリットではないですし、非常に簡単に使えるので導入をおすすめしますよ。

 

kazuki
当サイトの目次は【TOC+】で作成しているよ!

 

【TOC+】で目次を作りたい人は、こちらのアフィンガー5に【TOC+】を導入して目次を作る方法をどうぞ。

 

kazuki
ワンクリックで詳細ページへ飛びます。

 

2.HTMLタグで目次を作る方法

 

2つ目は、記事編集画面の「目次(カスタム)」から目次を作成する方法。

 

メリットデメリット
自由度が高いタグ編集が面倒
プラグインが必要ない記事ごとに作る必要がある
操作を間違えると目次として機能しない

 

自由度が高く、さらにはプラグインの導入が必要ないので、表示速度向上につながります。

とは言え、タグの編集が面倒なのでブログ初心者向きではないですね。

 

kazuki
ブログ中級者以上におすすめです!

 

HTMLタグで目次を作りたい人は、こちらのアフィンガー5内のHTMLタグで目次を作る方法をどうぞ。

 

kazuki
ワンクリックで詳細ページへ飛びます。

 

3.有料プラグインで目次を作る方法

 

3つ目はアフィンガー5専用のプラグイン「すごい目次」を使う方法。

 

メリットデメリット
記事ごとに目次にする見出しタグを変更できる少し高い(5,980円)
クリックされた目次がわかる
目次にしたくない見出しを除外できる
目次のテキストを変更できる
目次にしたい見出し以外のテキストを目次に追加できる
目次にしたい範囲を指定できる

 

有料のプラグインなので費用(5,980円)が掛かりますが、できることは凄まじいです。

目次に拘りたいなら有料プラグイン「すごい目次」を使いましょう。

 

kazuki
僕は拘らないので購入していませんが(笑)

 

有料プラグインで目次を作りたい人は、こちらの有料プラグインで目次を作る方法をどうぞ。

 

kazuki
ワンクリックで詳細ページへ飛びます。

 

1.アフィンガー5に【TOC+】を導入して目次を作る方法

1.アフィンガー5に【TOC+】を導入して目次を作る方法

 

無料プラグイン【TOC+】を導入して目次を作る方法は、下記の3ステップでOKです。

 

  • 手順①:【TOC+】を導入
  • 手順②:【TOC+】の初期設定
  • 手順③:【TOC+】のカスタマイズ

 

1つずつ解説しますね。

 

手順①:【TOC+】を導入

 

まずはWordPress管理画面から「プラグイン」→「新規追加」をクリックし、検索窓で「Table of Contents Plus」と入力してください。

 

プラグインのインストール

 

すると、お目当ての【TOC+】がありますので、「インストール」→「有効化」をクリック。

 

プラグインの有効化

 

これで【TOC+】の導入は完了です。

 

手順②:【TOC+】の初期設定

 

導入が完了しましたら、次は初期設定。

WordPress管理画面から「設定」→「TOC+」の順にクリック。

 

プラグインの設定

 

すると、下記画像のように【TOC+】の設定画面に移行します。

 

プラグインの設定

 

とりあえずは赤枠部分を設定してもらえばOKです。

 

設定項目設定方法
表示条件『2』以上見出しがあるとき
以下のコンテンツタイプを自動挿入post / page
目次の上にタイトルを表示 任意の目次タイトル(例:Contents)
見出しの表示/非表示切り替え文字任意の表示 / 非表示ボタンの文字(例:Open / Close)
目次の表示(初期値)最初に目次を表示するか表示しないか
階層表示H2タグ→H3タグを階層表示にする

 

設定が終われば最後に「保存」をクリックすることを忘れずに。

これで目次が自動的に記事に挿入されるようになりました。

 

kazuki
一度自分の記事を確認してみてください!

 

手順③:【TOC+】のカスタマイズ

 

目次のカスタマイズについては、「外観」→「カスタマイズ」をクリック。

 

カスタマイズ移行画面

 

すると、カスタマイズ画面に移行します。

 

目次のカスタマイズ

 

そこから、「オプションカラー」→「目次プラグイン(すごい目次)」をクリック。

すると、目次のカスタマイズ画面が表示されます。

 

目次のカスタマイズ画面

 

ここはお好きにカスタマイズしてください。

 

kazuki
ちなみに当サイトの目次はデフォルトのままです!

 

以上、【TOC+】を導入して目次を作る方法でした

 

この方法についてさらに詳しく知りたい人は、こちらの【TOC+】「Table of Contents Plus」の設定方法と使い方をどうぞ。

細かい設定についても解説しているので、目次に拘るなら読んで損はないですよ。

 

2.アフィンガー5内のHTMLタグで目次を作る方法

2.アフィンガー5内のHTMLタグで目次を作る方法

 

次に、HTMLタグを使って目次を作る方法を解説します。

手順は次の通り。

 

  • 手順①:タグから目次(カスタム)を追加
  • 手順②:記事本文のHタグと<li>タグを紐付ける
  • 手順③:目次のカスタマイズ

 

1つずつ解説しますね。

 

手順①:タグから目次(カスタム)を追加

 

記事編集画面から「タグ」→「その他パーツ」→「目次(カスタム)」をクリックすると、下記のようにタグが挿入されます。

 

目次の出力

 

目次は3つまでしか表示されないので、足りなければ追加しましょう。

※<li>タグはビジュアルエディタでは追加できないので、テキストエディタに変更してください。

 

今回は例として、新たに3つ追加してみますね。コードは次の通り。

 

目次のHTMLコード

 

赤枠部分が新たに追加した部分です。

これで目次を増やすことができたのですが、このままでは使えません。

 

kazuki
記事本文のHタグと、<li>タグを紐付ける作業が必要です!

 

 

手順②:記事本文のHタグと<li>タグを紐付ける

 

紐づける作業とは、目次をクリックすることで指定したHタグにジャンプするように設定することです。

イメージとしてはこんな感じ。

 

目次と見出しの紐づけ

  • 目次:<a href="#id名">クリック</a>
  • 見出し:<h2 id="id名">見出し</h2>

 

id名を一致さればOKです。

編集が完了すれば、正しく機能しているかプレビュー画面で確認してみてください。

 

手順③:目次のカスタマイズ

 

カスタマイズについては、WordPress管理画面より、「外観」→「カスタマイズ」→「オプションカラー」→「目次プラグイン(すごい目次)」をクリック。

すると、目次のカスタマイズ画面が表示されます。

 

目次のカスタマイズ画面

 

ここでお好きにカスタマイズしてください。

 

以上、HTMLタグで目次を作る方法でした。

こちらは設定が少しややこしいので、目次に拘るブログ中級者以上の人におすすめですよ。

 

3.アフィンガー5の有料プラグインで目次を作る方法

3.アフィンガー5の有料プラグインで目次を作る方法

 

有料プラグイン「すごい目次」で目次を作成する方法は次の通り。

 

  • 手順①:すごい目次の購入
  • 手順②:すごい目次の有効化
  • 手順③:各種設定

 

1つずつ解説しますね。

 

手順①:すごい目次の購入

 

まずは、こちらの「すごい目次」から公式ページへアクセスしてください。

すると、下記画像のような画面に移行するので、「ショッピングカートに入れる」をクリック。

 

すごい目次の購入

 

クリックすると注文画面に移行しますので、支払方法の選択をして購入してください。

 

手順②:すごい目次の有効化

 

購入が完了しましたら、WordPress管理画面から「プラグイン」→「新規追加」→「プラグインのアップロード」→「ファイルの選択」をクリック。

 

プラグインのアップロード

 

そこで先ほど購入した「すごい目次」のZipファイルを選択していただき、「ダウンロード」→「有効化」を実行してください。

 

手順③:各種設定

 

有効化が完了しましたら、各種設定を行います。

これについては公式ページで詳しく解説しているので、そちらを参考にしてください。

>>すごい目次 公式ページ

 

以上、有料プラグインで目次を作る方法でした。

有料というだけあって、できることは非常に多い。目次に拘りたいなら有料の「すごい目次」を使ってみましょう。

 

まとめ:アフィンガー5で目次を作る方法は3パターンある

まとめ:アフィンガー5で目次を作る方法は3パターンある

 

本記事ではアフィンガー5で目次を作る方法をすべて解説しました。

方法は次の3パターン。

 

  • 【TOC+】で目次を作る方法
  • HTMLタグで目次を作る方法
  • 有料プラグインで目次を作る方法

 

この中で最もおすすめは【TOC+】で目次を作る方法です。

というのも、非常に簡単に導入から設定・カスタマイズができるから。

 

kazuki
僕も使っています!!

 

また、当サイトではこのようにアフィンガー5に関する情報を幅広く発信しています。

他にも機能の使い方やカスタマイズ方法で悩まれることがあれば当サイトへお越しください。

 

kazuki
アフィンガー5の悩みは当サイトですべて解決しますよ!

 

参考までに、アフィンガー関連の記事を下記にまとめておきます。

気になるものがあればどうぞご覧ください。

 

アフィンガー5の購入
[購入特典あり]稼げるテーマ!アフィンガー5の購入&導入手順

続きを見る

稼げるテーマ!AFFINGER5(アフィンガー)の口コミ・評判まとめ
稼げるテーマ!AFFINGER5(アフィンガー)の口コミ・評判まとめ

続きを見る

【アフィンガー5 JET】評価、導入・カスタマイズ方法【すべて語る】

続きを見る

【最短5分】アフィンガー5の初期設定を徹底解説

続きを見る

AFFINGER5(アフィンガー)がSEOに強いと言われる5つの理由
AFFINGER5(アフィンガー)がSEOに強いと言われる5つの理由

続きを見る

【初心者向け】アフィンガー5の使い方【絶対に使う機能6選】
【初心者向け】アフィンガー5の使い方【絶対に使う機能6選】

続きを見る

[コピーOK]アフィンガー5でトップページをカスタマイズする手順

続きを見る

【アフィンガー5】吹き出し機能の設定から使い方まで徹底解説
【アフィンガー5】吹き出し機能の設定から使い方まで徹底解説

続きを見る

アフィンガー5のブログカードの作り方。2秒で作れます。

続きを見る

アフィンガー5のランキング作成手順を徹底解説

続きを見る

【超おしゃれ】アフィンガー5のスライドショーの設定方法と使い方
【超おしゃれ】アフィンガー5のスライドショーの設定方法と使い方

続きを見る

 

気になるものがあれば読んでみてください。

それでは今日はこのへんで。グッバーイ

 

 

-affinger