ホームページテンプレートを無料配布中
商用利用もWEB制作業者様利用も全て無料

テンプレートパーティー

タイプ1.既存のスライドショー同様、フェードイン・フェードアウトを繰りかえるタイプ。

※注意点
css3に対応した端末・ブラウザでしかスライド表示されません。css3に対応していない古い端末から見た場合、最後の画像のみが固定表示される事になります。

「タイプ1」は画像全体に対して1つのリンクのみ設定可能です。全ての画像にそれぞれリンク設定をしたとしても最終行(最後の画像)のリンクしか反映されませんのでご注意下さい。

スライドショー用の画像をhtmlに配置。

今回は、「1.jpg(めがねの写真)」「2.jpg(緑の写真)」「3.jpg(地球儀の写真)」の3枚を使う事にします。
以下のダウンロードボタンをクリックすると、完成したファイル一式をダウンロードする事ができます。

サンプル素材のダウンロードはこちら

サンプル素材のプレビューはこちら


それぞれのimgタグにidで名前(slide1、slide2、slide3)を付けておいて下さい。
レスポンシブテンプレートなら、<div>でなく<aside>を使ってもOKです。

cssファイルに、まずはアニメーション用のスタイルを追加。

追加場所はPC向け設定内(cssの前半の部分)であればどこでもOKです。

解説:

「opacity」は透明度の設定です。「0」だと透明になり、「1」で100%の色が出ます。
ここでは使いませんが、例えば「0.5」なら50%になります。

「%」はアニメーションのキーフレームの設定用の数値です。1%から100%まで、1%単位で設定できます。全部で100コマある映像だと思えば分かりやすいと思います。

図にすると以下のような形になります。

《1段目:めがね / 2段目:緑 / 3段目:地球儀》

「めがね」画像の場合、図の1段目になりますが、0%の所で「opacity:0;(透明度0%)」、10%の所で「opacity:1;(透明度100%)」となってフェードイン(徐々に濃くなる)する形になっています。

次のキーフレームは30%の所ですが、ここまでは「opacity:1;(透明度100%)」で表示を続けています。

次のキーフレームは40%の所です。ここで「opacity:0;(透明度0%)」とし、フェードアウト(徐々に薄くなる)させています。

それ以降はずっと透明のままでいいので、最後のフレーム(100%)にも「opacity: 0;」と設定しておきます。

その他のcssも追加設定します

こちらもPC向け設定内(cssの前半の部分)であればどこでもOKです。

※配布中のテンプレートを使う場合、「#mainimg」のスタイルは既に設定されている場合が多いので、既にある場合は既存の「#mainimg」を残して下さい。
但し、テンプレートによってはレイアウトが崩れる場合もあるので、うまくいかない場合サポート掲示板から質問して下さい。

こちらはコメントが加わっているので、実際に上のcssをコピペして読んでみて下さい。
一応、簡単な解説を書いておきますと、「10s」の数字はアニメーションを実行する時間(10秒)です。お好みで増減してみて下さい。「infinite」は無限ループの意味です。1回でストップさせたいならここを「1」にすればOKです。
その他のpositionやwidthなどの値は配布中のスライドショーとだいたい同じ設定内容だと思います。

画像を増やしたい場合のフレームの分割方法

上記のマニュアルはキーフレーム100%分をきれいに分割できましたが、うまくいかない場合もあります。そういった場合は少しだけ余裕をもって分割し、残ったフレームを最後の1枚のフェードアウト用に使うと違和感なくいくと思います。

うまくできない場合は

サポート掲示板からご質問下さい。

<< ホームページテンプレートの使い方・カスタマイズ方法メニューに戻る

↑ PAGE TOP