【はてなブログ/スマホ】固定(追従）の展開式グローバルメニューとボトムメニューの作成（目次も固定可）

こんにちは岩田です。

今回新たにスマホ画面で見た時のデザインを変更してみました。

この上下のメニューバーですが、スクロールしても追従してくれます。

上にはメニューと表示されており、クニックするとこのようにグローバルメニューが表示されます。

ちなみにパソコンだと通常のグローバルメニューの表示になります。

パソコンでも幅が一定の狭さになるとスマホ表示に切り替わります。

目次の表示

おすすめ記事の表示

ボトムメニューには、ホームボタン、おすすめ記事、読者登録、上に戻る、目次を表示させています。

まず、このように表示させるようにデザイン変更をした理由ですが、ユーザーの回遊をしやすくすることでユーザビリティが上がり、SEO効果があると思ったからです。

実際、ネット検索で上位表示されているブロガーさんは対策取られたりしています。

私自身、こないだネットサーフィンしていて自分もこんなふうにしたいなぁ、と思ったのがデザイン変更のきっかけでした。

前置きが長くなりましたが、それでは変更の仕方をご紹介します。

※上下のメニューバーはそれぞれ別のものになります。必要なものだけ採用して下さい。

スマホでトップに固定(追従)する展開式グローバルメニュー

www.yukihy.com

こちらのブログを参考にしています。

変更した点ですが、スマホ表示のメニューバーの位置を左へ移動したのとデザインカラーは変更しました。

メニューの背景は簡単に変更可能なのでCSSで自分のブログに合ったカラーに変更しちゃいましょう。

またカテゴリ前にアイコンを表示させるようにしています。

HTML

【貼り付ける場所】

管理メニュー→デザイン→カスタマイズ→ヘッダ→ブログタイトル下

HTML

<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>

<ul id='menu'>

<div class="menu-inner">

<li><a href='url'><i class="blogicon-hatenablog lg"></i>　TOP</a></li>

<li><a href='url'><i class="blogicon-hatenablog lg"></i> 　カテゴリ１</a></li>

<li><a href='url'><i class="blogicon-hatenablog lg"></i> 　カテゴリ２</a></li>

<li><a href='url'><i class="blogicon-hatenablog lg"></i> 　カテゴリ３</a></li>

<li><a href='url'><i class="blogicon-hatenablog lg"></i> 　カテゴリ４</a></li>

</div>

</ul>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script>

$(function(){

$(".menu-toggle").on("click", function() {

$(this).next().slideToggle();

});

});

$(window).resize(function(){

var win = $(window).width();

var p = 768;

if(win > p){

$("#menu").show();

} else {

$("#menu").hide();

}

});

</script>

赤字部分は表示させたいカテゴリページのURLと名前に変更して下さい。

名前の前にアイコンを表示させるHTMLがあります。

<i class="blogicon-hatenablog lg">のなかのblogicon-hatenabloをカテゴリに合う好きなアイコンに変更して下さい。

アイコンはこちらを参考にして下さい。

はてなブログで使えるアイコンフォント一覧【全122種】2020年9月時点 - Takeuchi BLOG

CSS

【貼り付ける場所】

管理メニュー→デザイン→デザインCSS

CSS

#menu {

 position: relative;

 width: 100%;

 padding-left: 0px;

 height: 40px;

 background: #29cec5;/*グローバルメニュー背景色*/

}

.menu-inner{

 width: 968px;

 margin: 0 auto;

 height: 40px;

}

#menu li {

 list-style-type: none;

 float:left;

 height: 40px;

 text-align: center;

 width: 20%;

}

#menu li a {

 display: block;

 color: #ffffff;/*グローバルメニュー文字色*/

 font-size: 80%;

 font-weight: bold;

 line-height: 40px;

}

#menu li:hover a {

 color: #00DFFC;

 background: #ffffff;

 transition: all .5s;

}

.menu-toggle{

 display: none;

}

/*パソコン１カラム*/

@media screen and (max-width:968px){

    .menu-inner{

        width: 768px;

}

}

/*タブレット*/

