<!--▼▼▼▼▼ここから「ヘッダー」--> <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> <!--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;
色変更は、images/kazari1.svgを開いて直接編集して下さい。
kazari.aiも梱包していますが、こちらはテンプレートで実際に使用するものではなくIllustrator用の素材として梱包しています。
SVGアニメーションを自作の画像にしたい場合当サイトマニュアルをご覧下さい。
尚、テンプレートのうち、語尾が_animationではなく_bgとついたタイプは背景固定画像タイプになります。お好みの方を選んで下さい。