今回は「目次の作成方法」「目次に対応するアンカーを設定する方法」をご紹介します。
※ここでは見出し「hタグ」は使用していません。分かりやすくするためです。
↓試しに押してみてください♪
(1)目次のデザインを考える
「wordpress 目次 デザイン」など適当に検索するとサンプルがヒットします。
「サルワカ」が一番分かりやすいかも?
今回は水色っぽいものにしました。
目次
(1)
(2)
(3)
(1)
(2)
(3)
(2)目次のデザインをスタイルシートに書く
上記のデザインであれば、以下をスタイルシートの一番下に貼り付けます。
.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; }
(3)記事内で目次を設置する
HTMLが書けるところ(ビジュアルではなく、テキストのページ)で、以下を入力します。
目次なので、もちろん上の方に書きます。「a1」「a2」「a3」「a4」というのは好きなフレーズにしていただいて構いません。ただし、アフファベットから始めるという決まりがあります。つまり、「01」はダメです。「a01」なら問題ないです。
<div class="box27"><span class="box-title">目次</span> <a href="#a1">(1)目次のデザインを考える</a> <a href="#a2">(2)目次のデザインをスタイルシートに書く</a> <a href="#a3">(3)記事内で目次のコードを記述する</a> <a href="#a4">(4)飛ばしたいところにアンカーを設置する</a> </div>
(4)飛ばしたいところにアンカーを設置する
HTMLが書けるところ(ビジュアルではなく、テキストのページ)で、以下のように入力します。
<a id="a1">(1)目次のデザインを考える</a> <a id="a2">(2)目次のデザインをスタイルシートに書く</a> <a id="a3">(3)記事内で目次のコードを記述する</a> <a id="a4">(4)飛ばしたいところにアンカーを設置する</a>
つまり、目次で(1)をクリックすると、
<a id="a1">(1)目次のデザインを考える</a>
が書いてあるところに飛びます。
なお、Hタグを使用する場合は、このように書きます。
<a id="a1"></a><h3>(1)◯◯とは?</h3>
以上です。
yamatunes.net