CODE

【解説】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の代わりに違うコードを入れれば別の線になります。
下の表にまとめました。

solid1本線
double2本線
groove窪んだ線
ridge隆起した線
inset枠線で囲まれたブロックが立体的に窪んだ感じ
outset枠線で囲まれたブロックが立体的に隆起した感じ
dotted点線
none枠線が表示されなくなる

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

大きさ

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

「目次」の位置

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

箇条書きの点

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

disc黒丸
circle白丸
square黒四角
lower-romanローマ数字(小文字)
upper-romanローマ数字(大文字)
decimal算用数字
decimal-leading-zero先頭に0が付いた算用数字
cjk-ideographic漢数字

その他

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

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





-CODE

Copyright© DaigoDiary , 2020 All Rights Reserved Powered by STINGER.