はてなブログのタブメニューをインデックス風デザインにするCSS

モバイル端末からのアクセスが増えている昨今、ユーザビリティを考慮してサイドバーにタブメニューを導入するサイトが増えています。今回は、そんなタブメニューをおしゃれにカスタマイズする方法をご紹介！もちろんレスポンシブにも対応済みです。

このカスタマイズは、はてなブログのテンプレート「Blank」を使用し、サイドバーのモジュールをタブメニューにするものです。導入に際し、参考にさせていただいたのはこちらの記事。

はてなブログで複数のサイドバーモジュールをタブメニューにして回遊率アップを狙うカスタマイズ – Yukihy Life

上記サイトを参考にHTML、jQueryを追加し、CSSをカスタマイズするとこのようなタブメニューが完成します。

全体

拡大

それでは、このタブメニューの導入方法を説明していきます。

1.HTMLを追加する
2.タブメニューのjQueryを追加する
3.CSSでスタイリング
【応用】インデックス風のタブデザインを作る

1.HTMLを追加する

まずはタブ項目の元となるHTMLコードを追加します。

はてなブログのデザイン設定から、スパナマーク→サイドバー→モジュール（HTML）を追加し、以下のコードを貼り付けて「適用」をクリック。このHTMLモジュールには、わかりやすいよう「タブメニュー」という名前をつけておきましょう。

<span class="tab active">人気</span>
<span class="tab">最新</span>
<span class="tab">B!</span>
<span class="tab">タグ</span>
<span class="tab">月別</span>

その後、この「タブメニュー」モジュールをサイドバーの一番上に置き、注目記事・最新記事などの他モジュールも、以下の順番に並び替えておきます。実際の編集画面ではこのような表示になりますね。

2.タブメニューのjQueryを追加する

次に、タブを切り替えるためのjQueryをフッターに追加します。今回は注目記事・最新記事・はてブ順注目記事・カテゴリー・月別のモジュールをタブメニューにするので、以下のコードになります。

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

3.CSSでスタイリング

スパナマーク→デザインCSSを開き、以下のコードを貼り付けてください。

/*サイドバータブメニュー*/
.tab{
display: inline-block;
cursor: pointer;
text-align:center;
border-bottom: 1px solid #ebebeb;
font-size:1em;
font-weight: normal;
width: -webkit-calc(100% / 5);
width: -moz-calc(100% / 5);
width: calc(100% / 5);
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-bottom:1px solid #333;
}

当ブログのタブメニューは、アクティブになっているタブに太字・下線を指定し、その他タブはグレーアウトさせています。国内外のサイトで多く導入されているオーソドックスなデザインなので、直感的に操作しやすかと思い、このようにしました。このCSSを追加すれば、タブメニューの完成。５つの項目がきちんと横並びになっているか確認してくださいね。

完成形

今回はタブの数を５つにしましたが、タブの数を変更したいときは、widthの部分を修正してください。タブの数を３つにするなら100% / 3、６つにするなら100% / 6。clac()を使うことで要素（今回でいうタブ部分）を自動調節し、レスポンシブ対応させることができます。

例(※タブを３つにする場合)

/*サイドバータブメニュー*/
.tab{
width: -webkit-calc(100% / 3);
width: -moz-calc(100% / 3);
width: calc(100% / 3);
}

【応用】インデックス風のタブデザインを作る

上記CSSを応用すれば、アクティブになっているタブに枠をつけ、インデックス風にすることも可能。タブメニューをインデックス風デザインにするとこのような見た目になり、「クリックできるメニュー」であると視覚的にも分かりやすくなります。

インデックス風にする場合は、上記のHTML・jQueryを追加したあと、以下のコードををデザインCSSの中に追加してください。

/*サイドバータブメニュー*/
.tab{
display: inline-block;
cursor: pointer;
text-align:center;
border-bottom: 1px solid #333;
font-size:1em;
font-weight: normal;
width: -webkit-calc(100% / 5 - 1px);
width: -moz-calc(100% / 5 - 1px);
width: calc(100% / 5 - 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;
}

線の太さを変更したいときは、