mitopi はてなブログ版

肩こりのお悩み中心にアラサー女子の興味あることまとめます。

はてなブログProスマホにもメニュー一覧を設置したい【2パターン】

スポンサードリンク

はてなブログProにしていなかったときは、スマホ用のデザインのところで、

ヘッダーのHTMLが触れなかったので、とても不便だったのですが、

 

先日、はてなブログProに変えたため、スマホ用のHTMLも編集できるようになりました!

 

それでいち早く必要性を感じた変更が、

スマホで見た時のメニューの設置でした。

 

パソコンはいつも上部にグローバルメニューを表示させる設定に以前変更しましたが、スマホは手付かずでしたので、下記のような表示になっていました。

f:id:EnjoyFreeApp:20170717082547j:plain

これでは、一番上を見た時、何のカテゴリがブログ内にあるのか分からないですよね?

 

ということで、ここでは2パターンのスマホ用のメニュー設置方法を紹介します。

 

  • パターン1 カテゴリ名の一覧表示(スマホ画面の上に常に表示)
  • パターン2 トグルメニューの設置(スマホ画面の上にメニューバーが追加される)

 

パターン1 カテゴリ一覧をスマホ画面の上に常に表示させる方法

この方法は先日パソコン用の設定をしていたため、極めて簡単でした。

ちなみにパソコンを設定した方法はこちらの記事で手順を書きました。
(コードは下記の記事のリンク先「スキナモノート」さんのページを拝借しています。

mitopi.hatenablog.jp

上記の通り、HTMLとCSSの設定が完了していれば、パソコンを設定したとき詳細設定のヘッダHTMLのところに

<nav>から始まって</nav>で終わる箇所があると思います。

 

その<nav>から始まって</nav>で終わる箇所をコピーして、スマホの設定を選択。

ヘッダのタイトル下のHTMLの箇所に貼り付けて、変更を保存するだけで完了。

こうすると、下記の写真のような表示に変わります。

 

f:id:EnjoyFreeApp:20170717082711j:plain

先ほどと同じページを表示しましたが、上の写真のようにページ上部にメニュー一覧が出ていることが確認できました。

 

しかし、パソコンの画面ではさほど邪魔に感じなかったグローバルメニュー。

スマホでは常時上にあると、その下の内容を閲覧する際に毎回スクロールが必要になります。


カテゴリーが、まだこのぐらいの量なので大丈夫かもしれませんが、今後メニュー(カテゴリ)が増えてきた際、毎回下にスクロールしないと本文に行きつかないのは少々不便です。

 

パターン1(一覧表示)のメリット

  • カテゴリ表示を階層分けして表示できる
  • パッと見た時にブログ内のメニューが分かりやすい

パターン1(一覧表示)のデメリット

  • メニュー(カテゴリ)が増えてくると、ユーザーが邪魔に感じる恐れがある。

 

なので、ここでは他の方法も紹介します。

 

 

パターン2 スマホにトグルメニューを設置する

スマホにトグルメニューを設置する方法は「Yukihy Life」さんのブログがとても役に立ちました!(コードは下記リンク先からコピペできます)

www.yukihy.com

上記のリンク先にアクセスし、HTMLコードの部分を全コピー→自ブログのスマホ用デザインのタイトル下―HTMLのところへそのままコードを貼り付けし、設定を保存するだけ。※<ul>~</ul>の部分は、自ブログのカテゴリ名&URLに置き換える必要があるので、先にメモ帳などに貼り付け編集してから自ブログの設定のところにはりつけなおすと良いです。

f:id:EnjoyFreeApp:20170718074731p:plain

 

すると、こんな画面になります↓

f:id:EnjoyFreeApp:20170718063542j:plain

ブログタイトルと説明文のすぐ下にバーが設置され、右側にメニューボタンがあります。

スマホ上でこちらのメニューボタンをタップすると、こうなります。

f:id:EnjoyFreeApp:20170718063703j:plain

とてもスマートな感じになりました。
yukihyさんのをそのまま使うのも悪くないのですが、

どちらかというと配色がデジタル関連のブログっぽいと感じたので、
可愛らしい感じにアレンジすることにしました。

 

yukihyさんのコード中の配色をモカっぽい雰囲気にアレンジ

 配色を一通り変えたあとはこのようになりました。

まず、メニューを閉じた状態↓

f:id:EnjoyFreeApp:20170718064118j:plain

タップしてメニューを開いた状態↓

f:id:EnjoyFreeApp:20170718064209j:plain

柔らかい色合いの女性っぽいデザインに変更できたと個人的に思いました。

どこをどう触ったかといいますと

1.メニューバーの背景の色コードを「#eee」→「#f9c5d5」に変更

#menu{background: #eee;/*メニューバーの背景*/}

2.MENUの背景色を「#444」→「#f9c5d5」に変更(文字色はそのまま)

background: #444;/*MENUの背景色*/

    color: #fff;/*MENUの文字色*/

3.リストの背景色を「#444」→「#baa49c」に変更(文字色はそのまま)

background: #444;/*リストの背景色*/

    color: #fff;/*リストの文字色*/

 

 

こゆるりが個人的に配色を変更した後のコード

<div id="menu">
<div id="btnArea">
<span id="menuBtn"><i class="blogicon-reorder lg"></i> MENU</span>
</div>
<ul id="menuContent">
<li><a href="http://mitopi.hatenablog.jp/archive/category/オシャレしたい!">オシャレしたい!</a></li><li><a href="http://mitopi.hatenablog.jp/archive/category/はてなブログを使いこなす">はてなブログを使いこなす</a></li>
<li><a href="http://mitopi.hatenablog.jp/archive/category/作業時短">作業時短</a></li>
<li><a href="http://mitopi.hatenablog.jp/archive/category/iPhone">iPhone</a></li>
<li><a href="http://mitopi.hatenablog.jp/archive/category/ヘルス&ビューティ">ヘルス&ビューティ</a>
<li><a href="http://mitopi.hatenablog.jp/archive/category/目がピクピクする">目がピクピクする</a></li>
<li><a href="http://mitopi.hatenablog.jp/archive/category/菌活">菌活</a></li>
<li><a href="http://mitopi.hatenablog.jp/archive/category/甘酒">甘酒</a></li>
<li><a href="http://mitopi.hatenablog.jp/archive/category/ヘアケア">ヘアケア</a></li>
<li><a href="http://mitopi.hatenablog.jp/archive/category/ホビー・クラフト">ホビー・クラフト</a>
</li>
<li><a href="http://mitopi.hatenablog.jp/archive/category/ブログのコンセプト">ブログのコンセプト</a>
</li>
</ul>
</div>

<style type="text/css">
#top-editarea .section{
margin: 0;
width: 100%;
}
#menu{background: #f9c5d5;/*メニューバーの背景*/}
#btnArea{text-align: right;/*MENUの文字の位置*/}
#menuBtn{
display: inline-block;
padding: 8px;
margin: 5px;
border-radius: 5px;
background: #82685e;/*MENUの背景色*/
color: #fff;/*MENUの文字色*/
font-size: 80%;
}
#menu > ul{
display: none;
padding: 0;
margin: 0;
}
#menuContent > li{
list-style-type: none;
margin: 0 auto;
}
#menuContent > li > a{
display: block;
padding: 7px;
text-align: center;/*リストの文字の位置*/
background: #baa49c;/*リストの背景色*/
color: #fff;/*リストの文字色*/
font-size: 80%;
font-weight: bold;
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
var menuBtn = $("#menuBtn"),
menuContent = $("#menuContent");
menuBtn.click(function(){
menuContent.slideToggle();
});
});
</script>

 