@media screen and (max-width:768px){

 #top-editarea{

  height: initial;

  background: #29cec5;/*MENU背景色*/

  text-align: left;/*MENUの文字の位置*/

  width: 100%;

  position: fixed;

top: 0;

z-index: 10;

 }

 .menu-toggle{

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

  display: inline-block;

  padding: 5px;

  margin: 3px;

 }

 #menu {

  width: 100%;

  display: none;

  height: initial;

  padding: 0;

  margin: 0;

 }

 .menu-inner{

  width: 100%;

  height: initial;

  position: static;

  margin: 0;

 }

 #menu li{

  float: none;

  height: 35px;

  width: 100%;

  list-style-type: none;

  background: #ffffff;/*リスト文字の背景色*/

  margin: 0 auto;

  text-align:center;/*リストの文字の位置*/

 }

 #menu li a {

  height: initial;

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

  display: block;

 }

 #menu li:hover a{

  color: initial;

  background: initial;

 }

 #blog-title{

margin-top: 30px;

}

}

表示数に応じて赤字部分のみ変更の必要があります。6個の場合は20％を13～15％で調整してください。

赤字のカラー部分は好みで変更してください。

ボトムメニュー

www.bambi.pro

ボトムメニューはこちらのブログを参考にしました。

ただし、私はツイッターのフォローボタンは不用と思いましたので戻るボタンに変更し、目次のボタンも作成して5つの項目に変更しております。

HTML

貼り付ける場所

管理メニュー→デザイン→カスタマイズ→ヘッダ→ブログタイトル下

HTML

<!-- bottom navigation -->

