本記事は、こんな疑問に答えます
こんな方におすすめ
- AFFINGER5（アフィンガー５）で目次の設定方法について知りたい
- AFFINGER5の目次のデザインをカスタマイズしてみたい
結論からAFFINGER５での目次設定は２つあります。
- 目次（カスタム）設定（アフィンガー内のタグ）
- 目次（TOC＋）設定（プラグイン）
本記事では、前半に両目次の設定の違いについて簡単に紹介し、後半では両設定方法について解説しています。
本記事を読みアフィンガー５の目次設定が無事にできましたら幸いです。
それでは、早速始めていきます。
目次
AFFINGER（アフィンガー５）の目次設定は２通りあります
AFFINGER（アフィンガー５）の目次設定は２通りあります
冒頭でも紹介しましたように、アフィンガー５の目次設定は２つあります。
- 目次（カスタム）設定（アフィンガー内のタグ）
- 目次（TOC＋）設定（プラグイン）
それぞれの目次設定の違いとして「HTMLを使って設定する方法」と「プラグインをインストールする方法」です。
一方で、２つ目の「目次（TOC＋）」はプラグインをインストールすることで、簡単に目次を生成することができるので「目次（カスタム）」と比較しても設定はラクです。
とはいえ、「目次（TOC＋）」は簡単に作成することができるのですが、プラグインのインストールはページの表示速度を落としたり、不具合を起こす可能性があります。
自サイトの環境や運用のしやすさなど考慮してアフィンガーの目次設定をしてみてください。
アフィンガー５で目次を設定する方法①：
目次（カスタム）
目次（カスタム）での設定
それでは、目次（カスタム）の設定方法から解説していきます。
- ①：目次（カスタム）タグを追加
- ②：目次（カスタム）タグに「#menu1」を追加する
- ③：見出し（h2,h3）のaタグの設定
手順①：目次（カスタム）タグを追加
まず、WordPressの管理画面から記事作成画面を開きます。
次にエディター内の『①タグ → ②その他のパーツ → ③目次（カスタム）』をクリックします。
「タグ → その他のパーツ → 目次（カスタム）」
すると下記画面のようにテキストのみの目次が表示されます。
目次（カスタム）表示画面
プレビュー画面でみますと以下のように表示されます。
プレビュー画面
ここまで目次の表示設定は完了になります。
次に、クリック後にページへ飛べるようにHTMLリンクの設定をしていきます。
目次（カスタム）のHTMLリンクの設定をしていきます。
- 記事作成画面の右タブ「ビジュアル」 → 「テキスト」に切り替える
- 「#」を「#menu1」にする（以下キャプチャ黄色箇所）
「#」に入れる名称はなんでもOKです。今回は仮で「#menu1」にしています。
目次（カスタム）の設定方法
修正前のHTML
<div id="st_toc_container" class="only-toc">
<p class="st_toc_title">目次</p>
<ul class="st_toc_list">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
修正後のHTML
<div id="st_toc_container" class="only-toc">
<p class="st_toc_title">目次</p>
<ul class="st_toc_list">
<li><a href="#menu1">メニュー1</a></li>
<li><a href="#menu2">メニュー2</a></li>
<li><a href="#menu3">メニュー3</a></li>
</ul>
</div>
※上記のHTMLソースをコピペしてもOKです
同様に「# → #menu2（メニュー２）」「# → #menu3（メニュー３）」に変更したら完了です。
また、『メニュー１』『メニュー２』『メニュー３』と書かれているテキスト部分は、ページ見出しの名前になりますのでお好みのテキストに変更して下さい。
手順③：見出しのaタグの設定
次に、目次クリック後に遷移先（見出し）へ飛べるように、見出し側にもHTMLリンクの設定をしていきます。
まず、『段落 → 見出し2』をクリックして、見出しを生成し『テキスト』に画面を切り替えます。
「<h2></h2>」を『<h2 id="menu1">タイトル名</h2>』に変更します。
修正前のh2見出し（サンプル）
<h2></h2>
<h2></h2>
<h2></h2>
修正後のh2見出し（サンプル）
<h2 id="menu1">タイトル名</h2>
<h2 id="menu2">タイトル名</h2>
<h2 id="menu3">タイトル名</h2>
※こちらをコピペしてもOKです
あとは「タイトル名」をお好みの名前に変更して完了です。
念のため目次をクリックして問題なくページへ飛ぶか確認してみましょう。
これで目次（カスタム）の設定方法は完了です！
アフィンガー５で目次を設定する方法②：
目次（TOC＋）
目次（TOC＋）での設定方法
次に『目次（TOC＋）』を使っての設定方法について解説していきます。
- ①：プラグインのインストール
- ②：プラグインの基本設定
- ③：目次デザインのカスタマイズ
①：プラグインのインストール
WordPressのサイドメニュー『プラグイン → 新規追加』をクリックします。
新規追加画面にいきましたら右上入力ボックスに「table of contents plus」と入力します。
プラグイン：table of contents plus
画面が切り替わりましたらインストールして「有効化」ボタンをクリックします。
②：プラグインの基本設定
インストールが完了しましたらサイドメニューの『設定 → TOC＋』をクリックします。
下記の画面になりましたら、各項目の細かい設定をしていきます。
『設定 → TOC＋』画面
今回は設定しておくと良い初期設定について紹介します。
- 表示条件 → 2つ以上
- 以下のコンテンツタイプを自動挿入 → 「post」「page」にチェック
この２つは始めに設定しておきましょう。
後は「文字サイズ」や「デフォルトで目次を表示させるか」の設定になるので、お好みでカスタマイズしてみて下さい。
③：目次デザインのカスタマイズ
最後に、目次デザインのカスタマイズについて紹介します。
目次デザインのカスタマイズ方法は「外観 → カスタマイズ → オプションカラー → 目次プラグイン（すごいもくじ）」から設定できます。
「外観 → カスタマイズ → オプションカラー → 目次プラグイン（すごいもくじ）」
目次プラグイン（すごいもくじ）では、細かい文字色や周りのボーダーの太さや色の設定ができます。
設定ができましたら「公開」ボタンを忘れずにクリックして完了です！
最後に記事作成画面から「タグ → その他のパーツ → 目次（TOC＋）」をクリックして、目次の表示を確認します。
これで「目次(TOC＋)」を使っての目次設定は完了です。
まとめ：AFFINGER５（アフィンガー５）の２通りの目次設定
いかがでしたでしょうか。
今回はAFFINGER5（アフィンガー５）の目次の設定を２通りで紹介しました。
アフィンガー５の目次を設定しておくと読みたいページまでダイレクトに飛べるのでとても便利な機能です。
その他にもアフィンガー５には設定しておくと役立つ機能がたくさんありますので、もしよければ以下も参考にしてみてください！
今回は以上です。
本記事が役に立ちましたら、幸いです！