[Vaster2] スマホの時にヘッダーを非表示にしました。

2022年01月08日更新

2019年03月22日公開

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

スマホの時、ヘッダーを非表示にしました表示するスペースが狭いスマホで見るときに、ヘッダーはいらないのではないかと思い、非表示にしました。自分は専門家でもなんでもないので、正しいコードかどうか、正確性などはわかりません。web上の情報を参考にしながら、こう書いたらこうなった。という水準のものです。 HTMLを編集します。必ずバックアップを取ってから作業してください。以前作ったメニューバー

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

jQueryを使わずにCSSのみでVaster2にトグルメニュー（アコーディオンメニュー）を設置しました。スムーススクロールの部分はJavaScriptをつかっています。

sutasutashiki.blogspot.com

Before

After

ヘッダーの非表示chromeなどのブラウザで [ F12 ]キー、または[ Ctrl ] + [ Shift ] + [ i ]を押してディベロッパーツールを開いて、ヘッダーの id を調べました。ヘッダーの id はHeader1だったので、レスポンシブデザインのところに下記を追加#Header1 { display:none; }これでスマホの時にヘッダーが消えました

ただこのままだとやや寂しいので、「MENU」と書いてある右側にブログ名を入れましたメニューバーにブログ名を入れる元のコードを書き換えました。

元のコード

<div class="cp_menu">
 <div class="cp_menu-inner">
  <div class="btn-content">
  <label for="cp_menu_bar1"><span id="menu-btn"><svg class="fa-bars" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"/></path></svg> 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>
 <li><a href="#HTML1">サイト内検索</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>

変更したところHTMLの部分にブログ名 update:2019/3/29<span class="cp_title"><a href="https://sutasutashiki.blogspot.com">すたすた式</a></span> <span><a id="cp_title" href="https://sutasutashiki.blogspot.com">すたすた式</a></span>を追加。CSSの部分を変更しました。update:2019/4/20<div class="cp_menu"> <div class="cp_menu-inner"> <div class="btn-content"> <label for="cp_menu_bar1"><span id="menu-btn"><svg class="fa-bars" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg> MENU</span></label> <span><a id="cp_title" href="https://sutasutashiki.blogspot.com">すたすた式</a></span> </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="#PopularPosts2">最近の注目記事</a></li> <li><a href="#PopularPosts1">よく読まれている記事</a></li> <li><a href="#related-posts-widget">関連記事</a></li> <li><a href="#HTML1">サイト内検索</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 { background: #3B5998; border-bottom: solid 2px #1E2D4D; /* margin: 52px auto; メニュー上部固定用要数値調節 */ } .cp_menu-inner { max-width: 460px; margin: 0 auto; padding: 0; font-size: 1.3em; /* Header削除前 1.2em; */ /* position: fixed; メニュー上部固定用 */ /* top: 0; メニュー上部固定用 */ /* z-index: 2; メニュー上部固定用 */ /* margin-left:0px; メニュー上部固定用 */ /* height: auto; メニュー上部固定用 */ } .btn-content { /* text-align: left; Header削除時に削除 */ display: flex; /* Header削除時に追加 */ justify-content: center; /* Header削除時に追加 */ position: relative; /* Header削除時に追加 */ } #cp_title { /* Header削除時に追加 */ color: #fff; font-weight: bold; } .cp_menu label { width: 25%; display: block; /* position: relative; Header削除時に削除 */ /* margin: 0 0 2px 0; Header削除時に削除 */ padding: 11px; /* Header削除前 12px; */ /* line-height: 1.5; Header削除時に削除 */ color: #ffffff; cursor: pointer; left: 0; /* Header削除時に追加 */ position: absolute; /* Header削除時に追加 */ } #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>ブログ名とボタンの配置ブログ名とボタンの配置は flexbox と positiion をつかって、ブログ名を中央、ボタンを左に配置しました。justify-content: center;で子要素を中央に揃えてdisplay: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /* 子要素を中央に揃える */ position: relative;left: 0;とposition: absolute;でメニューボタンを左側に配置.cp_menu label { width: 25%; display: block; /* position: relative; Header削除時に削除 */ /* margin: 0 0 2px 0; Header削除時に削除 */ padding: 11px; /* Header削除前 12px; */ /* line-height: 1.5; Header削除時に削除 */ color: #ffffff; cursor: pointer; left: 0; /* Header削除時に追加 */ position: absolute; /* Header削除時に追加 */ }ベンダープレフィックス（ -webkit- とか）はこちらを使いました。※「MENU」の左にあるマークに関して当初、Vaster2 デフォルトのFont Awesome の webフォントを使っていました。ただ、すこし前にPageSpeed Insights使ったとき、遅延の原因との指摘があったので、svg にして直接埋め込みました。追記：ライセンス表記追加HTML <svg "fa-bars" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"/></svg>CSS update:2019/4/4/* FontAwesome svg ----------------------------------------------- */ /* スマホのときのハンバーガー */ .fa-bars { width:22px; height:22px; vertical-align: text-bottom; fill: currentColor; }最後にトップページではメニューバーと記事との間隔、記事ページでは記事タイトルとの間隔が広かったのですこし縮めました。Before

After

レスポンシブデザインのところの.main-outerにmargin-top: -28px;を追加しました.main-outer { width: 100%; padding: 0 !important; /* float: none; */ margin-left: auto; margin-right: auto; margin-top: -28px; }