<!--▼▼▼▼▼ここから「ヘッダー」--> <header> <h1 id="logo"><a href="index.html"><img src="images/logo.png" alt="SAMPLE COMPANY"></a></h1> <nav> <ul> <li><a href="#koe">お客様の声</a></li> <li><a href="#products">制作実績</a> <ul> <li><a href="#">ドロップダウンメニュー</a></li> <li><a href="#">ドロップダウンメニュー</a></li> <li><a href="#">ドロップダウンメニュー</a></li> </ul> </li> <li><a href="#plan">料金プラン</a></li> <li><a href="#faq">よく頂く質問</a></li> <li><a href="#flow">制作の流れ</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul> </nav> </header> <!--▲▲▲▲▲ここまで「ヘッダー」-->
cssフォルダのstyle.cssから「header」でテキスト検索してみて下さい。詳しい解説もあります。
サイズ変更はstyle.cssの#logo imgのwidth:の数字で変更できます。端末サイズ別に2箇所あるので必要に応じて変更して下さい。
ロゴ画像のalt="SAMPLE COMPANY"の部分はあなたのサイト名に入れ替えて下さい。
ドロップダウンを使う為の特別な設定は不要ですが、必ず親となる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>
他のテンプレートでは共通しているものもあるので、編集の際はご注意下さい。
開閉メニューのhtmlコードは、htmlの下の方に入っています。「開閉ブロック」でテキスト検索をかけてみて下さい。
現状からメニュー数を増やす際は、画面幅を狭くすると途中でメニューが改行されるので、気になる人はこのブレイクポイントを変更して下さい。cssフォルダのstyle.cssの、
/*ヘッダー内メニュー
@media screen and (min-width:900px) {
headerではなくhtmlの下の方にある「開閉ボタン(ハンバーガーアイコン)」という所から指定されています。
ハンバーガーアイコンのスタイルを変更したい場合は、style.cssから「menubar_hdr」でテキスト検索してみて下さい。