Simple Life Navi

シンプルで楽しい暮らしのための、お得な情報ブログ

~ お知らせ ~
『Simple Life Navi』
気になるカテゴリを選べます

ーーー New Post ーーー

スマホ下部固定メニューのCSS|ボトムナビゲーションの設置方法|はてなブログで回遊率を上げる

スマホの下部固定メニュー、ボトムメニューの設置

この記事では、固定メニュー(ボトムナビゲーション)の設置と、そのカスタマイズ方法をご紹介します。

  ボトムナビゲーションでできること
  1. スマホ経由でブログの記事を読んでいただいている方*1が、他の記事にアクセスしやすくなる
  2. ブログ運営者が期待する特定の行動をしてもらいやすい

ブログの表示画面の下に、画面スクロールしても動かない、下部固定のメニューやナビゲーションがあると、読者の利便性が高まります。(このブログでも表示しています)*2

 

ブログの記事の回遊率があがるように、スマホ画面の下部にボトムナビゲーション(ボトムメニュー)を設置する方法です。

この記事はこんな方におすすめ
  • はてなブログユーザー
  • ブログの記事を多くの人に読んでほしい
  • ブログ記事へのアクセスは、スマホ経由が多い
  • ブログへのアクセス率を向上し、PVを増やしたい
  • ブログ画面のカスタマイズをしたい

では、早速確認していきましょう!

ボトムナビゲーション(画面下部に表示される固定メニュー)を設置する

f:id:simplelifenavigation:20211211170810j:plain
f:id:simplelifenavigation:20211211170837j:plain
ボトムナビゲーションでわかりやすさが向上

ボトムナビゲーションは、スマホの画面の下に「ナビゲーションバー」を常時表示して、読者登録をしてもらったり、他の記事を探しやすく分類して案内表示する画面表示です。

このブログにも設置、表示しています。(スマホ表示の場合に、画面下部に表示されます)*3

ボトムナビゲーション(下部固定メニュー)を設置する方法と参考にしたサイト

HTMLとCSSを使います。

作業前にCSSをバックアップ

CSSを変更する時は、あらかじめバックアップしてから作業しましょう。

はてなブログ|デザインCSSのバックアップ!

ボトムナビゲーションを設定するにあたり、下記のブログサイトの記事内容を参考にさせていただきました。

参考にしたサイトや本

www.bambi.pro

参照記事の内容からのアップデート(バージョンアップ)部分

上記の参照記事で紹介されているのは、ボタンが4つ、2階層目のメニューの選択肢は横1段となっています。

私の場合、表示選択肢をもっと増やしたかったので、次のように加工しています。

項目 参照記事の内容 変更後の内容
(カスタマイズ)
ボタン数 4つ表示 5つ表示
2階層目 横1段表示 横2段表示
横画面時 表示 非表示

 

細かい点では色や枠の大きさなども変えました。
私なりにカスタマイズしていますが、基本的な考え方は原作者のバンビさんのプログラムコードに沿った内容です。

わかりやすいコードを公開されていて、為になります。ありがとうございます。

 

さらに!
この記事では表示させるメニューのバリエーション例も増やして紹介しています!

ボトムナビゲーション(固定メニュー)の見た目をCSSコードで設定

はてなブログの管理画面を表示し、
ブログの管理画面から、 ダッシュボード>  デザイン>  カスタマイズ>  デザインCSS に進んでください。

 

私は、次のコード内容をデザインCSSの欄に追記しています。

なお、カラー表示(赤、紫、緑色)にしている部分は、ブログのデザインに合わせて変更する部分です。

 

/*== smartphone bottom menu ==
Customized by SimpleLifeNavi ,Dec 11,2021 updated
Based on "https://www.bambi.pro/entry/navigation-bottom-smartphone"
*/
.mini-text{font-size:9px;}/*文字の大きさ*/

ul.bottom-menu {
    position: fixed ;
    left:0;
    bottom:0;
    width: 100%;
    height:43px;/*アイコン枠の高さ*/
    margin:0;
    padding:0;
    background-color:white;/*背景色*/
    border-top:2px solid gray;/*バーの上線*/
    border-bottom:2px solid gray;/*バーの下線*/
    z-index:30;
    padding-bottom:env(safe-area-inset-bottom);
}

ul.bottom-menu li {
    float:left;
    width:20%;/*メニューアイコンを5つ並べる*/
    background-color:white;/*背景色*/
    list-style-type:none;
    text-align:center;
    font-size:22px;/*アイコンのサイズ*/}

.bottom-menu li a {
    display: block;
    color:dimgray;/*アイコンと文字の色*/
    padding-top:10px;
    padding-bottom:5px;
    line-height:10px;
    text-decoration:none;}

.bottom-menu li a:hover {
    color:lightgray;/*マウスオーバー時の色*/}

/* === 展開メニュー === */
ul.menu-second-level {
    visibility: hidden;
    opacity: 0;
    z-index:1;}

ul.menu-second-level li a{
    border-top:1px dotted gray;/*展開の枠点線*/
        font-size:12px;/*展開メニューの文字サイズ*/
        line-height:24px;/*文字の縦幅*/}

.menu-second-level li a:hover {
    height:100%;
    transition: 1.0s; /*動きを見せる*/
    background: lavender;/*マウスオーバーの色*/}

li.menu-width-max ul.menu-second-level {
    position: absolute ;
    bottom: 45px;/*メニュー高さ*/
    transition: 0.5s; /*動きを見せる*/
    left: 0;
    box-sizing: border-box;
    width: 100%;
    padding:0;}

li.menu-width-max:hover ul.menu-second-level {
    bottom: 45px;/*メニュー高さ*/
    visibility: visible;
    opacity: 1;}

