ボム君.com

プログラミングで世界を変えよう

はてなブログの目次に表示・非表示の切り替えボタンをつけたよ

はてなブログで長い記事を書いたりすると見出しが増えちゃって、目次まで長ーくなっちゃうこととかありませんか?

見出しを大量に使ったりしているとどうしても目次が長くなりますよね。長いと画面をスクロールしなきゃ本文が見えなかったりするので少し長さにうんざりしちゃうことがあります。

私もしょっちゅうどうにかならんかなぁとみていたんですが、最近ひとでさんのブログ記事を見てたら目次に表示・非表示ボタンがあるのに気付きました!
f:id:powerbombkun:20170128072642p:plain


記事が長くなると目次も長くなるので、目次のスクロールだけでもちょっと大変(汗)って時があるんですよね。

ということで私も表示・非表示ボタンを付けました。参考にしたのはこちらのサイト。↓
www.yone-himajin.com

ありがとうございます。

表示・非表示の切り替えボタン設置でやること

手順①:ヘッダのタイトル下にHTLM設定

f:id:powerbombkun:20170128071037p:plain
はてなブログのデザイン設定メニューからヘッダ-タイトル下(↑の場所)を選択し、↓のコードをコピペしてください。

<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に以下のコードをコピペ

f:id:powerbombkun:20170128071414p:plain
はてなブログのデザイン設定メニューからデザインCSS(↑の場所)を選択し↓のコードをコピペしてください。

  .table-of-contents{
    display:none
  }

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

設定するとどうなるか

非表示状態だとこうですが、↓

f:id:powerbombkun:20170128072130p:plain

表示するとこうなる。↓

f:id:powerbombkun:20170128071922p:plain

いい感じになりましたね。

以下のような人にはこの設定おすすめです。

  • 長い記事を書くので目次のスクロールがめんどい
  • はてなブログのカスタマイズをしたい!

特にスマホで記事を見る場合、画面が狭いので目次が長いとスクロールが大変だったりする場合も多いので、設定しときたいですね。

他にも目次のカスタマイズネタ書いているので興味ある方はどうぞ。↓

合わせて読みたい

はてなブログの目次のデザインを少しカスタマイズしたよ