スマホにトグルメニュー設置時の注意点

ただし、ここで注意ですが</li>と<li>の間に目に見えないスペースが入っていると、リストと次のリストの間に変な空白ができます。あと、トグルメニューの階層は1つまでにする必要があります。(子カテゴリーをそのまま使うと、下の画像のような表示になります)

 

もともと「甘酒」などの項目を「ヘルス&ビューティ」の配下に入れていましたが、トグルメニューでは「ヘルス&ビューティ」という親カテゴリーは取っ払って、全部<ul>と</ul>の間に<li></li>という形で入力しないと変な表示になります

(階層が二つある場合は<ul>~</ul>の中にさらに<ul>~</ul>があります)


f:id:EnjoyFreeApp:20170718070700p:image

(子カテゴリ―「目がピクピクする」のところだけさらに<ul></ul>ではさんでいたら、ピンク色の背景になってそこだけ浮いています)

トグルメニューの設置を試される方は、ご注意してください。

パターン2(トグルメニュー)のメリット

  • 普段スマホで表示する際はメニューバーだけ表示され、メニュー自体はたたんでおけるのでスッキリしている
  • メニューの配色が自由に変えられて、ブログの個性に合わせてカスタマイズ可能

パターン2(トグルメニュー)のデメリット

  • 親カテゴリー、子カテゴリ―と階層表示することはできない。(無理に親子にしたら子カテゴリ―の表示が不自然になる)

さいごに

現在のインターネットを閲覧する方法はパソコンが主流だった時代からスマホが主流に移っています。

 

なので、スマホの使用者に配慮したデザインにできて良かったです。

結局、最終的にトグルメニューにしたのでユキヒーさん、ありがとうございました。