どうもTOM夫婦の旦那です!
今回は、我々が使っているグローバルメニュー(スマホ版)の設定の仕方を紹介します!
はてなブログで個別にスマホ版のページをカスタマイズするには、はてなブログProの契約が必要です。
スマホ画面の重要性とはてなブログProのメリットは下記で紹介してます。
www.tomfamilyworld.com
PC版も紹介てます!
www.tomfamilyworld.com
これが本当に要因だったかは不明ですが、グローバルメニューを設置した後のGoogleアドセンス審査に合格したので、効果があるかも!?
Googleアドセンスに関する記事はこちらから↓
【アドセンス審査】グーグルアドセンスに3週間で合格した話 - TOM夫婦の世界の窓
1. そもそもグローバルメニューってなに?
言い方も色々あります。
・グローバルメニュー
・グローバルナビ/グローバルナビゲーション
・ナビゲーションメニュー
・ナビゲーションバー
サイト上部などにでているメニュー一覧みたいなものの事です。
このサイトでは下記がそれにあたります。
PC
スマホ
ブログを訪れた方が、容易にブログ一覧にアクセスしたりするためのものですね。
あった方が見てくれる人に優しいです!
2. 記述コードの紹介
下記2つの記事をベースにカスタマイズさせていただきました。
【レスポンシブ】スマホ固定フッターメニュー★ボトムナビゲーションでアクセスUP! - Bambi's BLOG @ hatena
ブログのスマホ対応。使いやすいデザインのグローバルメニューでナビゲーション - ハテブカスタム
2-1. htmlコード
※JQueryのコードも含まれますが、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>
<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>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(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段目を表示
当ブログ、スマホ画面でグローバルメニューの Mediaをタッチをしてもらえるとイメージができるかと思います。
1段で十分な場合は削除していただければ、1段のみになります。
逆に、他にも2段目を設定した場合は、他の1段目配下に同じ記述をすれば実現可能です。
(例)当ブログの"Media"の例(2段メニュー設定)
<li class="menu-width-max">
<div id="hover-click">
<a href="#"><i class="blogicon-link"></i><br><span class="mini-text">Media</span></a>
<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>
</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アイコン
アイコン名は下記のリンクでチェック↓
はてなブログで使えるアイコンフォント(Webフォント)123種類 - FOXISM
2-1-2. htmlコードをはてなブログに入力
デザインをクリック
スマートフォン(スマホマーク)>ヘッダをクリック
タイトル下の「スマートフォン用にHTMLを設定する」にチェックを入れ、
HTML記述枠にコードを貼り付け
詳細設定をクリックし、
「レスポンシブデザイン」のチェックをはずす
2-2. CSSコード
はてなブログのスマートフォン用カスタマイズには、CSSの入力枠が設けられていないため、CSSコードをHTML内に記述します。
HTML内でも下記の形式でCSSが記述でます。
<style type="text/css">
CSSコード
</style>
<style type="text/css">
#footer{margin-bottom:45px;}
}
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;
それぞれcolor: の後の文字を変えることでグローバルメニューの色を変更できます。
ブログ全体のカラーに合わせて、色をチョイスしてみましょう!
色のチョイスは下記のリンク!
WEB色見本 原色大辞典 - HTMLカラーコード
また、グローバルメニューに配置するメニューの数を増やす場合には、
width:25%; → width:20%; と変更してください。
(4メニュー)→(5メニュー)
これはメニューバーの数をこの割合で管理しているためです。
2-2-1. CSSコードをはてなブログに入力
CSSコード冒頭で記載しました通り、スマホ用デザインにはCSSの記載枠がありませんので、html内に記述します。
デザインをクリック
スマートフォン(スマホマーク)>ヘッダをクリック
タイトル下のHTML記述枠にコードを貼り付け
3.最後に
いかがでしたでしょうか?うまく設定できましたでしょうか。
グローバルメニューがあるだけで、グンとブログの見栄えも上がりますし、最初の設定だと思って設定してみてください!
続けてPCページにもグローバルメニューを設置してみましょう。
www.tomfamilyworld.com
Googleアドセンス審査に通るには他にもいくつか必要な要素があります。
ぜひ下記の記事もチェックしてみてください。
www.tomfamilyworld.com
他にもはてなブログカスタマイズを紹介してます!
www.tomfamilyworld.com
では、また!
にほんブログ村