ブログ運営

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

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

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

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

プラグイン「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がおすすめ【初心者でも使いやすい】

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

-ブログ運営
-,

Copyright© ほたぺこ情報局 , 2020 All Rights Reserved Powered by AFFINGER5.