ここに挨拶文などを入力します。サンプルテキスト。ここに挨拶文などを入力します。サンプルテキスト。ここに挨拶文などを入力します。サンプルテキスト。ここに挨拶文などを入力します。サンプルテキスト。ここに挨拶文などを入力します。サンプルテキスト。
ここに挨拶文などを入力します。サンプルテキスト。ここに挨拶文などを入力します。サンプルテキスト。ここに挨拶文などを入力します。サンプルテキスト。ここに挨拶文などを入力します。サンプルテキスト。
<!-- ここから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の都合上大きな端末用メニューは入れていません。)
「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」部分です。