【はてなブログ】 目次のカスタマイズの仕方

公式の目次機能

[:contents]

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

はてなブログの場合、標準で目次機能があります。それを使うのが便利です。使い方などは上記のURLで確認してください。

当記事では、標準の目次機能を少しだけカスタマイズする方法を書いてあります。必要なものだけコピペしたら導入できます。

タイトルをつけて、枠線で囲む方法

.table-of-contents:before{
    content: "目次";
    font-size: 120%;
    font-weight: bold;
}
.table-of-contents{
    border: 1px solid #333333; 
    border-radius: 8px;
    padding-bottom:10px;
}

「デザイン」-＞「カスタマイズ」-＞「デザインCSS」の部分に上記を貼り付けます。
前半が「目次」というタイトルを挿入している部分です。後半のブロックが、目次に角丸の囲み枠を付けてる部分です。好みに応じて変更してくださいね。

閉じる/開く機能を付ける方法

Wordpressとかでよく見かける「開く」「閉じる」機能です。下記のスクリプトを導入するだけで、実現はできます。個人的にはあまり必要性がない気はしますけどね。

<script>
$(function(){
    $(".table-of-contents > li:first-child").before('<span style="margin-left:20px;" class="toc-toggle">[<a href="#">閉じる</a>]</span>');

    $(".toc-toggle a").click(function(){
        if($(this).text() == '閉じる'){
            $(this).text('開く');
            $(".table-of-contents li").hide();
            return false;
        }else{
            $(this).text('閉じる');
            $(".table-of-contents li").show();
            return false;
        }
    });
});
</script>

※jQueryを使ってますので、組み込んでない人は別途組み込んでください。

「デザイン」-＞「カスタマイズ」-＞「フッタ」のところに、上記のスクリプトを貼り付けでください。

ページ表示時に、閉じた状態にする

<script>
$(function(){
    $(".toc-toggle a").text('開く');
    $(".table-of-contents li").hide();
});
</script>

標準では、目次が開いた状態なのがダメだという場合は、上記のスクリプトを追加で導入してください。「デザイン」-＞「カスタマイズ」-＞「フッタ」に貼り付けるのは同じです。

記事単位でなくて、全記事そうなります。