【徹底解説】AFFINGER6で目次を作る方法3選

【徹底解説】AFFINGER6で目次を作る方法3選

2020年11月27日

 

AFFINGER6で目次を作る方法が知りたいんだけど、誰か教えてくれないかぁ?

 

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

 

本記事の内容

  • AFFINGER6で目次を作る3つのパターン紹介
  • AFFINGER6で目次を作る手順

 

AFFINGER6で目次を作る方法は3つあるのですが、ほとんどの人がそれを知らない。目次は読者のためにも付けた方がいいので、作り方は知っておくべきです。

ということで今回は、AFFINGER6で目次を作る方法を詳しく解説します。

 

本記事を読めば、何の問題もなく目次を作ることができますよ。

 

✔本記事の執筆者

本記事の執筆者

Twitter:(@k03mind)

 

※当サイト経由でAFFINGER6を購入すると、限定特典として9点を無料プレゼントします。

 

購入者特典

  1. 【購入前特典】アフィンガー初期設定方法を解説
  2. 【購入前特典】アフィンガーを使ったサイトカスタマイズ公開
  3. 【購入前特典】収益を上げるアフィンガーの機能を公開
  4. 限定プラグイン[「SUGOI MOKUJI [LITE]」]
  5. 開始3ヶ月でSEOで月1万稼ぐサイトのプラグインを公開
  6. レビュー記事の書き方[テンプレート配布]
  7. 比較記事の書き方[テンプレート配布]
  8. ランキング記事の書き方[テンプレート配布]
  9. 質問し放題[無期限]

\購入ページはこちら/

9つの限定特典付き

 

当サイト限定特典の詳細は、こちらの[購入特典あり]AFFINGER6(アフィンガー)の購入&導入手順をどうぞ。

実際に利用している人の評価は、こちらの稼げるテーマ!AFFINGER6(アフィンガー)の口コミ・評判まとめをどうぞ。

 

AFFINGER6で目次を作る方法は3パターンある

AFFINGER6で目次を作る方法は3パターンある

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

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

それぞれ解説しますね。

 

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

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

 

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

 

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

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

 

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

 

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

 

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

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

 

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

 

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

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

 

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

 

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

 

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

3つ目はAFFINGER6専用のプラグイン「すごい目次」を使う方法。

 

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

 

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

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

 

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

 

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

 

1.AFFINGER6に【TOC+】を導入して目次を作る方法

1.AFFINGER6に【TOC+】を導入して目次を作る方法

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

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

1つずつ解説しますね。

 

手順①:【TOC+】を導入

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

 

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

 

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

 

プラグインの有効化

 

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

 

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

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

 

プラグインの設定

 

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

 

プラグインの設定

 

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

 

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

 

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

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

 

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

 

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

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

 

カスタマイズ移行画面

 

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

 

目次のカスタマイズ

 

そこから、「オプションカラー」→「目次プラグイン(すごい目次)」をクリックすると、目次のカスタマイズ画面が表示されます。

 

目次のカスタマイズ画面

 

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

 

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

 

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

 

この方法についてさらに詳しく知りたい人は、こちらの【目次作成】WordPress目次プラグインTable of Contents Plusの使い方をどうぞ。

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

 

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

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

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

HTMLタグを使って目次を作る方法は上記の通り。

1つずつ解説しますね。

 

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

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

 

目次の出力

 

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

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

 

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

 

目次のHTMLコード

 

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

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

 

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

 

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

紐づける作業とは、目次をクリックすることで指定したHタグにジャンプするように設定すること。イメージとしては下記の通り。

 

目次と見出しの紐づけ

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

 

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

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

 

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

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

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

 

目次のカスタマイズ画面

 

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

 

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

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

 

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

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

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

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

1つずつ解説しますね。

 

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

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

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

 

すごい目次の購入

 

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

 

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

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

 

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

 

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

 

手順③:各種設定

 

有効化が完了しましたら、各種設定を行うのですが、これは公式ページで詳しく解説しているので、そちらを参考にしてください。

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

 

以上、有料プラグインで目次を作る方法でした。有料というだけあって、できることは非常に多いので、目次に拘りたいなら有料の「すごい目次」を使ってみましょう。

 

まとめ:AFFINGER6で目次を作る方法は3パターンある

まとめ:AFFINGER6で目次を作る方法は3パターンある

本記事ではAFFINGER6で目次を作る方法をすべて解説しました。

方法は次の3パターン。

 

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

 

この中で最もおすすめは、非常に簡単に導入から設定・カスタマイズができる【TOC+】で目次を作る方法です。

利用者も多く、安全性・信頼性も抜群ですよ。

 

僕も使っています!!
kazuki

 

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

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

 

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

 

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

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

 

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

続きを見る

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

続きを見る

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

続きを見る

【初心者向け】AFFINGER6の使い方【絶対に使う機能6選】
【初心者向け】AFFINGER6の使い方【絶対に使う機能6選】

続きを見る

[コピーOK]AFFINGER6でトップページをカスタマイズする手順
[コピーOK]AFFINGER6でトップページをカスタマイズする手順

続きを見る

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

続きを見る

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

続きを見る

AFFINGER6のランキング作成手順を徹底解説
AFFINGER6のランキング作成手順を徹底解説

続きを見る

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

続きを見る

 

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

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

 

 

-affinger