思考は現実化する

自分の潜在意識を書き換えるために、自分が学んだ事を整理しまとめています。

スマホ画面に「複合メニューバー」を導入する方法〈はてなブログ カスタマイズ忘備録(2)〉


f:id:b204638:20170506192323j:plain

 

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

 カスタマイズ環境 

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

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

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

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

 

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

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

 

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

www.yukihy.com

このカスタマイズを導入すると、スマホ画面下に 「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)コードを貼り付ける

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

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

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

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

〈「人気記事」を表示〉 

f:id:b204638:20170506211141p:plain

 〈「カテゴリ」を表示〉 

f:id:b204638:20170506211207p:plain

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

 


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

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

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

 

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