【解説】WordPressブログにプラグインなしで目次を設置する方法【htmlのみ】

僕はWordPressを使ってブログをやっているわけですが、他のブログを見ると多くのブログが目次を設置しているに気づいてしまったのです！

色々調べていると、目次を設置できるプラグインがあるらしい。
けれども、プラグインを入れすぎるとページの表示速度が遅くなってしまうとか。

そういうわけで、目次はできるだけコードで直接設置した方がいいらしい。

なので今回は僕が実際に使っている目次のコードを共有したいと思います。
↓みたいなやつです。

目次のコード

これが僕が使っている目次のコードです。
「コードだけ分かればいい」って人はコピペして使ってください。

<div style="background-color:#EDF7FF;border-style:dashed;border-width:1px;width:200px;margin-top:55px;margin-bottom:20px">
<p style="margin:5px;text-align: center"><b>目次</b></p>
<ul style="list-style-type: none;margin:0;padding:0;padding-left:10px">
<li style="padding:0"><a href="#1">###</a></li>
<li style="padding:0"><a href="#2">###</a></li>
<li style="padding:0"><a href="#3">###</a></li>
<li style="padding:0"><a href="#4">###</a></li>
<li style="padding:0"><a href="#5">###</a></li>
<li style="padding:0"><a href="#6">###</a></li>
<li style="padding:0"><a href="#7">###</a></li>
</ul>
</div>

これを表示させるとこんな感じになります。

目次コードの設置方法

コードの設置はWordPressのコードエディターで設置します。

編集画面でCtrl+Shift+Alt+Mを同時に押すと、コードエディターに切り替わります。そしたら、目次を設置したい位置にコードをコピペするだけです。

もしくは、記事の編集画面右上の︙をクリックしてもコードエディターに切り替えられます。

目次コードの解説

ここからは目次のデザインやリンク設定の解説をしていきます。

リンク設定

目次の文章をクリックすると該当場所に飛びますが、飛ぶ先を指定するのがコードの<a href="">の部分です。

本文中のタグ、<h2>や<p>に<h2 id="1">のようにidを設定します。
そして<a href="#1">とすれば目次の文章をクリックすれば設定したidのところに飛びます。
自分のページの特定の場所にリンクを張っているわけです。

ただid="1"としたらhref="#1"のように、#をつける必要があるので注意してください。

デザイン

色

デザインはコードのstyle=""で変更できます。

background_color: が目次の背景の色です。デフォルトでは水色(#EDF7FF) になっていますが好きな色を入力すれば変更できます。
色のコードはHTMLカラーコードで入手できます。

枠線

目次のブロックの枠線はborder-style: で変更できます。デフォルトでは破線(dashed)になっています。
dashedの代わりに違うコードを入れれば別の線になります。
下の表にまとめました。

枠線の太さはborder-width: で変更できます。
デフォルトでは1pxになっています。

大きさ

目次の大きさ(幅)はwidth: で変更できます。
デフォルトでは200pxになっています。

「目次」の位置

デフォルトでは「目次」の文字は中央に配置されていますが、これはtext-align: で変更できます。
右揃えにしたければright、左揃えにしたければleftとすればOKです。

箇条書きの点

目次の文章の文頭に点を付けたければ、list-style-type: noneを変更してください。
デザインは下の表を参照。

その他

項目を増やしたり減らしたりするには、<li>を増やしたり減らしたりしてください。
あと、marginやpaddingはブロックの位置や空白の大きさを指定しています。

他にも、CSSを色々いじるともっと多様なデザインができるはず！