あなたのサイト名

ヘッダーブロック

<!--▼▼▼▼▼ここから「ヘッダー」-->
<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="あなたのサイト名"の部分はあなたのサイト名に入れ替えて下さい。

ハンバーガーアイコン&開閉メニューは、html下部にあります

<!--開閉ボタン(ハンバーガーアイコン)-->
<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;

に変更して下さい。

背景の装飾画像(kazari2.png)

style.cssのbodyのbackgroundで指定しています。
現状だと、画面の上から50pxで幅は画面の40%にしていますが、必要に応じて変更して下さい。
この画像のシリーズはこちらからダウンロードできます。

尚、テンプレートのうち、語尾が_bgではなく_animationとついたタイプはアニメーションタイプになります。お好みの方を選んで下さい。