スマホ画面に「複合メニューバー」を導入する方法【はてなブログカスタマイズ忘備録（２）】

f:id:b204638:20180407012648j:plain

今回は、はてなブログのスマホ画面に「ホーム」「人気記事」「カテゴリ」「トップへ戻る」を表示する「複合メニューバー」を導入する方法についてまとめてみます。

カスタマイズ環境
スマホ画面に「複合メニューバー」を導入する

カスタマイズ環境

使用テーマ	Brooklyn
はてなブログ	はてなブログPro

上記は、私のカスタマイズ環境です。

今回のカスタマイズは（私は試していませんが）「Brooklyn」以外のテーマでも導入できると思います。

私が導入したカスタマイズ方法ははてなブログPROでの方法ですが、コチラの方法で、無料版のはてなブログでも（私は試していませんが）導入することができるようです。

スマホ画面に「複合メニューバー」を導入する

実は、このスマホ用「複合メニューバー」を導入したのは、つい最近です。（パソコン版のグローバルメニューカスタマイズと同じく、はじめはメニューができる程、記事がなかったので必要なかったのです。）

スマホ画面に「複合メニューバー」を導入する方法については、ゆきひー (id:ftmaccho)さんの以下のサイトを参考にさせていただきました。

このカスタマイズを導入すると、スマホ画面下に「HOME」「人気記事」「はてブ順」「カテゴリ」「TOP」のボタンの付いた「複合メニューバー」を表示することができます。

各ボタンの機能は次の通りです。

「HOME」・・・ブログトップページを標示する

「人気記事」・・人気のある記事を表示する（デフォルト５個・変更可能）

「はてブ順」・・「ブックマーク」の多い記事を標示する（デフォルト５個）

「カテゴリ」・・指定した「カテゴリー」を標示する

「TOP」・・・・閲覧中ページの一番上までスクロールして戻る

記事では「はてブ順」ボタンのある５つボタンバージョンと、「はてブ順」ボタンのない４つボタンバージョンが紹介されています。

ここからは、私が行った導入手順を順番に整理してみます。私は「はてブ順」ボタンのない４つボタンバージョンを導入することにしました。

（１）「カテゴリー」に入れる項目の整理

「複合メニューバー」導入のカスタマイズでは、カテゴリーのデフォルトは６つに設定されています。この表示数には特に制限なく、増やすことも減らすことも可能です。（ただし、あまり多く表示しようとすると、画面からはみ出てしまいますが）

また「カテゴリー」は２列に表示することもできるようです。その場合は「カテゴリー」の数を偶数にしないと、空きができてしまいカッコ悪くなってしまいます。

それらを踏まえ、以下の８つの「カテゴリー」を表示することにしました。

「考え方・習慣」「社会」
「お金のこと」「ブログ運営」
「親子関係」「何気ない日々」
「オーブン料理」「プライバシーポリシー」

「カテゴリー」が７つしかなかったため１か所は「プライバシーポリシー」ページへのリンクを設置することにしました。（私の場合「about」ページにプライバシーポリシーを記載しているため、正確には「about」ページへのリンクです。）

（２）コードを修正する

先程の記事に記載されている「４つのボタンの場合」のカスタマイズコードを修正します。

私が修正したのは次の３か所です。

（a）「homeボタンのURL」に自分のホームページのURLを入力する

（b）「カテゴリ部分」を２列に表示するコードを上書きする

（c）「カテゴリ」に表示するカテゴリー「URL」と「カテゴリー名」を入力する

私の場合は、次のようなコードになりました。

<!--固定メニューバー-->
<div id="menu">
<div class="toggle-contents">
<div class="toggle-content">
<div class="hatena-module hatena-module-entries-access-ranking"
 data-count="5"
 data-display_entry_category="0"
 data-display_entry_image="1"
 data-display_entry_image_size_width="50"
 data-display_entry_image_size_height="50"
 data-display_entry_body_length="0"
 data-display_entry_date="0"
 data-display_bookmark_count="0"
 data-source="access"
>
 <div class="hatena-module-body">
 </div>
