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

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

  ボトムナビゲーションでできること

1. スマホ経由でブログの記事を読んでいただいている方*1が、他の記事にアクセスしやすくなる
2. ブログ運営者が期待する特定の行動をしてもらいやすい

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

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

この記事はこんな方におすすめ

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

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

はてなブログProを調べる

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

ボトムナビゲーションでわかりやすさが向上

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

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

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

HTMLとCSSを使います。

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

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

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

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

参考にしたサイトや本

www.bambi.pro

HTML&CSS入門

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

上記の参照記事で紹介されているのは、ボタンが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>

基本カスタマイズ

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

カスタマイズ例

• ブログアドレス：https://simplelifenavigation.com
• はてなID：simplelifenavigation
• ブログアドレスの一部：simplelifenavigation.com
• ツイッターのID：SimpleLifeNav
• 表示させたいページのアドレス例：https://simplelifenavigation.com/archive/category/ブログなど

応用カスタマイズ

上記のコードの、<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>   

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

画面下部の固定メニューは便利

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

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

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

 固定メニュー設置で期待できる効果

1. 読者の方が他の記事にもアクセスしやすくなる
   
2. 読んでもらいたい記事に誘導することができる
3. ブログの回遊率やPVが高まる！

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

はてなブログProを調べる

 関連記事

ブログのカスタマイズ記事を見る

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

*2:2021年12月現在

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