はてなブログカスタマイズ　目次 表示/非表示ボタンの設置

PC

デザイン-ヘッダ-タイトル下にコードをコピペします。

下のソースをコピペしてください。

<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に下にコードをコピペします。

  .table-of-contents{
display:none
}
.show-area{
cursor: pointer;
color: #47a1e5
}

これで目次 表示/非表示ボタンが出来ました。
デフォルトでは目次は非表示になっています。

ボタンを押すと目次が表示されます。

スマホ

スマホ版では
デザイン-ヘッダ-タイトル下
にコードをコピペします。

<style type="text/css">
.show-area{
color: #47a1e5
}
</style>
<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>

最後に

カスタマイズは楽しいですね。
今後カスタマイズの記事も増やしていきたいです。