<!-- ここからspecial --> <section id="special" class="section"> <div class="contents"> <h2><span class="hosoku">Opening Special Menu</span><span class="fade-in-text">オープニング記念特別メニュー</span></h2> <div class="slide5"> <div class="slide img1"> <img src="images/special1.jpg" alt=""> <p class="text">メニュー名をここに入れます 2,200yen</p> <span class="icon-menu-point">NEW</span> </div> <div class="slide"> <img src="images/special2.jpg" alt=""> <p class="text">メニュー名をここに入れます 2,200yen</p> <span class="icon-menu-point">数量限定</span> </div> <div class="slide"> <img src="images/special3.jpg" alt=""> <p class="text">メニュー名をここに入れます 2,200yen</p> </div> <!-- インジケーターボタン(現在表示中ボタン) --> <div class="slide-indicators"></div> </div> <!-- /.slide5 --> </div> </section>
cssフォルダのstyle.cssから「special」や「slide5」でテキスト検索してみて下さい。詳しい解説もあります。
「images/bg_special.jpg」です。お好みで入れ替えて下さい。サイズは自由で構いませんが端末サイズで配置バランスがかわるのでおかしくないような写真を選んで下さい。
「images/bg_special.png」です。これはcssの背景画像で指定しています。
<span class="hosoku">で囲めば英語表記のような小さな文字になります。
<span class="fade-in-text">で囲めば以下のようなアニメーションテキストになります。
アニメーションテキスト
この「<span class="fade-in-text">」は他の部分にも使えますが、相性が悪いとおかしな動きになるので、おかしくならない所にだけ使うようにして下さい。
1枚目の縦横比率(アスペクト比)が残りの画像にも適用されてスライドされます。
このブロック以外にもそのままコピペして画像を入れ替えれば複数設置可能です。
style.cssの「slide5」と、main.jsの「横スライドインタイプのスライドショー」が関連コードです。フェードやスピードの速度などはこれらで調整できます。
枚数を追加したい場合は、htmlの3つ目のブロックをコピペし、追加したい画像ファイル名に書き換えてもらうだけでOKです。
スライドショー左下に出てくる「NEW」や「数量限定」のアイコン画像について。
テキスト部分は直接htmlに書いています。文字が多すぎると崩れるので注意して下さい。
アイコン画像は「images/icon_menu_point.svg」で、cssの背景画像で設定されています。設定は、style.cssの「icon-menu-point」で検索すると出てきます。アイコンを入れ替えたり、サイズや配置を調整したりできます。
スライドショー下部のインジケーターボタンもstyle.cssで「indicator」で検索すると設定が変更できます。