[記事公開日]2017/02/25
[最終更新日]2018/12/12

WordPress 目次の作り方とその目次の場所へ飛ばす方法

今回は「目次の作成方法」「目次に対応するアンカーを設定する方法」をご紹介します。

 

※ここでは見出し「hタグ」は使用していません。分かりやすくするためです。

 

↓試しに押してみてください♪

 

(1)目次のデザインを考える
「wordpress 目次 デザイン」など適当に検索するとサンプルがヒットします。
「サルワカ」が一番分かりやすいかも?

 

今回は水色っぽいものにしました。

目次
(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>

が書いてあるところに飛びます。

 

以上です。

 

yamatunes.net