あなたのサイト名

ヘッダーブロック

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

ハンバーガーアイコン&開閉メニューと、SVGアニメーションは、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>



<!--SVGアニメーション-->
<svg id="kazari1" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 1000 1200">
  <defs>
    <mask id="clipmask" maskUnits="objectBoundingBox">
      <path d="M895.5-20.5c146.5,303.5-84.9,509.9-342,391-126.5-58.5-119.5-246.5,30.6-227.6,266.8,33.7,312.9,1343.1-658.1,927.1"/>
    </mask>
  </defs>
  <image xlink:href="images/kazari1.svg" width="100%" height="100%" mask="url(#clipmask)"/>
</svg>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.6/vivus.min.js"></script>
<script>
  new Vivus('kazari1', {
    start: 'autostart',
    type: 'scenario-sync',
    duration: 200	//速度。大きいほどゆっくりになります。100〜200ぐらいがいい感じかと。
  });
</script>

主なスタイルは

cssフォルダのstyle.cssから「menubar_hdr」や「menubar」や「kazari1」でテキスト検索してみて下さい。詳しい解説もあります。

ドロップダウンメニューについて

ドロップダウンを使う為の特別な設定は不要ですが、必ず親となる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;

に変更して下さい。

SVGアニメーション

色変更は、images/kazari1.svgを開いて直接編集して下さい。
kazari.aiも梱包していますが、こちらはテンプレートで実際に使用するものではなくIllustrator用の素材として梱包しています。

SVGアニメーションを自作の画像にしたい場合当サイトマニュアルをご覧下さい。
尚、テンプレートのうち、語尾が_animationではなく_bgとついたタイプは背景固定画像タイプになります。お好みの方を選んで下さい。