li.menu-width-max ul.menu-second-level li {
    float: left;
    width: 50%;/*2階層目に2つメニューを並べる*/
    border: none;}

/* ボトムメニューを表示しない指示 */
@media(orientation:landscape)  , /*スマホで横画面の時*/
@media(min-width: 768px) { /*PC表示の時*/
    .bottom-menu{display:none; }
}

/*スマホの時だけ ボトムメニュー分フッタを底上げ*/
@media(max-width: 767px){ 
#footer{margin-bottom:45px;}
}

上記のうち、赤色文字、紫色文字、緑色文字の部分は、あなたのブログのテーマカラーに合うように変更しましょう。

 

色を調べるサイト

色の名前やコードを調べるのは次のサイトがとても便利です。

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

例えば、このサイトの表示色に近い色にする場合、下記の色指定になります。

カスタマイズ例
  • 赤色文字部分:steelblue
  • 紫色文字部分:lightskyblue
  • 緑色文字部分:white

ボトムナビゲーション(固定メニュー)の表示項目をHTMLコードで設定

はてなブログの管理画面を表示し、
ブログの管理画面から、 ダッシュボード>  デザイン>  カスタマイズ> フッタ に進んでください。
そして、次のコードを追記してください。

なお、コードの赤字部分はあなたのブログサイトのアドレスやツイッターアカウントに変更してください。
緑色部分は、表示させるページのタイトルを8文字以内くらいで決めてください。

 

<!-- 画面下のナビボタン(固定メニュー)-->
<ul class="bottom-menu">
<!-- アイコン1つ目-->
    <li>
        <a class="Menu-Bottom-btn" href="ブログのアドレス">
    <i class="blogicon-home"></i><br><span class="mini-text">新着記事</span></a>
    </li>

<!-- アイコン2つ目-->
    <li class="menu-width-max">
        <a href="#"><i class="blogicon-list"></i><br><span class="mini-text">カテゴリー</span></a>
<!-- 2階層目のメニュー-->
        <ul class="menu-second-level">
<!-- </ul>までの間に<li >~</li>を2の倍数の個数で設置してください-->

            <li><a href="表示させたいページのアドレス1">タイトル1</a></li>
            <li><a href="表示させたいページのアドレス2">タイトル2</a></li>
            <li><a href="表示させたいページのアドレス3">タイトル3</a></li>
            <li><a href="表示させたいページのアドレス4">タイトル4</a></li>

            </ul>
    </li>

<!-- アイコン3つ目 Bookmark -->
    <li>
        <a class="Menu-Bottom-btn" href="javascript:(function(){window.open('https://b.hatena.ne.jp/entry/'+encodeURIComponent(location.href))})();">
    <i class="blogicon-bookmark"></i><br><span class="mini-text">ブックマーク</span></a>
    </li>

<!-- アイコン4つ目 読者登録 -->
    <li>
    <a href="https://blog.hatena.ne.jp/はてなID/ブログアドレスの一部(https://を除く部分)/subscribe" target="_blank">
    <i class="blogicon-hatenablog"></i><br><span class="mini-text">読者登録</span></a>
    </li>
<!-- アイコン5つ目 Twitter -->
    <li>
     <a href="https://twitter.com/intent/follow?screen_name=ツイッターのID"><i class="blogicon-twitter"></i><br><span class="mini-text">Follow</span></a>
    </li>
</ul>

基本カスタマイズ

赤字部分のカスタマイズは、例えばこのサイトの場合、下記のように指定しています。

カスタマイズ例

応用カスタマイズ

上記のコードの、<li>~</li>で囲まれているリストの部分を、他の内容に変更することができます。

また、順番を入れ替えることで、表示位置を調整することもできます。

かなり自由にカスタマイズできるよ!

例えば、アイコン5つ目のツイッター表示をなくして、上に戻るボタンにしたい場合、アイコン5つ目の<li>~</li>部分を次の内容に差し替えてください。

<li>
<a class="Menu-Bottom-btn" href="#">
<i class="blogicon-chevron-up"></i><br><span class="mini-text">PageUp</span></a>
</li>

プロフィールなど、特定のページにしたい場合は、次のコードを参考にして差し替えてください。

<li>
<a class="Menu-Bottom-btn" href="あなたのブログアドレス/about">
<i class="blogicon-account"></i><br><span class="mini-text">プロフィール</span></a>
</li>   

画面下部の固定ナビゲーションバー設置の効果

f:id:simplelifenavigation:20211211170849j:plain
f:id:simplelifenavigation:20211211170843j:plain
画面下部の固定メニューは便利

さて、いかがだったでしょうか。

ブログの記事数が増えてくると、古い記事は埋もれてしまいます。できれば記事を見に来てくれた読者の方に、他の記事も見てもらいたいですよね。

ボトムナビゲーション(固定メニュー)を設置することで、次の効果が期待できます。

 固定メニュー設置で期待できる効果
  1. 読者の方が他の記事にもアクセスしやすくなる
  2. 読んでもらいたい記事に誘導することができる
  3. ブログの回遊率やPVが高まる!

あなたも、ブログの記事をたくさん読んでもらえるように、ボトムナビゲーションを設置してみてはいかがですか。

*1:このブログに訪れていただいている方は、約6~7割くらいがスマホからの利用になっています。

*2:2021年12月現在

*3:はてなブログのiOS用公式スマホアプリを利用の場合は、ナビゲーションバーがアプリの表示の裏に隠れることがありますが、記事の最下部まで移動すると出てきます。またWEBブラウザーがGoogle ChromeやSafariの場合は常時表示されます。