[Vaster2]スマホのときのメニュー（メニューバー）を変更しました

目次

• Vaster2スマホ時に表示されるメニューを設置しました
• 準備
  • スマホのとき既存のメニューバーを表示させない
  • JavaScript
• 追加するコード
  • HTML
  • CSS
  • Javascript

Vaster2スマホ時に表示されるメニューを設置しました

新しい記事を書きました

Vaster2にはじめからついているメニューバーは、読み込み時にいったん開いてから閉じる仕様のようです。

項目が多くなるといささか見た目がよろしくないと感じました。なので参考サイトを見ながら新しくメニューを設置しました。

参考サイトのものは上部にメニューバーが固定されていて、メニューを開くと記事などに覆いかぶさる（重なる）タイプです。

このブログはGoogle AdSenseを設置していて、アドセンスのポリシーを見てみるとポリシー違反になるのかもと思いました。

偶発的クリックの回避
偶発的クリックの誘導
Google 広告のクリックを誘発するような行為は禁止されています。これには、メニュー、ナビゲーション、ダウンロード用リンクといったウェブサイトの他のコンテンツと誤認させるような方法で広告を配置することも含まれています。
広告の近くにリンク、再生ボタン、ダウンロード ボタン、操作ボタン（[戻る] や [次へ] など）、ゲーム ウィンドウ、動画プレーヤー、プルダウン メニュー、アプリケーションを配置する際には注意が必要です。こうした配置方法は広告の偶発的クリックを招く可能性があります。たとえ意図していなくてもレイアウトが原因で偶発的なクリックが発生してしまったサイト運営者様には、違反通知が送信される場合があります。

広告の配置に関するポリシー - AdSense ヘルプ

確信はないものの、安全策をとってメニューを開いたときにコンテンツ（記事など）が押し下がるものにしました。（スクロールした時にメニューバーも移動してしまいます）

また、早くなるかもしれないという考えからJQueryのバージョンをデフォルトの1.8.2から3.3.1に変更しました。

JQueryのバージョンを変更したことによりJavaScriptの部分が参考サイトと異なります。

id名などは各自のものを使ってください。

HTMLを編集します。必ずバックアップを取ってから作業してください。

準備

スマホのとき既存のメニューバーを表示させない

レスポンシブデザインのところに#PageList1 {display:none;}を追加

/*   レスポンシブデザイン
--------------------------------------------------- */        
@media screen and (max-width: 768px){
#PageList1 {
display: none;
}

[テーマ]-[HTMLの編集]からメニューを開くボタンのCSSをコメントアウトか削除。（もしくはdisplay:block !important;をdisplay: none;に書き換え）

 /*  メニューを開くボタン  */
/*
 .button-toggle{
 display:none;
 }
 @media screen and (max-width: 768px){
  .button-toggle{
  display:block !important;
  width:90%;
  box-sizing:border-box;

  color:#fff;
  padding:8px 10px;
  margin:10px auto;
background:#008ec2;
  border:2px solid #fff;
  }
  }
*/

JavaScript

[テーマ]-[HTMLの編集]から既存のメニューバー開閉用？のJavaScriptをコメントアウトか削除。 （コメントアウト・削除をしなくても動きました）

<!--レスポンシブメニューのためのjavascriptコード-->
<!--
<script type='text/javascript'>
 /*<![CDATA[*/
$(function(){
if ($(window).width()<900) {
    $('nav').css('display','none');
    $('.button-toggle').on('click', function() {
        $('nav').slideToggle();
    });
 }
});
 /*]]>*/
</script>
-->

追加するコード

HTML

[レイアウト]-[ガジェットを追加]よりHTML/JavaScriptガジェットをheaderに追加して下記を記述

参考サイトと構造は同じです。

<li><a href="の部分は各自変更が必要です。

<div style="clear:both"></div>
<div id="menu">
<div id="menu-inner">
    <div id="btn-content">
 <span id="menu-btn"><i class="fa fa-align-justify" aria-hidden="true"></i>MENU</span>
    </div>
    <ul id="menu-content">
      <li><a href="https://sutasutashiki.blogspot.jp">ホーム</a></li>
      <li><a href="#Label1">カテゴリー</a></li>
      <li><a href="#PopularPosts1">よく読まれている記事</a></li>
      <li><a href="#related-posts">関連記事</a></li>
    </ul>
</div>
</div>
<div style="clear:both"></div>

CSS

[テーマ]-[HTMLの編集]から直接記述するか、<style type="text/css"> </style>で囲んで[レイアウト]-[ガジェットを追加]よりHTML/JavaScriptガジェットでheaderに追加。

possition:flex;の部分をコメントアウトするか削除すれば固定が解除されました。

コンテンツに覆いかぶさる必要がないでz-indexの部分もコメントアウトまたは削除します。

自分の環境だけかもしれませんが、メニューを開いたときにコンテンツが1pxほど? ずれる（カラム落ち）したので box-sizing: border-box;を追加しました。

色を少し変更しました。

@media screen and (min-width:767px){/*PC時に非表示する要素*/
#menu{
    display: none;
}}
@media screen and (max-width:768px){/*スマホ時に表示する要素*/
#menu{
    background: #333333;/*背景色*/
    /* margin: 30px auto; */
}
#container{
    margin-top: 40px;
}
#menu-inner{
    background: #333333;/*背景色*/
    /* position: fixed; */
    top: 0;
    margin: 10px 10px -20px 10px auto;
    /* z-index: 2; */
    width: 100%;
    height: auto;
    opacity: 0.8;
    margin-left:0px;
}
#btn-content{text-align: right;}/*ボタン位置*/
#back-to-top a{
display: inline-block;
    padding: 8px 1px;
    margin: 5px;
    cursor: pointer;
    background: #333333;/*ボタン背景色*/
    color: #fff;/*ボタン文字色*/
    font-size: 70%;
}
#menu-btn{
    display: inline-block;
    padding: 8px 15px;
    margin: 5px;
    cursor: pointer;
    background: #333333;/*ボタン背景色*/
    color: #fff;/*ボタン文字色*/
 font-size: 100%; /* default 70% */
}
#menu-content{
    display: none;
    padding-left: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
}
#menu-content > li{
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    float: left;
    width: 50%;
    height: 40px;/*ボタンの大きさ*/
}
#menu-content > li > a{
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    line-height: 40px;/*ボタンの大きさ*/
    background: #333333;/*背景色*/
    color: #fff;/*文字色*/
    font-size: 90%;
    padding: 0;
    text-decoration: none;
    /* z-index: 2; */
 border: 1px solid #4e4e4e;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -ms-box-sizing: border-box;
 
}}

Javascript

jQueryを3.3.1にしたのでJavaScriptを変更しました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

を記述したあとに下記のスクリプトを記述します

ページの読み込みが早くなるというので</body>の直上に設置しました。

メニューバー開閉用

<script type='text/javascript'>
$(function() {
    $('#btn-content').on('click', function() {
        $(' ~ #menu-content', this).slideToggle();
    });
});
</script>

他に効率的な書き方があると思いますが、これでとりあえずは動きます。

スムーズスクロール

ネットで調べるとよく出てくるコードをjQuery3.3.1でも動くようにしました。具体的には3行目の#を"で囲みました。

スクロール位置調整のために数字を入れました（マイナス数字）var position = target.offset().top -10;

</body>の直上に設置しました。

<script type='text/javascript'>
$(function(){
   $('a[href^="#"]').click(function() {
      var speed = 400; // ミリ秒
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top -10;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
});
</script>