はてなブログの目次に非表示ボタンを設置するスクリプトを紹介

f:id:nanana-blog:20190528220536j:plain

こんばんは。

nanana-blog管理人のナナナです。

ブログを訪問し記事を読んでいただきありがとうございます。

以前ブログの記事メニューの追加方法について紹介しました。

記事を書いていると気づかなかったのですが、記事の内容によっては

記事メニューが長くなってしまい、ブログ記事が見にくくなってしまうことが

あります。

良い方法がないか調べたところ、記事メニューを非表示にできるスクリプトを

発見しました。

他の方のブログを見ても、記事メニューを非表示できるボタンを付けている

ことが多く、参考になるサイトも多くありました。

本日はブログ記事メニューを表示させたり非表示させたりするボタンの

作成方法を紹介します。

表示／非表示ボタンの作成方法
最後に

表示／非表示ボタンの作成方法

ダッシュボード ⇒ デザイン ⇒ カスタマイズへ移動し、フッタに以下の

スクリプトを追記します。

f:id:nanana-blog:20190528214721j: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に

以下を追記します。

f:id:nanana-blog:20190528214732j:plain


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

以上でスクリプトの追記は完了です。

このスクリプトではjQueryというライブラリを読み込んで表示させている

ためボタンの表示が記事に比べて少し遅くなってしまいます。