
こんな経験はしていませんか?
実はアフィンガーを実装した場合無料で目次を表示させるには
・プラグイン「TOC+」を使う
・HTMLで手動で記述
の二つの方法があります。
本記事では、それぞれのやり方を解説していきます。
目次
アフィンガー5で目次を使用する2つの方法
AFFINGER5(アフィンガー5)で目次を表示させる方法は、次の二通り。
目次を表示させる方法
・プラグイン「TOC+」を使う
・HTMLで手動で記述
手軽で、作業の短縮につながるので、基本的にはTOC+でいいと思います。
しかし、重いプラグインを多数入れていて、サイトの表示速度が遅いという場合は、手動で目次を表示させるといいでしょう。
※ただし、そこまで表示速度に差はないため、基本的にプラグインの使用をおすすめします。
では、具体的に二つの方法の手順を紹介していきます。
TOC+を使って目次を表示させる方法
まずはワードプレスの管理画面で、プラグインの新規追加から、「TOC」と検索し、インストールします。
インストールし終わったら、有効化のボタンを押してプラグインを有効化させます。
有効化させたら設定にある、「TOC+設定」を開きましょう。
基本的に以下のように設定すれば大丈夫です。
これで、保存ボタンを押すと、自動的に全記事に目次が表示されます。
HTMLで手動で目次を表示させる方法
投稿ページの
「タグ」→「その他のパーツ」→「目次(カスタム)」のボタンを押します。
次のようなものが表示されます。
ここから手動でHTMLを書き加えていきます。
目次を見出しにリンクさせる
HTMLを書くので、ビジュアルモードからテキストモードに切り替えます。
以下のようなコードが表示されているはずです。
今、次のようなh2見出しが三つある記事だとしましょう。
これに合わせて、上のコードを以下のように書き換えます。
変更前
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
変更後
<li><a href="#1">見出し1</a></li>
<li><a href="#2">見出し2</a></li>
<li><a href="#3">見出し3</a></li>
これで見出し側のコードの書き換えは完了です。
目次側のコードを書き加える
次は記事の本文中の見出し側のコードに書き加えます
テキストモードに切り替えると、見出し部分は次のようになっています。
ここを書き換えていきます。
変更前
<h2>見出し1</h2>
<h2>見出し2</h2>
<h2>見出し3</h2>
変更後
<h2 id="1">見出し1</h2>
<h2 id="2">見出し1</h2>
<h2 id="3">見出し1</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がおすすめ【初心者でも使いやすい】