記事のボリュームが大きいとき、目次があると、記事の概要がすぐにわかります。

今回は、プラグインを使わずに目次を作る方法を解説していきます。


目次の作り方

説明の前に下のリンクをクリックしてみてください。

目次

目次

すると太字の「目次」まで移動したと思います。

目次と書かれたリンクをHTMLで表示すると、<a href=”#mokuji”>目次</a>

そして、太字のHTMLは<b id=”mokuji”>目次</b>です。

このように、“#mokuji1”が目印になっています。

ちなみに、この””の間の文字は、基本的に何でもかまいません。

ですので、

<a href=”#1″>#1</a>(#を忘れずに!)

<b id=”1″>目次</b>

でもいいですし、日本語でもOKです。

ひとつ注意点として、ダブルクォーテーション(“”)は半角でないと指定した位置まで移動させることができません。

使用例

<h3 id="目次"></h3>
<ul>
<li><a href="#mokuji1">見出し1</a></li>
<li><a href="#mokuji2">見出し2</a></li>
<li><a href="#mokuji3">見出し3</a></li>
</ul>

<h3 id="mokuji1">見出し1</h3>
<h3 id="mokuji2">見出し2</h3>
<h3 id="mokuji3">見出し3</h3>

<a href="#目次">目次に戻る</a>

この使用例はこの記事で使ったものを少し変えています。

HTMLが苦手な方は、上記のコードをコピペして使ってみてください。

プラグインを使うなら

プラグインを使いすぎるとサイトが重くなるので、できればプラグインを使わずに目次を作る方がいいのですが、手動が面倒な方は、「Table of Contents Plus」といプラグインがおすすめです。

有効化すると、「設定」のところに、「目次+」が追加されていると思います。

s_%e3%83%af%e3%83%bc%e3%83%89%e3%83%97%e3%83%ac%e3%82%b9%e3%80%80%e7%9b%ae%e6%ac%a1%e3%80%80%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3

「目次+」をクリックすると、上のような画面になります。

目次を自動挿入させるためには、「以下のコンテンツタイプを自動挿入」のところにある「post」にチェックを入れる必要があります。

目次の位置は、「最初見出しの前(デフォルト)」「最後の見出しの後」「トップ」「ボトム」の4つから選べます。

特にこだわりがなければ、目次の位置はデフォルトのままが無難です。

この記事が気に入ったら
いいね ! しよう

Twitter で