モバイル端末からのアクセスが増えている昨今、ユーザビリティを考慮してサイドバーにタブメニューを導入するサイトが増えています。今回は、そんなタブメニューをおしゃれにカスタマイズする方法をご紹介！もちろんレスポンシブにも対応済みです。
はじめに
このカスタマイズは、はてなブログのテンプレート「Blank」を使用し、サイドバーのモジュールをタブメニューにするものです。導入に際し、参考にさせていただいたのはこちらの記事。
はてなブログで複数のサイドバーモジュールをタブメニューにして回遊率アップを狙うカスタマイズ – Yukihy Life
上記サイトを参考にHTML、jQueryを追加し、CSSをカスタマイズするとこのようなタブメニューが完成します。
全体
拡大
それでは、このタブメニューの導入方法を説明していきます。
１、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>
その後、この「タブメニュー」モジュールをサイドバーの一番上に置き、注目記事・最新記事などの他モジュールも、以下の順番に並び替えておきます。実際の編集画面ではこのような表示になりますね。
２、タブメニューの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>３、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;
}
線の太さを変更したいときは、
width: calc(100% / 5 - 1px);
の
1px
部分を変更してくださいね。
borderの種類や背景色を変えたり、「人気・最新」といった項目名をウェブアイコンにするなど、色々アレンジができるタブメニュー。サイトの雰囲気に合わせてデザインをカスタマイズしてみると、よりオリジナリティが出て面白いですよ！
