『目次』をカスタム！【表示】【隠す】機能を追加する方法

目次について

はてなブログの記事作成機能では元々から目次を簡単に作れるようになっていますが、みなさんは使っていますか？
「目次は付けた方がいい」「目次は付けない方がいい」賛否両論ありますが、記事内容・ジャンルで変わりますよね。どっちが正しいとかはないと思います。
私は１記事最低でも３０００文字を超えるように書いているのと、内容からして付ける派です。

目次のメリット

・記事タイトル・見出し・流れの統一感を見ることができ、作成者側にも優しい
・目次内容で記事全体のだいたいの内容が分かるので、求めている情報があるかすぐ確認できる
・Google（SEO）としても役立つ
・読みたい部分にすぐ飛べる（スクロールする手間が省略できる）
・出来るサイトって感じがする（個人的なイメージ）

目次のデメリット

・目次だけで記事内容を把握できるので、求めている記事じゃないと分かればすぐサイトから去ってしまう
・スマホだと目次だけで画面いっぱいになる場合もあるので、スクロールの手間が増える

こんな感じかな。

デメリットの最後、「スマホ画面いっぱいの目次」を解決するために
目次を最初は隠しておいて、【表示】ボタンをクリックすると目次内容が出てくるシステムにしたら目次を設置してもコンパクトにまとめることが出来ます。

デザイン

最初に表示されるのはこんな感じ

「目次　【表示】」だけなので幅もとらず、シンプルです。

【表示】ボタンをクリック（タップ）すると

下側に見出しが表示されて記事内容が分かります。
【隠す】ボタンをクリック（タップ）すると、またシンプル表示に戻ります。

参考にした記事

www.yukihy.com

私　お馴染みのゆきひーさんです。
ゆきひーさんの「カスタム実装図」は動画式で、どこがどう変化するのが一目瞭然ですごい分かりやすいです。
今回もお世話になっています。ありがとうございます。

設定方法

はてなブログサービスの無料版ユーザーでも行えるので安心してください。

手順①

こちらのコードをコピペ（コピー＜複製＞&ペースト＜貼り付け＞）します。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
//クリックすると表示される目次
$(function(){
    var $Contents = $(".table-of-contents")
    $($Contents).before('<span style="font-size: 150%; color: #333;">目次</span><p class="show-area">[表示]</p>');
    $(".show-area").click(function(){
        var $this = $(this);
        if($Contents.css('display') == 'none'){
            $Contents.slideDown(400),
            $this.text("[隠す]");
        }else{
            $Contents.slideUp(400),
            $this.text("[表示]")
        };
    });
});
</script>

ダッシュボード（管理画面）
　　↓
デザイン
　　↓
カスタマイズ（スパナマーク）
　　↓
フッタを選択します。
HTMLを記述する枠に貼り付けしてください。

手順②

次に調整です。
こちらのコードをコピペ（コピー＜複製＞&ペースト＜貼り付け＞）します。

.table-of-contents{
    display: none;
}
.show-area{
    display: inline-block;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 0;
    color: blue;
}