AFFINGER5（アフィンガー5）での目次の使い方【初心者向け解説】

悩む人

無料テーマを使ってた時は勝手に目次が表示されてたのに、affinger5にしたら表示されなくなった、、、

こんな経験はしていませんか？

実はアフィンガーを実装した場合無料で目次を表示させるには

・プラグイン「TOC+」を使う

・HTMLで手動で記述

の二つの方法があります。

本記事では、それぞれのやり方を解説していきます。

アフィンガー5で目次を使用する2つの方法

AFFINGER5（アフィンガー5）で目次を表示させる方法は、次の二通り。

手軽で、作業の短縮につながるので、基本的にはTOC+でいいと思います。

しかし、重いプラグインを多数入れていて、サイトの表示速度が遅いという場合は、手動で目次を表示させるといいでしょう。

※ただし、そこまで表示速度に差はないため、基本的にプラグインの使用をおすすめします。

では、具体的に二つの方法の手順を紹介していきます。

TOC+を使って目次を表示させる方法

まずはワードプレスの管理画面で、プラグインの新規追加から、「TOC」と検索し、インストールします。

インストールし終わったら、有効化のボタンを押してプラグインを有効化させます。

有効化させたら設定にある、「TOC+設定」を開きましょう。

基本的に以下のように設定すれば大丈夫です。

これで、保存ボタンを押すと、自動的に全記事に目次が表示されます。

HTMLで手動で目次を表示させる方法

投稿ページの

「タグ」→「その他のパーツ」→「目次(カスタム)」のボタンを押します。

次のようなものが表示されます。

ここから手動でHTMLを書き加えていきます。

目次を見出しにリンクさせる

HTMLを書くので、ビジュアルモードからテキストモードに切り替えます。

以下のようなコードが表示されているはずです。

今、次のようなh2見出しが三つある記事だとしましょう。

これに合わせて、上のコードを以下のように書き換えます。

これで見出し側のコードの書き換えは完了です。

目次側のコードを書き加える

次は記事の本文中の見出し側のコードに書き加えます

テキストモードに切り替えると、見出し部分は次のようになっています。

ここを書き換えていきます。

目次側のコードの<li><a href="#○○"></a></li>の○○と

目次側のコードの<h2 id="○○"></h2>の○○を対応させると、リンクするというわけです。

注意：h3などの小見出しがある場合

例えば、以下のように、「メニュー1」というh2見出しの中に「メニューa」「メニューb」というh3見出しがあるとします。

この場合、最初の目次側のコード

これを、以下のように、<li><a href="#">メニュー1</a><li>の後に、階層構造を持たせてやれば上手くいくはずです。

しかし、表示させてみたところ、綺麗にいきませんでした。

h3以下の小見出しがある場合は、特に初心者は、素直にプラグイン「TOC+」を使った方がいいでしょう。

初心者はプラグインを使って目次を表示させよう

当サイトの場合、プラグインTOC+を使っても、表示速度は変わりませんでした。

参考：表示速度測定ツール「PageSpeed Insghts」

毎回手書きでコードを書くのも面倒ですし、基本的にプラグイン「TOC+」を使って目次を表示させるべきだと思います。

AFFINGER5（アフィンガー5）について詳しくはこちら。

>>ワードプレスのテーマはアフィンガー5がおすすめ【初心者でも使いやすい】

ワードプレスのテーマはアフィンガー5がおすすめ【初心者でも使いやすい】