【はてなブログ】目次を表示/非表示する方法

はてなブログ Perfect GuideBook

目次を表示/非表示する方法

ヘッダ若しくはフッダのHTMLに以下のJavaScriptを記述します。最近はbodyタグの末尾に記述するのが主流らしいですね。とりあえず、今回はフッダに記述しました。

JavaScript

// jQuery読み込み
<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>

CSS

デザインCSSに以下のCSSを記述します。

.table-of-contents{
  display:none
}

.show-area{
  cursor: pointer;
  color: #47a1e5
}

参考

• http://www.bombkun.com/entry/2017/01/28/073126

• はてなブログカスタマイズ 目次 表示/非表示ボタンの設置 - 暇を持て余したよねのブログ

• はてなブログ Perfect GuideBook

はてなブログ Perfect GuideBook