脱.雇われサラリーマン

〜サラリーマン不労所得への道〜

はてなブログの目次を隠す方法

スポンサーリンク

スポンサーリンク

サラリーマンおすすめ副業はこちら

 ▼A8.net:初心者ブロガーは必ず登録ここちらから

▼ココナラ:あなたの得意分野を売ってみませんか? 

 

 

http://gahag.net/img/201607/17s/gahag-0106922798-1.jpg

 

今日ははてなブログのカスタマイズをしていきます。

 

こちらの記事はこんな人にオススメ

  • 目次が長くて整理して表示させたい!
  • よく見る目次隠すやつ私もやりたい!
  • とにかくはてなブログカスタマイズしたい

 

今日はいろんなブロガーの方がされている目次を隠すカスタマイズをやっていきたいと思います!!

目次が長いと記事全体の収まりがなくて、やってみたいと思っていたので早速実践です。

 

こちらの記事を参考にさせていただきました!!

 

www.yone-himajin.com

 

 

ヘッダタイトル下にコード挿入

手順は本当にシンプルです。

まず一つ目は [デザイン] - [ヘッダ] - [タイトル下] にこのコードを入れます。

 

□設定場所

f:id:daisuke6106-0909:20180925173202p: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にコード挿入

次は [デザイン] - [デザインCSS] にこれらのコードを入れます。

 

□設定場所 

f:id:daisuke6106-0909:20180925173258p:plain

 

□コード

  .table-of-contents{
    display:none
  }

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

 

なんと、これで終わりです!!

 

 

☆使用前

f:id:daisuke6106-0909:20180925172731p:plain

 

☆使用後

f:id:daisuke6106-0909:20180925172759p:plain

 

だいぶすっきりしますよね!!

 

最後に

このカスタマイズは所用時間1分です!

一から調べるとなかなかわからないので、本当にこういうカスタマイズの記事を載せてくださっている方には感謝しかありませんね。

 

本当に簡単にできるので一度お試しあれ( ^ω^ )

 

☆こんな記事もあるよ

 

www.sukeblog.com