サイト名

ここにキャッチコピーを入れます。

ここに挨拶文などを入力します。サンプルテキスト。ここに挨拶文などを入力します。サンプルテキスト。ここに挨拶文などを入力します。サンプルテキスト。ここに挨拶文などを入力します。サンプルテキスト。ここに挨拶文などを入力します。サンプルテキスト。

ここに挨拶文などを入力します。サンプルテキスト。ここに挨拶文などを入力します。サンプルテキスト。ここに挨拶文などを入力します。サンプルテキスト。ここに挨拶文などを入力します。サンプルテキスト。

「header」ブロックについて

<!-- ここからheader -->
<header>

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

    <!-- スライドショー(mainimg) -->
    <div class="mainimg">

    <div class="slide">
    <a href="#"><img src="images/1.jpg" alt=""></a>
    </div>

    <div class="slide">
    <a href="#"><img src="images/2.jpg" alt=""></a>
    </div>

    <div class="slide">
    <a href="#"><img src="images/3.jpg" alt=""></a>
    </div>

    <div class="slide-indicators"></div><!--現在表示中ボタン-->

    </div>
    <!--/.mainimg-->

<h2 class="fade-in-text">ここにキャッチコピーを入れます。</h2>
<p class="up">ここに挨拶文などを入力します。・・・・・</p>
<p class="up">ここに挨拶文などを入力します。・・・・・</p>
	
</header>

主なスタイルは

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

大きな端末で見た場合に見える両サイドの大きな画像について

「images/bg.jpg」です。お好みで入れ替えて下さい。
サイズは自由で構いませんが端末サイズで配置バランスがかわるのでおかしくないような写真を選んで下さい。
設定は、css/style.cssの「大きな端末で見た際の背景画像」で行っています。

大きな端末で見た場合に見える両サイドのメニューについて

cssフォルダのstyle.cssから「PC向けメニュー」でテキスト検索してみて下さい。詳しい解説もあります。
(※このページには、cssの都合上大きな端末用メニューは入れていません。)

header内にある背景画像について(_mensタイプは除く)

「images/bg_header.png」です。

ロゴ画像

「images/logo.png」です。psdファイルも梱包していますのでテキストを打ち替えてそのままpngを上書きすれば入れ替わります。
ロゴ画像のalt="サイト名"の「サイト名」部分はあなたのサイト名に入れ替えて下さい。

スライドショー

images内の1.jpg〜3.jpgを読み込んでいます。自由に入れ替えて頂いて構いません。
スライドショーのスタイルは、cssフォルダから「スライドショー」でテキスト検索して下さい。

スライドショー画像を追加したい場合は、単純にhtmlからブロックを1個コピペし、画像ファイル名を入れ替えればOKです。

キャッチコピーのテキストアニメーション

class="fade-in-text"
をつけるとテキストアニメーションになります。お好みで他の見出しにも使ってみて下さい。
cssなどの組み合わせによっては意図通りに動かない場合もあります。ご了承下さい。

設定は、js/main.jsの「テキストのフェードイン効果」のブロックと、style.cssの「テキストのフェードイン設定」にあります。

挨拶文のテキストアニメーション

class="up"
をつけるとこのアニメーションになります。このテンプレートでは随所に使用していますがお好みで調整して下さい。

設定は、css/inview.cssの「.up」や「.upstyle」部分です。