今回は、はてなブログのスマホ画面に「ホーム」「人気記事」「カテゴリ」「トップへ戻る」を表示する「複合メニューバー」を導入する方法についてまとめてみます。
カスタマイズ環境
使用テーマ | Brooklyn |
---|---|
はてなブログ | はてなブログPro |
上記は、私のカスタマイズ環境です。
今回のカスタマイズは(私は試していませんが)「Brooklyn」以外のテーマでも導入できると思います。
私が導入したカスタマイズ方法ははてなブログPROでの方法ですが、コチラの方法で、無料版のはてなブログでも(私は試していませんが)導入することができるようです。
スマホ画面に「複合メニューバー」を導入する
実は、このスマホ用「複合メニューバー」を導入したのは、つい最近です。(パソコン版のグローバルメニューカスタマイズと同じく、はじめはメニューができる程、記事がなかったので必要なかったのです。)
スマホ画面に「複合メニューバー」を導入する方法については、ゆきひー (id:ftmaccho)さんの以下のサイトを参考にさせていただきました。
このカスタマイズを導入すると、スマホ画面下に 「HOME」「人気記事」「はてブ順」「カテゴリ」「TOP」のボタンの付いた「複合メニューバー」を表示することができます。
各ボタンの機能は次の通りです。
「HOME」・・・ブログトップページを標示する
「人気記事」・・人気のある記事を表示する(デフォルト5個・変更可能)
「はてブ順」・・「ブックマーク」の多い記事を標示する(デフォルト5個)
「カテゴリ」・・指定した「カテゴリー」を標示する
「TOP」・・・・閲覧中ページの一番上までスクロールして戻る
記事では「はてブ順」ボタンのある5つボタンバージョンと、「はてブ順」ボタンのない4つボタンバージョンが紹介されています。
ここからは、私が行った導入手順を順番に整理してみます。私は「はてブ順」ボタンのない4つボタンバージョンを導入することにしました。
(1)「カテゴリー」に入れる項目の整理
「複合メニューバー」導入のカスタマイズでは、カテゴリーのデフォルトは6つに設定されています。この表示数には特に制限なく、増やすことも減らすことも可能です。(ただし、あまり多く表示しようとすると、画面からはみ出てしまいますが)
また「カテゴリー」は2列に表示することもできるようです。その場合は「カテゴリー」の数を偶数にしないと、空きができてしまいカッコ悪くなってしまいます。
それらを踏まえ、以下の8つの「カテゴリー」を表示することにしました。
「考え方・習慣」「社会」
「お金のこと」「ブログ運営」
「親子関係」「何気ない日々」
「オーブン料理」「プライバシーポリシー」
「カテゴリー」が7つしかなかったため1か所は「プライバシーポリシー」ページへのリンクを設置することにしました。(私の場合「about」ページにプライバシーポリシーを記載しているため、正確には「about」ページへのリンクです。)
(2)コードを修正する
先程の記事に記載されている「4つのボタンの場合」のカスタマイズコードを修正します。
私が修正したのは次の3か所です。
(a)「homeボタンのURL」に自分のホームページのURLを入力する
(b)「カテゴリ部分」を2列に表示するコードを上書きする
(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='http://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='http://www.thoughts-make-things.com/archive/category/%E7%A4%BE%E4%BC%9A'>社会</a></li>
<li><a href='http://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='http://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='http://www.thoughts-make-things.com/archive/category/%E8%A6%AA%E5%AD%90%E9%96%A2%E4%BF%82'>親子関係</a></li>
<li><a href='http://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='http://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='http://www.thoughts-make-things.com/about'>プライバシーポリシー</a></li>
</ul>
</div><!--toggle-content-->
</div><!--toggle-contents-->
<div class="btn-area">
<a class="home-btn" href="http://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>
赤字の部分が修正箇所、青字の部分が「カテゴリ部分」を2列に表示するコードを上書きした箇所です。
「カテゴリ」数は6⇒8に増やしています。増やす方法は次のように増やす分だけ行を追加するだけです。
<li><a href='url'>カテゴリ1</a></li>
<li><a href='url'>カテゴリ2</a></li>
<li><a href='url'>カテゴリ3</a></li>
<li><a href='url'>カテゴリ4</a></li>
<li><a href='url'>カテゴリ5</a></li>
<li><a href='url'>カテゴリ6</a></li>
<li><a href='url'>カテゴリ7</a></li>
<li><a href='url'>カテゴリ8</a></li>
(3)コードを貼り付ける
修正したグローバルメニューのコードを以下に貼り付けます。
ダッシュボードの「 デザイン」>「スマートフォン」>「ヘッダ」>「タイトル下」
以上でスマホ画面への「複合メニューバー」導入は完了です。
導入後の画面はこんな感じです。
〈「人気記事」を表示〉
〈「カテゴリ」を表示〉
このスクリーンショットはiPhone6 Plusのものですが、画面の小さなiPhone5でもちゃんと表示されていたので、これくらいの文字数なら概ね大丈夫なような気がします。
スマホ画面に「複合メニューバー」を導入する方法は以上です。
このカスタマイズでは、他にも 「人気記事」に「はてブ数」を表示したり、「メニュー部分」「カテゴリ」の「背景」や「文字の色」を変更することもできるようです。
カスタマイズ方法などの詳しいことは「はてなブログスマホ画面にホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーをつけるカスタム - Yukihy Life」のページでご確認いただければと思います。
次回は、デザインテーマ「Brooklyn」でSNSシェアボタンのカスタマイズする方法についてまとめてみます。