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

f:id:b204638:20180407012648j:plain

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

 カスタマイズ環境

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

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

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

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

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

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

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

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

このカスタマイズを導入すると、スマホ画面下に 「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='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に書き換えた箇所です。

「カテゴリ」数は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:20180407012714j:plain

〈「カテゴリ」を表示〉

f:id:b204638:20180407012730j:plain

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


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

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

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

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

コメント

  1. decemberblue より:

    温かいコメントを有難うございました。
    思えば確かに「個人的な意見」なのですが、少し疲れているせいか「客観的な事実」のように捉えていたようです。
    少し心が軽くなりました。
    本当に有難うございました。重ねてお礼を申し上げさせてください。

  2. b204638 より:

    柊 (id:decemberblue)さん、いつもおいしそうな朝食拝見しています。落ち込む時もありますが、そんな気分も分け合えば軽くなると思います。でも、うれしい気持ちは、分け合うと倍に!だから、うれしい気持ちになる「意見」以外は、全部「参考」程度に考えて流してしまってもいいんだと、私は思います。コメントありがとうございます。

  3. notcho より:

    大変参考になる記事ありがとうございます。
    早速自分のブログで試させてください。
    これからはもっとスマホでの閲覧が増えそうですし、他の記事も楽しみにしてます♪

  4. b204638 より:

    葉きつねさん、コメントありがとうございます。今はスマホでの見やすさは大切ですね。自分で少しずつカスタマイズしていくのもブログの楽しみの1つだと思います。お互いに楽しみましょう!

  5. Daiki-English より:

    参考になる記事を有難うございます。
    どうしても私一人の力ではどうにも出来ないので、もしよろしければお力添えを頂きたいの
    です。
    私もさっそく自分のブログで試してみたんですが、HOMEボタンしか機能しません。
    テーマは、主さんと同じブルックリンを選択してます。
    ※レスポンシブ設定はしてないです。
    ちなみに下記が私のブログになります。
    https://blog.hatena.ne.jp/Daiki-English/daiki-english.hatenablog.com/config/design/detail
    申し訳ないですがよろしくお願いします。

  6. b204638 より:

    id:Daiki-Englishさん、コメントありがとうございます。
    「複合メニューバー」はテーマに関係なく、スマホだけでなくPCサイトでも導入できるのですが、私も今のテーマ(ZENO-TEAL)に変えた際に上手く作動しなくなった時があります。その時は、他のカスタマイズを外したり試行錯誤してみました。
    id:Daiki-Englishさんの原因もちょっとわからないので、例えば今のサイトのコピーサイトを作成して、一旦、他のカスタマイズを外しながら試してみるのが一番確実だと思います。
    また、こちらのゆきひーさんの記事も参照してみていただければと思います。
    http://www.yukihy.com/entry/mobile-menu-custom
    お役に立てずに申し訳ありません。

  7. Daiki-English より:

    id:b204638さん、お返事有難うございます。
    やはり、何か他のカスタマイズが影響している可能性があるんですね。
    諦めかけていたんですが、id:b204638さんも上手く作動しなかった事があった事を聞いて少し安心しました。
    私ももう一度トライしてみます。
    有難うございます。

  8. Daiki-English より:

    id:b204638さん。
    今日もう一度挑戦してみたんですが全然出来なかったです。
    はてなブログは複数ブログを作れるという事で新たに作って試して見たんですが、それでも出来なかったです。
    こればかっかりは謎です。涙

  9. b204638 より:

    id:Daiki-Englishさん、コメントありがとうございます。
    他のカスタマイズのコードを記載せずにこのコードだけ記載しても上手くいかない場合はURLの記述ミスの可能性もあると思います。
    このコードだけで上手く作動したら、他のカスタマイズコードを1つずつ追加して動作を確認していくのが確実な方法だと思います。
    私自身テーマが「Brooklyn」の時は特に問題なかったのに「ZENO-TEAL」にしたらHOMEとTOP以外機能しなくなったことがあるので、もしかしたら使用するテーマとの相性もあるのかも。
    カスタマイズは楽しいですが、上手くいかないとモヤモヤしてしまいますね。
    お役に立てずに申し訳ありません。

  10. sama07191212 より:

    「ZENO-TEAL」で複合メニューバーをすると、おススメ記事とカテゴリが何も反応しません!
    何を削除したらうまくいきましたか??

  11. b204638 より:

    あおのパパ (id:sama07191212)さん、コメントありがとうございます。
    私の場合、削除するというよりは、コピーサイトを作成して、まず「複合メニューバー」のコードだけを設置し、それから1つずつコードを追加して試していきました。(それでも「複合メニューバー」の「はてブ順」だけははじめからどうしても上手く動作しませんでした。)
    「複合メニューバー」と「ZENO-TEAL」はあまり相性が良くないのかもしれません。

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