<header> <h1 id="logo"><a href="index.html"><img src="images/logo-home.png" alt="あなたのサイト名"></a></h1> <!--開閉メニュー--> <div id="menubar"> <nav> <ul> <li><a href="#kodawari">私たちのこだわり</a></li> <li><a href="#service">サービス紹介</a></li> <li><a href="#flow">ご利用の流れ</a></li> <li><a href="#voice">お客様の声</a></li> <li><a href="#faq">よく頂く質問</a></li> <li><a href="#footer">アクセス</a></li> </ul> </nav> </div> <!--/#menubar(開閉メニュー)--> <div id="header-box"> <ul class="btn"> <li><a href="#"><i class="fa-solid fa-envelope"></i>オンライン予約</a></li> <li><a href="#"><i class="fa-solid fa-phone-volume"></i>お電話でのご予約</a></li> </ul> </div> </header>
cssフォルダのstyle.cssから「header」「#menubar」「#header-box」でテキスト検索してみて下さい。詳しい解説もあります。
サイズ変更はstyle.cssの「#logo img」のwidthの数字で変更できます。
ロゴ画像のalt="あなたのサイト名"の部分はあなたのサイト名に入れ替えて下さい。
<!--開閉ボタン(ハンバーガーアイコン)--> <div id="menubar_hdr"> <span></span><span></span><span></span> </div>
cssフォルダのstyle.cssから「menubar_hdr」でテキスト検索してみて下さい。詳しい解説もあります。
当テンプレートには使っていませんが、ドロップダウンメニューも使えます。
ドロップダウンを使う為の特別な設定は不要ですが、必ず親となるli要素の「中」に入れるようにして下さい。
OKな例
<li><a href="">親となるメニュー</a> <ul> <li><a href="">ドロップダウンのメニュー</a></li> <li><a href="">ドロップダウンのメニュー</a></li> </ul> </li>
NGな例
<li><a href="">親となるメニュー</a></li>
<ul>
<li><a href="">ドロップダウンのメニュー</a></li>
<li><a href="">ドロップダウンのメニュー</a></li>
</ul>
<!--開閉ボタン(ハンバーガーアイコン)-->
<!--開閉メニュー-->
ハンバーガーアイコンがなくなると、残ったボタン(オンライン予約とお電話でのご予約)の右側が空いてしまうので、
気になる場合はstyle.cssの、
/*画面幅900px以上の追加指定*/ @media screen and (min-width:900px) { #header-box { margin-right: 30px; /*ハンバーガーアイコンと重ならないように適当な余白*/ } }/*追加指定ここまで*/