ブログの記事が長い場合、冒頭に目次を作成すると見やすく効果的です。
きれいな目次を設置しているブログをたくさん見かけますが、仕組みは簡単、リストを使います。
基本のコード
早速ですが、基本のコードを載せてみたいと思います。
<ul>
<li><a href="#A"> タイトル① </a></li>
・<a href="#A-1"> サブタイトル① </a>
<li><a href="#B"> タイトル② </a></li>
・<a href="#B-1"> サブタイトル② </a>
</ul> 「#A」「#A-1」などの部分はご自身のわかりやすい文字にして大丈夫です
「サブタイトル」がない場合は、その行ごと消して問題ありません
記事に合わせ、必要な行数分を増やしてください
これを掲載してみると、 このように表示されます。
「見出し」と関連付ける
ただ、これだけでは「タイトル①」などの文字をクリックしても、何の変化も起こりません。
それぞれのタイトルの見出しとリンクさせる必要があります。
もう一度、目次のリストを作ってみます。
<ul>
<li><a href="#C"> タイトル① </a></li>
・<a href="#C-1"> サブタイトル① </a>
</ul>先ほど「#A」を使ってしまったので、便宜上今回は「#C」を使います
このようなリストを作ったら、各見出しにリンクさせるコードを入力します。
<a name="C"></a>
<h2> タイトル① </h2>
本文 本文 本文
<a name="C-1"></a>
<h3> サブタイトル① </h3>
本文 本文 本文「<a name=”C”></a>」と「<h2></h2>」などのタイトルの間は改行せず、同一行にしても問題ありません
これを掲載してみると…
このように目次から「<a name=”C”></a>」と記載した箇所まで飛ぶことができるようになります。
目次を装飾してみよう！
ただ、これでは目次が寂しすぎますね。
目次は「リスト」なので、cssで装飾することができます。
最初のコードの1行目に「class=”mokuji”」と付け足してみます。
<ul class="mokuji">
<li><a href="#A"> タイトル① </a></li>
・<a href="#A-1"> サブタイトル① </a>
<li><a href="#B"> タイトル② </a></li>
・<a href="#B-1"> サブタイトル② </a>
</ul>そして「子テーマ」のcssファイルに以下を追加します。
ul.mokuji {
border: 5px dotted #A3B745;
list-style-type: none;
margin-left: 5%;
margin-right: 5%;
padding: 1em 2em 2em 2em;
}
.mokuji li:before {
font-family: "Font Awesome 5 Free";
color: #666;
content: "\f14a";
margin-right: 0.5em;
}
ul.mokuji li {
margin-top: 1em;
}
ul.mokuji p {
margin-bottom: 0em;
}これは私が実際に使用しているcssなので、設定が不要な箇所は削除したり、色やサイズなどもお好みで変更してください
またこれも掲載してみると、 このように表示されます。
これでもまだまだ寂しいかもしれませんが、cssを活用し、オシャレな目次を作ってみてくださいね！
