<!--▼▼▼▼▼ここから「ヘッダー」--> <header> <h1 id="logo"><a href="index.html"><img src="images/logo.png" alt="あなたのサイト名"></a></h1> <ul id="header-box"> <li><a href="#">Online Shop</a></li> </ul> </header> <!--▲▲▲▲▲ここまで「ヘッダー」-->
cssフォルダのstyle.cssから「header」でテキスト検索してみて下さい。詳しい解説もあります。
サイズ変更はstyle.cssの「#logo img」のwidthの数字で変更できます。
ロゴ画像のalt="あなたのサイト名"の部分はあなたのサイト名に入れ替えて下さい。
<!--開閉ボタン(ハンバーガーアイコン)--> <div id="menubar_hdr"> <span></span><span></span><span></span> </div> <!--開閉メニュー--> <div id="menubar"> <nav> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="">ドロップダウン</a> <ul> <li><a href="#">メニューメニューメニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> </ul> </li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> </ul> </nav> <div class="sh">小さな端末でのみ表示させたい情報があれば、ここに記入して下さい。</div> </div>
cssフォルダのstyle.cssから「menubar_hdr」や「menubar」でテキスト検索してみて下さい。詳しい解説もあります。
ドロップダウンを使う為の特別な設定は不要ですが、必ず親となる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>
上記コードの、
<!--開閉ボタン(ハンバーガーアイコン)-->
<!--開閉メニュー-->;
ハンバーガーアイコンがなくなると、残ったボタン(Online Shop)の右側が空いてしまうので、
style.cssの、
#header-box {
right: 70px;
right: 0px;
style.cssのbodyのbackgroundで指定しています。
現状だと、画面の上から50pxで幅は画面の40%にしていますが、必要に応じて変更して下さい。
この画像のシリーズはこちらからダウンロードできます。
尚、テンプレートのうち、語尾が_bgではなく_animationとついたタイプはアニメーションタイプになります。お好みの方を選んで下さい。