はてなブログ

はてなブログにハンバーガーメニューを実装する方法

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

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

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

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

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

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

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

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

１はてなブロググローバルナビ

「タイトル下」の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;
}
/*パソコン１カラム*/
@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を追加したら保存を押し、表示を確認してみます。

２はてなブロググローバルナビ

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

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

３はてなブロググローバルナビ

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

タイトルとURLをコピーしました