サイト名

「ヘッダー」ブロックについて

<!--▼▼▼▼▼ここから「ヘッダー」-->
<header>

<h1 id="logo"><a href="index.html"><img src="images/logo.svg" alt="サイト名"></a></h1>

<nav>
<ul>
<li><a href="#kodawari">企業理念</a></li>
<li><a href="#brand">企業理念</a>
	<ul>
	<li><a href="#">企業理念メニュー</a></li>
	<li><a href="#">企業理念メニュー</a></li>
	<li><a href="#">企業理念メニュー</a></li>
	</ul>
</li>
<li><a href="#koe">お客様の声</a></li>
<li><a href="#faq">よく頂く質問</a></li>
</ul>
</nav>

<!--回転する円形のテキストアニメーション-->
<img src="images/bg_text1.svg" alt="" class="animation-text spin">

</header>
<!--▲▲▲▲▲ここまで「ヘッダー」-->

主なスタイルは

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

ロゴ画像

サイズ変更はstyle.cssの#logoのwidth:の数字で変更できます。端末サイズ別に2箇所あるので必要に応じて変更して下さい。
画面幅が501px以上だとスライドショーのSVG枠があるので、そこに収まるようにする必要があります。(つまりそのまま使うのであればロゴサイズは変更しない方がいい)
サンプルテンプレートはsvg形式になっていますが、pngなど他の拡張子でご用意頂いてもOKです。その場合は上記html側のlogo.svgをlogo.pngなど変更して下さい。

ロゴ画像のalt="サイト名"の「サイト名」部分はあなたのサイト名に入れ替えて下さい。

ヘッダー内メニューと、開閉メニューはそれぞれ別のhtmlになっています

他のテンプレートでは共通しているものもあるので、編集の際はご注意下さい。
開閉メニューのhtmlコードは、htmlの下の方に入っています。

ヘッダー内メニューは画面幅900px未満で非表示になります

現状からメニュー数を増やす際は、画面幅を狭くすると途中でメニューが改行されるので、気になる人はこのブレイクポイントを変更して下さい。cssフォルダのstyle.cssの、

/*ヘッダー内メニュー

の中にある、
@media screen and (min-width:900px) {

の900pxがブレイクポイント設定です。この数字を変更して下さい。

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

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

右上のハンバーガーアイコンは

headerではなくhtmlの下の方にある「開閉ボタン(ハンバーガーアイコン)」という所から指定されています。
ハンバーガーアイコンのスタイルを変更したい場合は、style.cssから「menubar_hdr」でテキスト検索してみて下さい。