</div>
</div><!--toggle-content-->
<div class="toggle-content">
<ul class="category-list">
<li><a href='https://www.thoughts-make-things.com/archive/category/%E8%80%83%E3%81%88%E6%96%B9%E3%83%BB%E7%BF%92%E6%85%A3'>考え方・習慣</a></li>
<li><a href='https://www.thoughts-make-things.com/archive/category/%E7%A4%BE%E4%BC%9A'>社会</a></li>
<li><a href='https://www.thoughts-make-things.com/archive/category/%E3%81%8A%E9%87%91%E3%81%AE%E3%81%93%E3%81%A8'>お金のこと</a></li>
<li><a href='https://www.thoughts-make-things.com/archive/category/%E3%83%96%E3%83%AD%E3%82%B0%E9%81%8B%E5%96%B6'>ブログ運営</a></li>
<li><a href='https://www.thoughts-make-things.com/archive/category/%E8%A6%AA%E5%AD%90%E9%96%A2%E4%BF%82'>親子関係</a></li>
<li><a href='https://www.thoughts-make-things.com/archive/category/%E4%BD%95%E6%B0%97%E3%81%AA%E3%81%84%E6%97%A5%E3%80%85'>何気ない日々</a></li>
<li><a href='https://www.thoughts-make-things.com/archive/category/%E3%82%AA%E3%83%BC%E3%83%96%E3%83%B3%E6%96%99%E7%90%86'>オーブン料理</a></li>
<li><a href='https://www.thoughts-make-things.com/about'>プライバシーポリシー</a></li>
</ul>
</div><!--toggle-content-->
</div><!--toggle-contents-->

<div class="btn-area">
<a class="home-btn" href="https://www.thoughts-make-things.com"><i class="blogicon-home lg"></i><br>HOME</a>
<span class="toggle-btn"><i class="blogicon-good lg"></i><br>人気記事</span>
<span class="toggle-btn"><i class="blogicon-list lg"></i><br>カテゴリ</span>
<span class="back-btn"><i class="blogicon-chevron-up lg"></i><br>Top</span>
</div><!--btn-area-->
<div style="clear: both;"></div>
</div>
 
<style type="text/css">
#menu{
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 50px;
 z-index: 10;
}
.toggle-content{
 display: none;
 position: fixed;
 bottom: 50px;
 background: white;
 width: 100%;
}
.toggle-content .hatena-module{
 padding: 15px 10px 10px 10px;
}
.toggle-content .hatena-module-body{
 font-size: 80%;
}
.toggle-content .hatena-module-body a{
 color: #444;
 font-weight: bold;
}
.toggle-content .hatena-module-body .urllist-image{
 width: 50px;
 height: 50px;
}
.toggle-content .urllist-item{
 padding: 0;
 margin: 0;
 min-height: 29px;
}
.toggle-content .urllist-item::before{
 display: none;
}
.category-list{
 list-style-type: none;
 margin: 0;
 width: 100%;
 padding-left: 0;
}
.category-list a{
 display: block;
 float: left;
 width: calc(50% - 2px);
 height: 40px;
 line-height: 40px;
 text-align: center;
 background: #444;/*カテゴリの背景色*/
 color: #f0f0f0;/*カテゴリの文字色*/
 font-size: 80%;
 border: 1px solid #333;/*カテゴリリスト間の線の色*/
}
.btn-area a,
.btn-area span{
 display: block;
 float: left;
 width: 25%;
 height: 50px;
 line-height: 25px;
 text-align: center;
 font-size: 70%;
 background: #f0f0f0;/*メニュー部分の背景色*/
 color: #444;/*メニュー部分の文字色*/
}
</style>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
 var contentArea = $(".toggle-content");
 $(".toggle-btn").click(function(){
 var index = $(this).index()-1;
 var clickedArea = $(contentArea).eq(index);
 if($(clickedArea).css('display') !='none'){
 $(contentArea).slideUp();
 }else{
 $(contentArea).slideUp();
 $(clickedArea).slideDown();
 };
 });
 $(".back-btn").click(function(){
 $("html,body").animate({scrollTop:0},"fast");
 });
});
</script>

赤字の部分が自分のホームページのURLに書き換えた箇所です。

「カテゴリ」数は６⇒８に増やしています。増やす方法は次のように増やす分だけ行を追加するだけです。

<li><a href='url'>カテゴリ１</a></li>
<li><a href='url'>カテゴリ２</a></li>
<li><a href='url'>カテゴリ３</a></li>
<li><a href='url'>カテゴリ４</a></li>
<li><a href='url'>カテゴリ５</a></li>
<li><a href='url'>カテゴリ６</a></li>
<li><a href='url'>カテゴリ７</a></li>
<li><a href='url'>カテゴリ８</a></li>