はてなブログで目次を手動生成する方法

はてなブログでは、目次記法によって目次を自動生成することができます。*1
しかしながら目次記法によって自動生成される目次の仕様が気に入らない場合、手動で生成することもできます。

目次記法の仕様

本文中に[:contents]と記述することで、その場に目次が生成されます。
たとえば……

[:contents]

<h2 id="heading-a">A</h2>
<h2 id="heading-b">B</h2>
<h3 id="heading-b-a">a</h3>
<h3 id="heading-b-b">b</h3>
<h2 id="heading-c">C</h2>

本文がこのような場合、次のような目次が生成されます。

これは、HTMLとしては次のようになっています。

<ul class="table-of-contents">
    <li><a href="#heading-a">A</a></li>
    <li><a href="#heading-b">B</a><ul>
            <li><a href="#heading-b-a">a</a></li>
            <li><a href="#heading-b-b">b</a></li>
        </ul>
    </li>
    <li><a href="#heading-c">C</a></li>
</ul>

基本的には、本文中のすべての見出しが階層構造化されたものが生成されるようです。

目次を手動生成する

場合によっては、見出しレベル2までしか載せたくなかったり、特定の見出しのみを載せたいこともあるでしょう。
目次記法によって生成されるHTMLをもとにすれば、自分の好きなように見出しを生成することができます。
たとえば……

<ul class="table-of-contents">
    <li><a href="#heading-a">A</a></li>
    <li><a href="#heading-b">B</a></li>
</ul>

このようなHTMLからは、次のような目次が生成されます。

---

はてなブログ Perfect GuideBook

*1:記事中の見出しから目次を自動的に作成する「目次記法」を追加しました - はてなブログ開発ブログ