読者です 読者をやめる 読者になる 読者になる

よなかのはなし

LifeHacks And Hello!Project Blog

サイドバーのタブメニューをインデックス風デザインにするCSS

カスタマイズ はてなブログ

f:id:hiroseyonaka:20170314173920j:plain

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

はじめに

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

 

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

 

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

 

全体

f:id:hiroseyonaka:20170314112701j:plain

 

拡大

f:id:hiroseyonaka:20170314102804j:plain

 

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

 

1、HTMLを追加する

まずはタブ項目の元となる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>


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

 

f:id:hiroseyonaka:20161225100839j:plain

 

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つの項目がきちんと横並びになっているか確認してくださいね。

 

完成形

f:id:hiroseyonaka:20170314112701j:plain

 

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

 

f:id:hiroseyonaka:20170314105608j:plain

 

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