最近レスポンシブサイトでよく見かけるタブメニュー。今回はこのタブメニューを吹き出し風にするカスタマイズをご紹介します。
はじめに
このブログは、はてなブログのテンプレート「Blank」を使用し、サイドバーにタブメニューを表示させています。導入に際し、参考にさせていただいたのはこちらの記事。
はてなブログで複数のサイドバーモジュールをタブメニューにして回遊率アップを狙うカスタマイズ – Yukihy Life
上記サイトを参考にHTML、jQueryを追加し、CSSをカスタマイズするとこのような吹き出しのタブメニューが完成します。
タブの項目を変更したい場合や、他のカスタマイズなど細かい設定については上記の参考元サイトをご覧ください。今回はこのブログに導入している、
- 注目記事１（アクセス順）
- 最新記事
- 注目記事２（はてなブックマーク順）
- カテゴリー
- 月別アーカイブ
のモジュールで吹き出し風のタブメニューを作っていきます。
１、HTMLを追加する
まずはHTMLコードを追加します。
はてなブログのデザイン設定から、スパナマーク→サイドバー→モジュールを追加（HTML）し、以下のコードを貼り付けて「適用」をクリック。
<div class="hatena-module-title2">
<span class="tab active">人気</span>
<span class="tab">最新</span>
<span class="tab">B!</span>
<span class="tab">タグ</span>
<span class="tab">月別</span>
</div>
その後、このモジュールをサイドバーの一番上に置き、注目記事・最新記事などのモジュールは以下の順番にしておきます。
２、タブメニューの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でスタイリング
参考サイトではタブメニューをインデックスのようなデザインにしていますが、今回は吹き出し風にカスタマイズします。
吹き出しに風のタブメニューは文藝春秋の「本の話web」が採用しており（最もこちらは画像ですが）、WordPressのテンプレートなどでもよく見かけるデザインです。吹き出しにすることによってタブの切り替えが視覚的に分かりやすくなるのが良いですよね。
参考：本の話WEB
参考：http://demo.designwall.com/dw-minion/
参考：よなかのはなし（このブログ）
CSS
/*サイドバータブメニュー*/
.tab{
display: inline-block;
background: #E7E7E7;
cursor: pointer;
position: relative;
top: 1px; color: #333;
width:17.5%; border:none;
border-bottom: 1px solid transport;
color: #777;
text-align:center;
padding: 5px 2px;
line-height: 20px;
border-radius: 2px;
font-weight:bold;
font-family: '游ゴシック', 'Yu Gothic', 'YuGothic', Hiragino Sans, 'ヒラギノ角ゴシック', Hiragino Kaku Gothic ProN, 'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, sans-serif;
}
.active{
background:#fff;
border-bottom: 0px solid #e8554e;
border-bottom-color: #e8554e;
color: #fff; background:#333;
}
.active > a{
color: #ffffff;
background: #333;
cursor: default;
}
.active:before{
background: #fff;
content: "";
border-left: 6px dashed transparent;
border-right: 6px solid transparent;
border-top: 6px solid #333;
position: absolute;
left: 50%;
margin-left: -6px;
bottom: -6px;
}
サイドバーの横幅と、追加するタブ項目の数によってwidthを変更する必要があるので、ここは自分で調整してください。当ブログはサイドバーの横幅が336px、タブ項目を５個にしているのでwidth:17.5%にしています。タブメニューをちょっとだけおしゃれにする吹き出し風デザイン。背景色などを変えればどんなブログデザインにも馴染むので、ぜひ導入してみてはいかがでしょうか！