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

はてなブログロゴアイキャッチ

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

SPONSORED LINK

はじめに

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

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

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

全体

1インデックス風タブメニュー

拡大

2インデックス風タブメニュー

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

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>

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

3インデックス風タブメニュー

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を追加すれば、タブメニューの完成。5つの項目がきちんと横並びになっているか確認してくださいね。

完成形

4インデックス風タブメニュー

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

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

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

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

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

5インデックス風タブメニュー

インデックス風にする場合は、上記の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の種類や背景色を変えたり、「人気・最新」といった項目名をウェブアイコンにするなど、色々アレンジができるタブメニュー。サイトの雰囲気に合わせてデザインをカスタマイズしてみると、よりオリジナリティが出て面白いですよ!

SPONSORED LINK

あわせて読みたい



トップへ戻る