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

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

 カスタマイズ環境

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

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

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

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

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

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

はてなブログスマホ画面にホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーをつけるカスタム – Yukihy Life

このカスタマイズを導入すると、スマホ画面下に 「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>

（３）コードを貼り付ける

修正したグローバルメニューのコードを以下に貼り付けます。

ダッシュボードの「 デザイン」＞「スマートフォン」＞「ヘッダ」＞「タイトル下」

以上でスマホ画面への「複合メニューバー」導入は完了です。

導入後の画面はこんな感じです。

〈「人気記事」を表示〉

〈「カテゴリ」を表示〉

このスクリーンショットはiPhone6 Plusのものですが、画面の小さなiPhone5でもちゃんと表示されていたので、これくらいの文字数なら概ね大丈夫なような気がします。

---

スマホ画面に「複合メニューバー」を導入する方法は以上です。

このカスタマイズでは、他にも 「人気記事」に「はてブ数」を表示したり、「メニュー部分」「カテゴリ」の「背景」や「文字の色」を変更することもできるようです。

カスタマイズ方法などの詳しいことは「はてなブログスマホ画面にホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーをつけるカスタム – Yukihy Life」のページでご確認いただければと思います。

次回は、デザインテーマ「Brooklyn」でSNSシェアボタンのカスタマイズする方法についてまとめてみます。