【Vaster2】CSSでスマホの時のメニューバーを変更【jQueryなし】

2022年01月20日更新

2018年08月29日公開

当サイトはアフィリエイト広告を使用しています

以前作ったものは、jQueryをつかっていたので PageSpeed Insights でレンダリングをブロックすると指摘されていました。なので、今回はCSSのみ（スムーススクロールの部分はJavaScript）でつくりました。閉じているとき

開いたとき。記事などのコンテンツは押し下げられます。

メニューバーは固定ではありません。

HTMLをいじります、必ずバックアップをとってから作業してください。手順としては、既存の「メニューを開くボタン」を表示させない、新しいメニューバーを設置、必要ならばスムーススクロール用のJavaScriptを設置。の3ステップです。初心者がいろいろ調べながら作りました。正確性はありませんので留意してください。追記：Googleカスタム検索を追加したものをつくりました。

【Vaster2】スマホの時のメニューバーにGoogleカスタム検索を追加 | すたすた式

[Blogger][Vaster2] jQueryを使わないトグルメニュー（アコーディオンメニュー）にGoogleカスタム検索を設置しました。

sutasutashiki.blogspot.com

既存のメニューを開くボタンを表示させないこれを表示させない

メニューを開くボタンのCSS @media screen and (max-width: 768px){にある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; } }変更後/* メニューを開くボタン */ .button-toggle{ display:none; } @media screen and (max-width: 768px){ .button-toggle{ display: none; /* 変更 */ width:90%; box-sizing:border-box; color:#fff; padding:8px 10px; margin:10px auto; background:#008ec2; border:2px solid #fff; } }ヘッダーナビゲーションを表示させない自分の環境ではヘッダーナビゲーションが表示されてしまったので下記CSSを追加しました

CSSにある、レスポンシブデザインの@media screen and (max-width: 768px)のところに#PageList1{display: none;}を追加CSS/* レスポンシブデザイン --------------------------------------------------- */ @media screen and (max-width: 768px){ #PageList1 { display: none; }もし削除するなら上のCSSを追加した後に、もし既存のメニューのコードを削除するなら、該当するjQuery, JavaScript, HTML, CSSを削除。今回作るメニューバーは削除しなくても動きます。削除するのは、たぶんこれ（自信がないので削除は様子を見ながらお願いします……）jQuery（他にjQueryに依存しているものがある場合は削除しないでください）<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/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<div class='button-toggle'><i class='fa fa-bars'/>メニューを開く</div>CSS/* メニューを開くボタン */ .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; } }新しいメニューバーを設置「レイアウト」－headerの場所の「ガジェットを追加」－「HTML / JavaScript ガジェット」に下記コードをコピペして保存。

下記コードはこのブログのものです。リンク先などの目標（<li>...</li> の中身）は自分のものでお願いします。（chrome の「検証」やFirefoxの「要素を調査」で調べられます。ともに、右クリックから選ぶか、キーボードのF12キー）追記：当初のものより少しHTMLの構造を変更しました。また、メニューバーを上部に固定するとき用のCSSを追加しました。（コメントアウトしてあります）<div class="cp_menu"> <div class="cp_menu-inner"> <div class="btn-content"> <label for="cp_menu_bar1"><span id="menu-btn"><i class="fas fa-bars" aria-hidden="true"></i> MENU</span></label> </div> <input type="checkbox" name="radio" id="cp_menu_bar1"/> <ul id="link1"> <li><a href="https://sutasutashiki.blogspot.com">ホーム</a></li> <li><a href="#Label1">カテゴリー</a></li> <li><a href="#PopularPosts1">よく読まれている記事</a></li> <li><a href="#related-posts-widget">関連記事</a></li> </ul> </div> </div> <style> @media screen and (min-width:769px){/*PC時に非表示する要素*/ .cp_menu { display: none; }} @media screen and (max-width:770px){/*スマホ時に表示する要素*/ .cp_menu { /* margin: 52px auto; メニュー上部固定用要数値調節 */ } .cp_menu-inner { max-width: 460px; margin: 0 auto; padding: 0; font-size: 1.2em; background: #1b2538; /* position: fixed; メニュー上部固定用 */ /* top: 0; メニュー上部固定用 */ /* z-index: 2; メニュー上部固定用 */ /* margin-left:0px; メニュー上部固定用 */ / *height: auto; メニュー上部固定用 */ } .btn-content { text-align: left;/* ボタン位置 */ } .cp_menu label { width: 25%; display: block; position: relative; margin: 0 0 2px 0; padding: 12px; line-height: 1.5; color: #ffffff; background: #1b2538; cursor: pointer; } #cp_menu_bar1 { /* チェックボックス非表示 */ display: none; } .cp_menu ul { margin: 0; padding: 0; background: #f4f4f4; list-style: none; } .cp_menu li { overflow-y: hidden; max-height: 0; transition: all 0.5s; padding: 0; line-height: 1.5em; } .cp_menu a { display: block; padding: 10px; text-decoration: none; color: #000000; line-height: 1.5; box-sizing: border-box; border-bottom: 1px solid rgba(78,78,78,0.3); } /*リストが増えたらULごとに追加してください*/ #cp_menu_bar1:checked ~ #link1 li { max-height: 3.0em; opacity: 1; }} </style> <i class="fas fa-bars" aria-hidden="true">はFont Awesome 5のものです。Vaster2のデフォルトはFont Awesome 4なので、たぶんこれ <i class="fa fa-bars" aria-hidden="true"></i>を貼り付けれはいいと思います。スムーススクロール用の JavaScript を貼り付け

下記コードを</body>直上に貼り付け <script> var scrollElm = (function() { if('scrollingElement' in document) return document.scrollingElement; if(navigator.userAgent.indexOf('WebKit') != -1) return document.body; return document.documentElement; })(); (function() { var duration = 500; var ignore = '.noscroll'; var easing = function (t, b, c, d) { return c * (0.5 - Math.cos(t / d * Math.PI) / 2) + b; }; //jswing var smoothScrollElm = document.querySelectorAll('a[href^="#"]:not(' + ignore +')'); Array.prototype.forEach.call(smoothScrollElm, function(elm) { elm.addEventListener('click', function(e) { e.preventDefault(); var targetElm = document.querySelector(elm.getAttribute('href')); if(!targetElm) return; var targetPos = targetElm.getBoundingClientRect().top -30; var startTime = Date.now(); var scrollFrom = scrollElm.scrollTop; (function loop() { var currentTime = Date.now() - startTime; if(currentTime < duration) { scrollTo(0, easing(currentTime, scrollFrom, targetPos, duration)); window.requestAnimationFrame(loop); } else { scrollTo(0, targetPos + scrollFrom); } })(); }) }); })(); </script>if(currentTime < duration)のなかの<記号を実体参照の<に変更しました。if(currentTime &lt duration)スクロールしたときに上に間隔が欲しかったので var targetPos = targetElm.getBoundingClientRect().top;の行にマイナス数字を入れました。（とりあえず -30）var targetPos = targetElm.getBoundingClientRect().top -30;補足右下にある「上に戻る」ボタンが動かなくなったので、ボタンのコードを修正しました。href="#"をhref="#Header1"に変更<a class="top-button" rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#Header1" title="Back to Top"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEcKVJi7kLASowdBDEKRiVkKkXQngawIJj8UMtXtdrN0WBqYj4WhnncFYzaBz9Q-DZGpcUTst1VSoi0Mg-7A9oELZBGgbJ71iQxOceQV2G1REFLxb0PSdp5T3pH2Q2g1-RIBTeJLQ4UtMv/s1600/back-to-top-button-style-7.png" height="48" width="48" /></a>参考サイト