とりあえずコードだけ見たいというかたはこちら！
はてなブログでは、"[:contents]"を記述するだけで、見出しにした文字を勝手に目次としてまとめてくれますよね。
ですが、見出しが沢山ある記事だと目次が長くなりすぎて逆に見づらくなってしまいます。
なので今回は下の画像ように目次を開閉式にするカスタマズをしてみたので紹介していきます。
そもそも目次は必要なの？
ブログに目次があると、一発で読みたい記事に辿り着くことができます。
全部の記事を読んでほしいところですが、読者にとってはあると便利で、離脱する確率を低くすることが可能です。
ぜひ、ブログに目次を設置しておきたいですね。
ただ、目次はあると便利ですが、時にはジャマになることも。
とくに見出しが多いと目次も長くなって、記事を読むまでに疲弊してしまいます。
ブログを読む前に閉じられてしまう原因になるかもしれません。
とはいえ、やはり目次はあったほうが便利です。
そこで、開閉式の目次を設置してみましょう。
はてなブログの目次を開閉式にする方法
それでは、はてなブログの目次を開閉式にする方法をご紹介します。
ちなみに、開閉式にするとこのようになります。
少しわかりづらいですが、目次の横に【表示】という文字が現れ、押すと目次が展開されます。
【隠す】を押すと目次が非表示になります。
今回、参考にしたのは以下の記事です。
どういうわけか、僕の場合ですと最初の記事のコードを書いても目次が表示されませんでした。
そこで解決策を探して試行錯誤していたら、無事目次が表示されてカスタマイズに成功しました。
最終的にちゃんと動作したコードを下に掲載します。
目次を開閉式に切り替えるコード
記述するのはフッダーのHTML部分とCSS部分の2箇所です。
フッダー部分に記載コード
<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の部分はお好みで変えてみてください。
貼り付けるだけなので簡単ですよ。
まとめ
はてなブログに開閉式の目次を取り入れたらかなりスッキリした見た目になりました。
現在、はてなブログに目次を設置して入れ方はぜひ参考にしてみてくださいね。
