はてなブログの目次をちょっとだけカスタマイズ

本日は、はてなブログのデザインについてちょっとカスタマイズを実施したので、その方法をご紹介したいと思います。

今回実施したこと

実施したのは以下の２つとなります。

はじめ非表示で、「目次」をクリックすると表示する
クリックするとスムーススクロールする

はじめ非表示で、「目次」をクリックすると表示する

コーディングするのは、CSSとjavascriptになります。

はじめにCSSのコーディングです。

設定はデザインCSSに行います。
内容は以下の2つとなります。

目次を表示/非表示するための[表示/隠す]のトグルの追加処理
デフォルトで目次を非表示にする処理

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

次にjavascriptを記載します。記載するところはフッターが良いですね。

内容は以下の2つでとってもシンプルです。

目次(Classがtable-of-contents)の要素の前に表示/非表示をトグルさせるための要素を追加する
追加したトグルをクリックしたときの動作(トグルも[表示]と[隠す]を切り替える)

実際のコードは以下となります。

<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>

クリックするとスムーススクロールする

こちらはjavascriptのみとなります。
jQueryで記載をします。
目次の要素が <a href="# で始まることを利用してクリックしたときに遷移先までスクロールのアニメーションするように処理を入れています。
ポイントは遷移先の場所。-30を入れることでリンク先がブラウザのトップから少ししたに下がるので見やすくなります。

//スムーズスクロール
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$("a[href^='#']").click(function() {
var myHref= $(this).attr("href");
var Target = $(myHref).offset().top - 30;
$('body,html').animate({scrollTop: Target}, "slow");
return false;
});
});
</script>