TOM夫婦の世界の窓

主にロンドン生活について発信しています

【スマホ版 グローバルメニュー】コピペOK CSSで簡単作成 - はてなブログ

【スマホ版】はてなブログでのグローバルメニュー設定方法


どうもTOM夫婦の旦那です!

今回は、我々が使っているグローバルメニュー(スマホ版)の設定の仕方を紹介します!

はてなブログで個別にスマホ版のページをカスタマイズするには、はてなブログProの契約が必要です。

スマホ画面の重要性とはてなブログProのメリットは下記で紹介してます。

www.tomfamilyworld.com

PC版も紹介てます!

www.tomfamilyworld.com

これが本当に要因だったかは不明ですが、グローバルメニューを設置した後のGoogleアドセンス審査に合格したので、効果があるかも!?

Googleアドセンスに関する記事はこちらから↓

【アドセンス審査】グーグルアドセンスに3週間で合格した話 - TOM夫婦の世界の窓

 

1. そもそもグローバルメニューってなに?

言い方も色々あります。

・グローバルメニュー

・グローバルナビ/グローバルナビゲーション

・ナビゲーションメニュー

・ナビゲーションバー

 

サイト上部などにでているメニュー一覧みたいなものの事です。

このサイトでは下記がそれにあたります。

PC

PCグローバルメニューのイメージ

スマホ

スマホグローバルメニューのイメージ

ブログを訪れた方が、容易にブログ一覧にクセスしたりするためのものですね。

あった方が見てくれる人に優しいです!

 

2. 記述コードの紹介

下記2つの記事をベースにカスタマイズさせていただきました。

【レスポンシブ】スマホ固定フッターメニュー★ボトムナビゲーションでアクセスUP! - Bambi's BLOG @ hatena

ブログのスマホ対応。使いやすいデザインのグローバルメニューでナビゲーション - ハテブカスタム

 

2-1. htmlコード

※JQueryのコードも含まれますが、html内に記述してます。


