よなかのはなし

http://www.hiroseyonaka.com/

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

f:id:hiroseyonaka:20170108123423j:plain

当ブログでも以前から実装しているサイドバーのタブメニュー。今回は、このタブメニューをグリット風デザインにカスタマイズする方法をご紹介!

これが完成形

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

 

f:id:hiroseyonaka:20170108114024p:plain

 

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

 

f:id:hiroseyonaka:20170108114329j:plain

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

 

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

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

 

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

 

【当ブログのタブメニュー項目6個】

 

  1. 注目記事(最近のアクセス順)
  2. 最新記事
  3. 最新記事(カテゴリー:考察)
  4. 注目記事(はてブ順)
  5. 最新記事(カテゴリー:ブログ)
  6. 月別アーカイブ

 

まず、サイドバーに「HTMLモジュールの追加」を行い、以下のコードを貼り付けます。3・6個目の項目「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コードを追加したら、サイドバーモジュールは以下の順番に並べておいてください。

 

f:id:hiroseyonaka:20170108114637p:plain

 

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