WordPress

画像を一定間隔で切り替える方法(CSSだけで実現)


財布をもってほほ笑む女性

CSS だけを利用して、複数の画像を一定間隔でフェードインしながら表示を切り替える方法です。

ページのポイントで使うとオシャレなサイト(記事)になり、読者からの好感度向上が期待できます。

JavaScript を使って実現する方法もありますが、本記事では CSS だけで実現しています。

画像を一定時間でボワっと切り替えるサンプル

5枚の画像を一定時間(2秒ごと)に切り替えています。

切り替わるタイミングで、画像がフェードインします。

WordPress で一定間隔での画像切り替える仕組み(CSSだけで実現)

CSS だけで実現する場合は、animation (アニメーション)を使います。

画像を数秒おきに切り替える場合、以下のように各々表示~非表示を繰り返すように作成します。

画像を切り替えるイメージ

WordPress で一定間隔での画像切り替える方法(CSSだけで実現)

■ Step.1 画像をメディアライブラリにアップする

メディアライブラリへの画像のアップ画面

WordPress の管理画面から「メディア」→「ライブラリ」を選択して、表示する画像をメディアライブラリにアップします。

■ Step.2 画像の URL を取得する

メディアライブラリの画像の詳細から URL を取得します。表示する全画像の URL を取得しておいてください。

■ Step.3 画像の配置と切り替えコードを書く

カスタムHTMLブロックを利用する

記事作成画面で「カスタムHTML」ブロックを利用します。

次のコードを記入します。

<div class="myChangeImage">
    <img src="https://xxxxxx.com/iamge/image1.jpg" width="400px" height="225px">
    <img src="https://xxxxxx.com/iamge/image2.jpg" width="400px" height="225px">
    <img src="https://xxxxxx.com/iamge/image3.jpg" width="400px" height="225px">
    <img src="https://xxxxxx.com/iamge/image4.jpg" width="400px" height="225px">
    <img src="https://xxxxxx.com/iamge/image5.jpg" width="400px" height="225px">
</div>

<style>
.myChangeImage{
    position: relative;
    width : 400px;
    height : 225px;

    border : 1px solid;
}

.myChangeImage img{
    position: absolute;
    top: 0;
    left: 0;
    animation: ChangeImage 10s infinite;
    opacity: 0;
}

@keyframes ChangeImage{
    0%{ opacity: 0;}
    10%{ opacity: 1;}
    20%{ opacity: 1;}
    30%{ opacity: 0;}
    100%{ opacity: 0;}

}

.myChangeImage img:nth-of-type(1) {
     animation-delay: 0s;
}
.myChangeImage img:nth-of-type(2) {
   animation-delay: 2s;
}
.myChangeImage img:nth-of-type(3) {
    animation-delay: 4s;
}
.myChangeImage img:nth-of-type(4) {
    animation-delay: 6s;
}
.myChangeImage img:nth-of-type(5) {
    animation-delay: 8s;
}
</style>

  • 「"https://xxxxxx.com/iamge/image1.jpg"」は、Step.2 で取得した画像の URL に差し替える
  • サイズ(例:400px、225px)は任意の値に修正する
  • 「animation: ChangeImage 10s infinite;」の「10s」は、「切り替え間隔(例:2秒)× 画像の枚数(例:5枚)」の値(例:10s)に書き換える
  • 「0%」~「100%」の%指定は、画像の枚数によって変える(枚数ごとの数値は後述参照)
  • 「animation-delay: 2s;」は、切り替え間隔の掛け数を指定する(2秒おきなら、2s、4s、6s、……)

■ 画像枚数別おすすめパーセンテージ

画像2枚画像3枚画像4枚画像5枚
opacity: 0;0%0%0%0%
opacity: 1;25 %20 %15 %10 %
opacity: 1;50 %33 %25 %20 %
opacity: 0;75 %63 %40 %30 %
opacity: 0;100 %100 %100 %100 %

■ Step.4 完成

完成です。プレビューして動作を確認してください。

画像2枚のパターン

画像3枚のパターン

画像4枚のパターン

画像5枚のパターン

まとめ

CSS だけを利用して、複数の画像を一定間隔でフェードインしながら表示を切り替える方法です。

ページのポイントで使うとオシャレなサイト(記事)になり、読者からの好感度向上が期待できます。

  • 画像のURLを取得する
  • カスタムHTMLに切り替えようのコードを張り付ける
  • 枚数によってアニメーションの設定が異なる

いままで、「どうやって作っているんだろう?」と不思議だった世の中のオシャレなページの作り方の一端が見えてきた気がしますね。

WordPress のおすすめテーマ



  • SEO に強く【集客力強化】が望める
  • かっこいい(かわいい)ホームページを作りやすい
  • 初心者でも使えて、上級者になっても満足できる


本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。



AFFINGER の紹介はこちら




AFFINGER(アフィンガー)テーマは「ここ」がすごい!【WordPress 初心者必見!】

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ(読者)を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る


WordPress の情報、テクニック一覧はこちらをクリック!










ブログランキング・にほんブログ村へ  




Presented By Irojiro Haraguro .Com