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

よなかのはなし

LifeHacks And Hello!Project Blog

はてなブログにグローバルナビとスマホ用トグルスイッチを設置しレスポンシブ対応させる

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

f:id:hiroseyonaka:20160905182614p:plain

このブログは、手軽にワンソースで管理できるようレスポンシブデザインのテンプレートを使用しています。テンプレートにグローバルメニューがなかったので自分で設置し、スマホではトグルメニューに切り替わるようカスタマイズしてみました。

はてなブログのテンプレートは「レスポンシブ」対応のものを選ぶ

f:id:hiroseyonaka:20160120160634p:plain

 

このブログで使用しているテンプレートは、はてなテーマストアで手に入る「Blank」というテーマ。シンプルでレスポンシブにも対応している便利なテンプレートなので、自分でいろいろいじりたいブロガーにはおすすめ。

今回はこの「Blank」にグローバルナビゲーションを実装していくわけですが、自分でグローバルナビゲーションを導入するのが面倒だな……という方は、「Blank」の改良版「Innocent」を使用してもいいと思います。

 

グローバルナビゲーションを実装する

グローバルナビゲーションの導入方法はとても簡単です。私のブログではナビメニューを7個にしていますが、今回はわかりやすくメニューを5個にしたバージョンで説明をしていきたいと思います。

 

1、ナビメニューのHTMLとJavaScriptを追加する

まず、「カスタマイズ→ヘッダー→ヘッダータイトル下」を開きます。

 

f:id:hiroseyonaka:20160120150519p:plain

 

 

「タイトル下」のHTMLモジュールにナビメニューにしたい項目「TOP、LIFEHACKS、WEB、BOOK、文章術…」などを5個追加していきます。#のところにはそれぞれ表示させたいURLを入力してください。

 

HTML

<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='#'>TOP</a></li>
<li><a href='#'>LIFEHACKS</a></li>
<li><a href='#'>WEB</a></li>
<li><a href='#'>BOOK</a></li>
<li><a href='#'>文章術</a></li>
</div>
</ul>

 

 先ほど追加したHTMLの下に、今度はこのグローバルナビゲーションを動作させるためのJavaScriptを追加します。

 

JavaScript

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(function(){
        $(".menu-toggle").on("click", function() {
            $(this).next().slideToggle();
        });
    });
     $(window).resize(function(){
    var win = $(window).width();
    var p = 768;
    if(win > p){
      $("#menu").show();
    } else {
      $("#menu").hide();
    }
  });
</script>

 

2、CSSでグローバルナビゲーションをデザインする

上記のHTML、JavaScriptを追加したら、CSSで見た目をカスタマイズしていきます。「カスタマイズ→デザインCSS」の中に以下のCSSを追加してください。

 

CSS

#menu {
 position: relative;
 width: 100%;
 padding-left: 0px;
 height: 40px;
}
.menu-inner{
 width: 1050px;
 margin: 0 auto;
 height: 60px;
 background: #fff;/*グローバルメニュー背景色*/
}

.menu-inner{
 position: relative ;
 z-index: 100 ;
 background: #fff ;
 margin:0 auto;
}

.menu-inner::before {
 content: "" ;
 position: absolute ;
 top: 0 ;
 right: 0 ;
 bottom: 0 ;
 left: 0 ;
 display: block ;
 margin: 0 0 3px 0 ;
 z-index: -1 ;
 background: #fff ;
}

#menu li {
 list-style-type: none;
 float: left;
 height: 40px;
 text-align: center;
 width: 20%;
}

#menu li a {
 display: block;
 color: #000;/*グローバルメニュー文字色*/
 font-size: 80%;
 line-height: 40px;
}

#menu li:hover a {
 color: #00DFFC;
 transition: all .5s;
}

.menu-toggle{
 display: none;
} 

/*パソコン1カラム*/
@media screen and (max-width:968px){
.menu-inner{
 width: 968px;
    }
}

/*タブレット*/
@media screen and (max-width:768px){
 #top-editarea{
  height: initial;
  background: #fff;/*MENU背景色*/
  text-align: right;/*MENUの文字の位置*/
  width: 100%;
position: absolute;
top: 0;
   font-family:"游ゴシック", "YuGothic", "Yu Gothic", 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "Meiryo", Helvetica, Arial, sans-serif;
z-index:1
 }
 
 .menu-toggle{
  color: #000;/*MENUの文字色*/
  display: inline-block;
  padding: 5px;
  margin: 3px;
 }
 

 #menu {
  width: 100%;
  display: none;
  height: initial;
  padding: 0;
  margin: 0;
 }

 .menu-inner{
  width: 100%;
  height: initial;
  position: static;
  margin: 0;
 }
 
 
 #menu li{
  float: none;
  height: 50px;
  width: 100%;
  list-style-type: none;
  background: #eee;/*リスト文字の背景色*/
  margin: 0 auto;
  text-align: center;/*リストの文字の位置*/
  z-index:1;
  border:none;


 }
 
 #menu li a {
  height: initial;
  color: #777;/*リスト文字色*/
  display: block;
  font-family:"游ゴシック", "YuGothic", "Yu Gothic", 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "Meiryo", Helvetica, Arial, sans-serif;
  border:none;


 }
 #menu li:hover a{
  color: initial;
  background: initial; 
  border-bottom:1px solid #000;
     
 }


.lg[class*="blogicon-"] {
    font-size: 2.5em;
    line-height: 0.75em;
    vertical-align: -20%;
}

 

CSSを追加したら保存を押し、表示を確認してみます。

 

f:id:hiroseyonaka:20160905182645p:plain

 

このように、5つの項目がきちんと表示されていたら成功です。今回はモノクロでシンプルなデザインにしていますが、フォントやボーダーの色、背景色を変えることもできるので、自分のブログに合った配色にしてみてくださいね。

 

そして、このグローバルナビゲーションをスマホ端末で見たときは以下のようなトグルメニューに切り替わります。

 

f:id:hiroseyonaka:20160905182658p:plain

 

はてなブログのスマホ用デザインが好きではないのでこのブログではレスポンシブデザインを採用していますが、スマホ端末で見た時はどうしてもサイドバーが下に回り込んでしまいます。そのため、トップにトグルメニューを設置しておくと多くの記事を読んでもらえるきっかけにもなるので便利。

 

導入は簡単なので、ぜひお試しください!