はてなブログのサイドバーに吹き出し風のタブメニューを作るカスタマイズ

最近レスポンシブサイトでよく見かけるタブメニュー。今回はこのタブメニューを吹き出し風にするカスタマイズをご紹介します。

SPONSORED LINK


はじめに

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

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

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

f:id:hiroseyonaka:20161223192920j:plain

タブの項目を変更したい場合や、他のカスタマイズなど細かい設定については上記の参考元サイトをご覧ください。今回はこのブログに導入している、

  1. 注目記事1(アクセス順)
  2. 最新記事
  3. 注目記事2(はてなブックマーク順)
  4. カテゴリー
  5. 月別アーカイブ

のモジュールで吹き出し風のタブメニューを作っていきます。

SPONSORED LINK

1、HTMLを追加する

まずは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>

その後、このモジュールをサイドバーの一番上に置き、注目記事・最新記事などのモジュールは以下の順番にしておきます。

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でスタイリング

参考サイトではタブメニューをインデックスのようなデザインにしていますが、今回は吹き出し風にカスタマイズします。

吹き出しに風のタブメニューは文藝春秋の「本の話web」が採用しており(最もこちらは画像ですが)、WordPressのテンプレートなどでもよく見かけるデザインです。吹き出しにすることによってタブの切り替えが視覚的に分かりやすくなるのが良いですよね。

f:id:hiroseyonaka:20161223192955j:plain

参考画像:本の話WEB

f:id:hiroseyonaka:20161223193007j:plain

参考画像:DW Minion WordPress Theme

f:id:hiroseyonaka:20161223201630j:plain

参考画像:よなかのはなし(このブログ)

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、タブ項目を5個にしているのでwidth:17.5%にしています。

タブメニューをちょっとだけおしゃれにする吹き出し風デザイン。背景色などを変えればどんなブログデザインにも馴染むので、ぜひ導入してみてはいかがでしょうか!

SPONSORED LINK

あわせて読みたい