今回は「目次の作成方法」「目次に対応するアンカーを設定する方法」をご紹介します。
※ここでは見出し「hタグ」は使用していません。分かりやすくするためです。
↓試しに押してみてください♪
（１）目次のデザインを考える
「wordpress 目次 デザイン」など適当に検索するとサンプルがヒットします。
「サルワカ」が一番分かりやすいかも？
今回は水色っぽいものにしました。
目次
（１）
（２）
（３）
（１）
（２）
（３）
（２）目次のデザインをスタイルシートに書く
上記のデザインであれば、以下をスタイルシートの一番下に貼り付けます。
.box27 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #62c1ce;
}
.box27 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 17px;
background: #62c1ce;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box27 p {
margin: 0;
padding: 0;
}
（３）記事内で目次を設置する
HTMLが書けるところ（ビジュアルではなく、テキストのページ）で、以下を入力します。
目次なので、もちろん上の方に書きます。「a1」「a2」「a3」「a4」というのは好きなフレーズにしていただいて構いません。ただし、アフファベットから始めるという決まりがあります。つまり、「01」はダメです。「a01」なら問題ないです。
<div class="box27"><span class="box-title">目次</span> <a href="#a1">（１）目次のデザインを考える</a> <a href="#a2">（２）目次のデザインをスタイルシートに書く</a> <a href="#a3">（３）記事内で目次のコードを記述する</a> <a href="#a4">（４）飛ばしたいところにアンカーを設置する</a> </div>
（４）飛ばしたいところにアンカーを設置する
HTMLが書けるところ（ビジュアルではなく、テキストのページ）で、以下のように入力します。
<a id="a1">（１）目次のデザインを考える</a> <a id="a2">（２）目次のデザインをスタイルシートに書く</a> <a id="a3">（３）記事内で目次のコードを記述する</a> <a id="a4">（４）飛ばしたいところにアンカーを設置する</a>
つまり、目次で（１）をクリックすると、
<a id="a1">（１）目次のデザインを考える</a>
が書いてあるところに飛びます。
なお、Hタグを使用する場合は、このように書きます。
<a id="a1"></a><h3>（１）◯◯とは？</h3>
以上です。
yamatunes.net
