記事の内容を把握しやすいよう、ブログ記事内に目次を導入することにしました。
このブログはWordPressのカスタマイズの練習を兼ねて運営しているので、プラグインを使用せずコードを書いて自作してみます。
実際に作成した目次がこちら↓
WordPressでの目次の作り方
HTMLを編集する必要があるため、テキストエディタを使用。
今回はHTMLに直接スタイルを記述しました。
実際のコード
目次部分
<div style="border: 1px solid #ccc; padding: 25px; display: inline-block;">
<p style="text-align: center; margin: 0;">◾️目次</p>
<ul style="list-style: none; padding-left: 0; margin: 15px 0;">
<li><a href="#anker1">WordPressでの目次の作り方</a>
<ul style="list-style: none;">
<li><a href="#anker11">実際のコード</a></li>
</ul>
</li>
<li><a href="#anker2">今後やりたいこと</a></li>
</ul>
</div>
見出し部分
<h2 id="anker1">WordPressでの目次の作り方</h2>
小見出し部分は、
<h3 id="anker11">実際のコード</h3>
今後やりたいこと
今回は初めて導入したので装飾は簡素なものにして、HTMLに直接記述しました。
今後は
- クラスを指定してCSSファイルでスタイルを指定する
- 目次の内容の表示・非表示を切り替えられるようにする
やり方を調べて実践したいと思います。