<!--スマホグローバルメニュー用html-->
<ul class="bottom-menu"> <!--メニュー①--> <li> <a href="サイトURL/"> <i class="blogicon-アイコン名"></i><br><span class="mini-text">メニュー名①</span></a> </li> <!--メニュー②--> <li> <a href="サイトURL/"> <i class="blogicon-アイコン名"></i><br><span class="mini-text">メニュー名②</span></a> </li> <!--メニュー③--> <li> <a href="サイトURL/"> <i class="blogicon-アイコン名"></i><br><span class="mini-text">メニュー名③</span></a> </li> <!--メニュー④ (メニュー2段目追加)ここから--> <li class="menu-width-max"> <div id="hover-click"> <a href="#"><i class="blogicon-アイコン名"></i><br><span class="mini-text">メニュー名④</span></a> <ul class="menu-second-level"> <li><a href="サイトURL"><i class="blogicon-アイコン名"></i><br><span class="mini-text">メニュー名④-1</span></a></li> <li><a href="サイトURL"><i class="blogicon-アイコン名"></i><br><span class="mini-text">メニュー名④-2</span></a></li> <li><a href="サイトURL"><i class="blogicon-アイコン名"></i><br><span class="mini-text">メニュー名④-3</span></a></li> <li><a href="サイトURL"><i class="blogicon-アイコン名"></i><br><span class="mini-text">メニュー名④-4</span></a></li> </ul> </div> </li> <!--メニュー④ (メニュー2段目追加)ここまで--> </ul> <!--JQuery(スマホメニュー2段目のオープン/クローズのタッチ動作--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript">// <![CDATA[ $(function() { var contents = $("#hover-click > ul"); $("#hover-click > a").click(function(){ $(contents).toggle(); return false; }); $("#hover-click") .touchstart(function(){ $(contents).show(); }) .touchstart(function(){ $(contents).hide(); }); }); // ]]></script>

それぞれ設定が必要なのは、下記のポイント

”サイトURL": 飛ばしたいサイトのURLを記載

アイコン名: 利用したいアイコンの名前(※1)

メニュー名: 表示したいメニュー名を記載 

◆2段目を設定する際には、1段目の”サイトURL""#"と記載

下記に当ブログの(例)もあるので参考にしてください。 

 

<!--メニュー④ (メニュー2段目追加)ここから-->

※メニュー2段目を表示

<!--メニュー④ (メニュー2段目追加)ここまで-->

当ブログ、スマホ画面でグローバルメニューの Mediaをタッチをしてもらえるとイメージができるかと思います。

1段で十分な場合は削除していただければ、1段のみになります。

逆に、他にも2段目を設定した場合は、他の1段目配下に同じ記述をすれば実現可能です。

 

(例)当ブログの"Media"の例(2段メニュー設定)


<!--メニュー名"Media"--> <li class="menu-width-max"> <div id="hover-click"> <!--1段目設定--> <a href="#"><i class="blogicon-link"></i><br><span class="mini-text">Media</span></a> <!--2段目設定(ここから)--> <ul class="menu-second-level"> <li><a href="https://www.youtube.com/channel/UCk7025jLpoFgxg_YfqaP-2A"><i class="blogicon-youtube"></i><br><span class="mini-text">Youtube</span></a></li> <li><a href="https://www.instagram.com/tomfamily_london/?hl=ja"><i class="blogicon-instagram"></i><br><span class="mini-text">instagram</span></a></li> <li><a href="https://twitter.com/tomfamilyworld"><i class="blogicon-twitter"></i><br><span class="mini-text">Twitter</span></a></li> <li><a href="https://www.tomfamilyworld.com/media"><i class="blogicon-link"></i><br><span class="mini-text">Media</span></a></li> </ul> <!--2段目設定(ここまで)--> </div> </li>

(例)読者登録(グローバルメニューに設置したければ)

 
<li> <a href="https://blog.hatena.ne.jp/はてなID/はてなID.hatenablog.com/subscribe" target="_blank"> <i class="blogicon-hatenablog"></i><br><span class="mini-text">読者登録</span></a> </li>

はてなID: ご自身のはてなIDを記載ください。

 

※1 はてなブログで使えるWebアイコン

はてなブログebアイコンのイメージ

アイコン名は下記のリンクでチェック↓

はてなブログで使えるアイコンフォント(Webフォント)123種類 - FOXISM

 

2-1-2. htmlコードをはてなブログに入力

デザインをクリック

はてなブログデザイン設定のイメージ

スマートフォン(スマホマーク)>ヘッダをクリック

はてなブログスマホ設定のイメージ

タイトル下の「スマートフォン用にHTMLを設定する」にチェックを入れ、

HTML記述枠にコードを貼り付け

はてなブログスマホhtml設定のイメージ

詳細設定をクリックし、

レスポンシブデザイン」のチェックをはずす

はてなブログスマホ詳細設定のイメージ

 

2-2. CSSコード

はてなブログのスマートフォン用カスタマイズには、CSSの入力枠が設けられていないため、CSSコードをHTML内に記述します。

HTML内でも下記の形式でCSSが記述でます。

<style type="text/css">

CSSコード

</style>


<
style type="text/css"> /*スマホ用グローバルメニュー用CSS(html内に記述)*/ /*ボトムメニューを付けたのでフッタを底上げする*/ #footer{margin-bottom:45px;} } /*iPhoneのメニューバー被り対策*/ ul.bottom-menu{ padding-bottom:env(safe-area-inset-bottom); } /* === 展開メニュー === */ ul.menu-second-level { visibility: hidden; opacity: 0; z-index:1;} ul.menu-second-level li a{ border-top:1px dashed gray;/*展開の枠点線*/ font-size:25px;/*展開メニューの文字サイズ*/ line-height:10px;/*文字の縦幅*/} .menu-second-level li a:hover { height:100%; background: lightgray;/*マウスオーバーの色*/} li.menu-width-max ul.menu-second-level { position: absolute; bottom: 43px;/*高さ*/ left: 0; box-sizing: border-box; width: 100%; padding:0;} li.menu-width-max:hover ul.menu-second-level { bottom: 43px;/*高さ*/ visibility: visible; opacity: 1;} li.menu-width-max ul.menu-second-level li { float: left; width: 100%; border: none;} #hover-click > a{ display: block; } #hover-click > ul{ display: none; margin:0 } .mini-text{font-size:10px;}/*文字大きさ*/ ul.bottom-menu { position: fixed; left:0; bottom:0; width: 100%; height:45px;/*高さ*/ margin:0; padding:0; background-color:lightcoral;/*背景色*/ border-top:2px solid gray;/*バーの上の線*/ border-bottom:2px solid gray;/*バーの下の線*/ z-index:30;} ul.bottom-menu li { float:left; width:25%; background-color:lightcoral;/*背景色*/ list-style-type:none; text-align:center; font-size:25px;/*アイコンのサイズ*/} .bottom-menu li a { display: block; color:white;/*アイコン&文字の色*/ padding-top:10px; padding-bottom:5px; line-height:10px; text-decoration:none;} .bottom-menu li a:hover { color:gray;/*マウスオーバー時の色*/} } </style>

変更ポイントは、6ヶ所

◆ border-top:1px dashed gray;/*展開の枠点線*/

◆ color:white;/*アイコン&文字の色*/

◆ background-color:lightcoral;;/*背景色*/}

◆ border-top:2px solid gray;/*バーの上の線*/

◆ border-bottom:2px solid gray;/*バーの下の線*/

color:gray;/*マウスオーバー時の色*/ (2ヶ所)

 

それぞれcolor: の後の文字を変えることでグローバルメニューの色を変更できます。

ブログ全体のカラーに合わせて、色をチョイスしてみましょう!

色のチョイスは下記のリンク!

WEB色見本 原色大辞典 - HTMLカラーコード

 

また、グローバルメニューに配置するメニューの数を増やす場合には、

width:25%; → width:20%; と変更してください。

(4メニュー)→(5メニュー)

これはメニューバーの数をこの割合で管理しているためです。

 

2-2-1. CSSコードをはてなブログに入力

CSSコード冒頭で記載しました通り、スマホ用デザインにはCSSの記載枠がありませんので、html内に記述します。

 デザインをクリック

はてなブログデザイン設定のイメージ

スマートフォン(スマホマーク)>ヘッダをクリック

はてなブログスマホヘッダ設定のイメージ

タイトル下のHTML記述枠にコードを貼り付け

はてなブログスマホhtml設定のイメージ

 

 3.最後に

いかがでしたでしょうか?うまく設定できましたでしょうか。

グローバルメニューがあるだけで、グンとブログの見栄えも上がりますし、最初の設定だと思って設定してみてください!

 

続けてPCページにもグローバルメニューを設置してみましょう。

www.tomfamilyworld.com

 Googleアドセンス審査に通るには他にもいくつか必要な要素があります。

ぜひ下記の記事もチェックしてみてください。

www.tomfamilyworld.com

他にもはてなブログカスタマイズを紹介してます!

www.tomfamilyworld.com

では、また!

にほんブログ村 海外生活ブログへ
にほんブログ村