<ul class="bottom-menu">

    <li>

              <!--　↓↓項目1. ホーム 　＃の部分にホームのURLを入れる -->

        <a href="#">

              <i class="blogicon-home"></i><br><span class="mini-text">ホーム</span></a>

    </li>

    <li class="menu-width-max">

              <!-- ↓↓項目2. おすすめ　すぐ下の"＃"はそのまま -->

        <a href="#"><i class="blogicon-list"></i><br><span class="mini-text">おすすめ</span></a>

                            <ul class="menu-second-level">

                            <!-- 下の"#"の部分におすすめ"記事URL"とタイトル等を入れる -->

                   <li><a href="#">タイトル１</a></li>

                    <li><a href="#">タイトル２</a></li>

                    <li><a href="#">タイトル３</a></li>

                   <li><a href="#">タイトル４</a></li>

                   <li><a href="#">タイトル５</a></li>

                      </ul>

    </li>

    <li>

              <!-- ↓↓項目3.　読者登録 ↓↓の部分の書き換えが必要です -->

        <!--  ~hatena.ne.jp/自分のはてなID/URL(http://の部分は無し)/subscribe　-->

             <a href="https://blog.hatena.ne.jp/はてなID/自分のURL/subscribe" target="_blank">

              <i class="blogicon-hatenablog"></i><br><span class="mini-text">読者登録</span></a>

    </li>

    <li>

              <!-- ↓↓項目4.　上へ戻るボタン 　変更不要です-->

         <div><a href="#">
    <i class="blogicon-chevron-up"></i><br><span class="mini-text">上へ戻る</span></a></div>

    </li>

<li class="menu-width-max">

              <!-- ↓↓項目5. 目次　変更不要です※注意あり -->

        <a href="#"><i class="blogicon-list"></i><br><span class="mini-text">目次</span></a>

                            <ul class="menu-second-level"> 

           <div id="toc"></div>

                      </ul>

</ul>

①ホームボタン

#の部分にご自身のブログトップページのURLを貼り付けて下さい。

②おすすめ記事

赤字の部分をご自身の表示したいおすすめの記事のURLと記事の名前に各々変更して下さい。

③読者登録

赤字の部分をご自身のはてなブログIDとブログURLに変更して下さい。

④上に戻るボタン

変更不要です。

⑤目次

変更不要ですが、下記のHTMLを記事下HTMLにコピペが必要です。

目次を表示させるためのHTML

【貼り付け場所】

管理メニュー→デザイン→カスタマイズ→記事→記事下HTML

記事下HTMLへコピペ

<!-- 目次を作成する先 -->

<div id="toc"></div>

<script type="text/javascript">

    document.addEventListener('DOMContentLoaded', function () {

        var contentsList = document.getElementById('toc'); // 目次を追加する先(table of contents)

        var div = document.createElement('div'); // 作成する目次のコンテナ要素

        // .entry-content配下のh2、h3要素を全て取得する

        var matches = document.querySelectorAll('.entry-content h2, .entry-content h3');

        // 取得した見出しタグ要素の数だけ以下の操作を繰り返す

        matches.forEach(function (value, i) {

            // 見出しタグ要素のidを取得し空の場合は内容をidにする

            var id = value.id;

            if(id === '') {

                id = value.textContent;

                value.id = id;

            }

            // 要素がh2タグの場合

            if(value.tagName === 'H2') {

                var ul = document.createElement('ul');

                var li = document.createElement('li');

                var a = document.createElement('a');

                // 追加する<ul><li><a>タイトル</a></li></ul>を準備する

                a.innerHTML = value.textContent;

                a.href = '#' + value.id;

                li.appendChild(a)

                ul.appendChild(li);

                // コンテナ要素である<div>の中に要素を追加する

                div.appendChild(ul);

            }

            // 要素がh3タグの場合

            if(value.tagName === 'H3') {

                var ul = document.createElement('ul');

                var li = document.createElement('li');

                var a = document.createElement('a');

                // コンテナ要素である<div>の中から最後の<li>を取得する。

                var lastUl = div.lastElementChild;

                var lastLi = lastUl.lastElementChild;

                // 追加する<ul><li><a>タイトル</a></li></ul>を準備する

                a.innerHTML = value.textContent;

                a.href = '#' + value.id;

                li.appendChild(a)

                ul.appendChild(li);

                // 最後の<li>の中に要素を追加する

                lastLi.appendChild(ul);

            }

        });

        // 最後に画面にレンダリング

        contentsList.appendChild(div);

    });

</script>

目次の量が多くなってしまう場合は、,.entry-content h3を消してください。

ｈ2タグを使っているとおそらく表示が多くなりすぎると思います。

www.marorika.com

ちなみにこのブログを参考にさせていただきました。

CSS

【貼り付け場所】

デザイン→カスタマイズ→CSS

CSS

/*========================

　smartphone　bottom menu

　========================*/

.mini-text{font-size:10px;}/*文字大きさ*/

ul.bottom-menu {

    position: fixed;

    left:0;

    bottom:0;

    width: 100%;

    height:45px;/*高さ*/

    margin:0;

    padding:0;

    background-color:#29cec5;/*背景色*/

    z-index:30;}

ul.bottom-menu li {

    float:left;

    width:20%;

    background-color:#29cec5;/*背景色*/

    list-style-type:none;

    text-align:center;

    font-size:25px;/*アイコンのサイズ*/}

.bottom-menu li a {

    display: block;

    color:#ffffff;/*アイコン＆文字の色*/

    padding-top:10px;

    padding-bottom:5px;

    line-height:10px;

    text-decoration:none;}

.bottom-menu li a:hover {

    color:#a9a9a9;/*マウスオーバー時の色*/}

/* === 展開メニュー === */

ul.menu-second-level {

    visibility: hidden;

    opacity: 0;

    z-index:1;}

ul.menu-second-level li a{

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

        font-size:15px;/*展開メニューの文字サイズ*/

        line-height:30px;/*文字の縦幅*/}

.menu-second-level li a:hover {

    height:100%;

    background: lightgrey;/*マウスオーバーの色*/}

li.menu-width-max ul.menu-second-level {

    position: absolute;

    bottom: 47px;/*高さ*/

    left: 0;

    box-sizing: border-box;

    width: 100%;

    padding:0;}

li.menu-width-max:hover ul.menu-second-level {

    bottom: 47px;/*高さ*/

    visibility: visible;

    opacity: 1;}

li.menu-width-max ul.menu-second-level li {

    float: left;

    width: 100%;

    border: none;}

/*PC表示の際はボトムメニューは表示しない*/

@media(min-width: 768px){

    .bottom-menu{display:none; }

}

/*スマホの時だけ*/

@media(max-width: 767px){

/*ボトムメニュー付けたのでフッタを底上げする*/

#footer{margin-bottom:48px;}

}

メニューの数を変える場合は赤の20%を変更して下さい。4つの場合は25%です。他は不明。

以上です。

変更の前にはバックアップを取っておいてください。

万が一上手くいかなかった場合はリンク先の記事を参考にして下さい。

もう少し改善したいので上手くいけば更新したいと思います。