「ヘッダー」ブロックについて
<!--▼▼▼▼▼ここから「ヘッダー」--> <header> <h1 id="logo"><a href="index.html"><img src="images/logo.svg" alt="サイト名"></a></h1> <nav> <ul> <li><a href="#kodawari">私たちのこだわり</a></li> <li><a href="#brand">商品ブランド</a> <ul> <li><a href="#">ブランド別メニュー</a></li> <li><a href="#">ブランド別メニュー</a></li> <li><a href="#">ブランド別メニュー</a></li> </ul> </li> <li><a href="#koe">お客様の声</a></li> <li><a href="#faq">よく頂く質問</a></li> </ul> </nav> </header> <!--▲▲▲▲▲ここまで「ヘッダー」-->
主なスタイルは
cssフォルダのstyle.cssから「header」でテキスト検索してみて下さい。詳しい解説もあります。
ロゴ画像
サイズ変更はstyle.cssの#logoのwidth:の数字で変更できます。端末サイズ別に2箇所あるので必要に応じて変更して下さい。
画面幅が501px以上だとスライドショーのSVG枠があるので、そこに収まるようにする必要があります。(つまりそのまま使うのであればロゴサイズは変更しない方がいい)
サンプルテンプレートはsvg形式になっていますが、pngなど他の拡張子でご用意頂いてもOKです。その場合は上記html側のlogo.svgをlogo.pngなど変更して下さい。
ロゴ画像のalt="サイト名"の「サイト名」部分はあなたのサイト名に入れ替えて下さい。
ヘッダー内メニューと、開閉メニューはそれぞれ別のhtmlになっています
他のテンプレートでは共通しているものもあるので、編集の際はご注意下さい。
開閉メニューのhtmlコードは、htmlの下の方に入っています。
ヘッダー内メニューは画面幅900px未満で非表示になります
現状からメニュー数を増やす際は、画面幅を狭くすると途中でメニューが改行されるので、気になる人はこのブレイクポイントを変更して下さい。cssフォルダのstyle.cssの、
/*ヘッダー内メニュー
の中にある、
@media screen and (min-width:900px) {
の900pxがブレイクポイント設定です。この数字を変更して下さい。
ドロップダウンメニューについて
ドロップダウンを使う為の特別な設定は不要ですが、必ず親となる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>
右上のハンバーガーアイコンは
headerではなくhtmlの下の方にある「開閉ボタン(ハンバーガーアイコン)」という所から指定されています。
ハンバーガーアイコンのスタイルを変更したい場合は、style.cssから「menubar_hdr」でテキスト検索してみて下さい。