はてなブログにグリッドデザイン風のタブメニューを設置する

はてなブログに実装してみたサイドバーのタブメニュー。今回は、このタブメニューをグリット風デザインにカスタマイズする方法をご紹介。

これが完成形

今回設置するタブメニューの完成形がこちらです。

当ブログは全体的に配色がモノクロベースなので、それに合わせてタブメニューもシンプルにしました。以前は吹き出し風のデザインにしていたんですが、よりシンプルさを追求した結果、こっちの方が良いかなと。デザインの参考にしたのはウェブマガジンの「OPENERS(オウプナーズ)」です。

 画像：Web Magazine OPENERS(ウェブマガジン オウプナーズ)

1.タブメニューのHTMLを追加する

まずはタブメニューの本体となるHTMLコード、そして動作させるためのjQueryをブログに記述していきます。コードは「Yukihy Life」を参考にさせて頂いてます。

当ブログではタブメニューの項目を以下の６個にしているため、今回もこの６個がベースになります。項目は変更できるので、カスタマイズの方法については上記の参考元サイトをご覧ください。

まず、サイドバーに「HTMLモジュールの追加」を行い、以下のコードを貼り付けます。３・６個目の項目「PICK UP・MONTHLY」は後で左側のボーダーを消すため、noborderというクラス名を別途追加。

<div class="hatena-module-title2">
 <span class="tab active">RANKING</span>
 <span class="tab">NEW</span> 
<span class="tab noborder">PICK UP</span>
 <span class="tab">B!</span>
 <span class="tab">BLOG</span>
 <span class="tab noborder">MONTHLY</span> 
</div>

タブのHTMLコードを追加したら、サイドバーモジュールは以下の順番に並べておいてください。

2.jQueryをフッターに追加する

HTMLを追加したら、次にタブメニューを動作させるためのjQueryコードをフッター内に記述します。

jQuery

<script> $(function(){ $(".hatena-module-entries-access-ranking,.hatena-module-recent-entries,.hatena-module-recent-entries,.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でスタイリングしていきます。

ブログの設定画面からデザインCSSを開き、以下のコードを追加してください。

CSS

/*サイドバータブメニュー*/
.tab{
display: inline-block; 
cursor: pointer; 
position: relative; 
top: 1px; 
text-align:center; 
box-sizing: border-box; 
line-height: 20px; 
font-family: 'Open Sans',"游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif; 
border-bottom: 1px solid #ebebeb; 
width: 32%; 
color: #333; 
font-size:13px; 
padding: 5px 2px; 
} 
.tab:before{ 
content: ""; 
position: absolute; 
right: 0; 
top: 5px; 
border-left: 1px solid #e8e8e8; 
height: 1.5em; 
} 
.active{ 
background:#fff; 
color: #ef5f60; 
} 
/*サイドバータブメニュー枠線*/ 
.hatena-module.hatena-module-entries-access-ranking, 
.hatena-module.hatena-module-archive, 
.hatena-module.hatena-module-recent-entries.module{ 
border: 1px solid #d2d2d2; 
padding: 8px 15px 10px 15px; 
border-top:none; 
} 
.hatena-module-title2{ 
border: 1px solid #d2d2d2; 
border-bottom:none; 
margin-bottom: 0px; 
padding: 8px 15px 10px 15px; 
} 
.hatena-module-title2>.noborder:before{ 
content:none; 
}

CSSを追加したあと表示を確認し、きちんとタブが二段になるよう並んでいれば完成です。ミニマル・ナチュラルなブログデザインにもマッチしますし、配色を変えればわりとどんなデザインにも使えるのでぜひお試しを！