電脳ヒモ

~Lord of the Strings~

【2分でできる!】はてなブログで目次を開閉式にカスタマイズする方法

f:id:at25250410:20181215142108p:plain

とりあえずコードだけ見たいというかたはこちら!

はてなブログでは、"[:contents]"を記述するだけで、見出しにした文字を勝手に目次としてまとめてくれますよね。

ですが、見出しが沢山ある記事だと目次が長くなりすぎて逆に見づらくなってしまいます。

なので今回は下の画像ように目次を開閉式にするカスタマズをしてみたので紹介していきます。

f:id:at25250410:20181215140515p:plain
f:id:at25250410:20181215140454p:plain

参考にしたのは以下の2記事です。

www.yukihy.com

www.otona-hattatsushougai-challenge.com

どういうわけか、僕の場合ですと最初の記事のコードを書いても目次が表示されませんでした。そこで解決策を探して2記事目の方法を取り入れたら無事目次が表示されてカスタマイズに成功しました。

最終的にちゃんと動作したコードを下に掲載します。

目次を開閉式に切り替えるコード

記述するのはフッダーのHTML部分とCSS部分の2箇所です。
f:id:at25250410:20181215141543p:plain

フッダー部分に記載コード

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
//クリックすると表示される目次
window.onload = 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("[表示]")
        };
    });
    
    $("a[href^='#']").click(function() {
      var myHref= $(this).attr("href");
      var Target = $(myHref).offset().top - 30;
      $('body,html').animate({scrollTop: Target}, "slow");
      return false;
   });
}
</script>

CSS部分に記載するコード

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

以上の2点で僕は正しく動作しました。CSSの部分はお好みで変えてみてください。