ブログ記事に目次(ページ内リンク)を簡単に作る方法

いろんなブログを読んで再度訪問した時、記事内に目的の部分まで飛べる見出しがあると便利だなと思っていました。

なので今回、ブログ記事へのアクセスしやすさや全体像を把握しやすいようにするため、記事の項目に対して目次(見出し)を付ける方法をご紹介します。

• 目次作成のコード

基本的な目次を付けるコードは次の通りです。

ただコードだけでは分かりにくい部分があるので説明も少し付け足しています。

<h3 id="mokuji">目次</h3><br> <!-- 目次としての戻り先 -->
・<a href="#title1">項目1</a><br> <!-- クリックすると各項目に対してジャンプ -->
・<a href="#title2">項目2</a><br> <!-- <br>は改行 -->
・<a href="#title3">項目3</a><br>
・<a href="#title4">項目4</a><br>
・<a href="#title5">項目5</a><br>
・<a href="#title6">項目6</a><br>
・<a href="#title7">項目7</a><br>
・<a href="#title8">項目8</a><br>
・<a href="#title9">項目9</a><br>
<hr size="2" /><br> <!-- 横線表示 -->
<h3 id="title1">■項目1</h3><br>   <!-- 上の各目次からのジャンプ先 -->
・<a href="#mokuji">目次にもどる</a><br>   <!-- 最初の目次に戻る -->
<br>
<h3 id="title2">■項目2</h3><br>
・<a href="#mokuji">目次にもどる</a><br>
<br>
<h3 id="title3">■項目3</h3><br>
・<a href="#mokuji">目次にもどる</a><br>
<br>
<h3 id="title4">■項目4</h3><br>
・<a href="#mokuji">目次にもどる</a><br>
<br>
<h3 id="title5">■項目5</h3><br>
・<a href="#mokuji">目次にもどる</a><br>
<br>
<h3 id="title6">■項目6</h3><br>
・<a href="#mokuji">目次にもどる</a><br>
<br>
<h3 id="title7">■項目7</h3><br>
・<a href="#mokuji">目次にもどる</a><br>
<br>
<h3 id="title8">■項目8</h3><br>
・<a href="#mokuji">目次にもどる</a><br>
<br>
 <h3 id="title9">■項目9</h3><br>
 ・<a href="#mokuji">目次にもどる</a>

• 実際の目次表示

上記のコードをブログに貼り付けると、以下のようにページ内リンクが表示されて便利です。
※項目はCSSで装飾していますので、ブログのCSSデザインよって変わります。
※以下の折りたたみ目次はプラグインで作成しているため、この記事とは無関係となります。

目次

　・項目1
　・項目2
　・項目3
　・項目4
　・項目5
　・項目6
　・目次7
　・目次8
　・目次9

---

■項目1

・目次にもどる

■項目2

・目次にもどる

■項目3

・目次にもどる

■項目4

・目次にもどる

■項目5

・目次にもどる

■項目6

・目次にもどる

■項目7

・目次にもどる

■項目8

・目次にもどる

■項目9

・目次にもどる

以上でブログに目次(ページ内リンク)が表示できるようになります。