あなたのサイト名

※ロゴが白で見えないので、ヘッダー背景をグレーにしています。

ヘッダーブロック

<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="あなたのサイト名"の部分はあなたのサイト名に入れ替えて下さい。

ハンバーガーアイコンは、html下部にあります

<!--開閉ボタン(ハンバーガーアイコン)-->
<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;	/*ハンバーガーアイコンと重ならないように適当な余白*/
	}

	}/*追加指定ここまで*/

を丸ごと削除して下さい。
「ハンバーガーアイコンと重ならないように」でテキスト検索かけると場所がわかります。