【はてなブログカスタマイズ】タブメニュー

こんにちは、Ogawa(@hamidasiblog)です。

このたびサイトデザインを一新しました。

その際に行ったカスタマイズを備忘録として記録します。　　

タブメニュー

f:id:tinger02:20170813051702p:plain

カテゴリー欄に「カスタムHTML」を作成「カスタムHTML」は、タイトルは空欄にして、中には以下のことを記述します。

<span class="tab active">人気</span>
<span class="tab">最新</span>
<span class="tab">カテゴリ</span>
<span class="tab">月別</span>

タブメニューのjQuery

フッターに貼り付け

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--サイドバータブメニュー-->
<script>
$(function(){
$(".hatena-module-entries-access-ranking,.hatena-module-recent-entries,.hatena-module-category,.hatena-module-archive").addClass("module");
$(".hatena-module-title2").parents(".hatena-module-html").css("margin-bottom",0);
var Module = $(".module");
Module.hide();
Module.first().show();
Module.find(".hatena-module-title").hide();
$(".tab").click(function(){
var index = $(this).index();
$(".tab").removeClass("active");
$(this).addClass("active");
$(Module).hide();
$(Module).eq(index).show();
});
});
</script>
<script>

デザインCSSに貼り付け

/*サイドバータブメニュー*/
.tab{
display: inline-block;
cursor: pointer;
text-align:center;
border-bottom: 1px solid #333;
font-weight: normal;
width: -webkit-calc(100% / 4 - 1px);
width: -moz-calc(100% / 4 - 1px);
width: calc(100% / 4 - 1px);
padding: 10px 0px;
margin-bottom:20px;
float: left;
color: #999;
}
.hatena-module ul {
margin-bottom: 0;
clear: both;
}
.active{
background:#fff;
color:#333;
font-weight:bold;
border:1px solid #333;
border-bottom:none;
}