CSSだけで実現！一定間隔で画像を切り替える方法（ブログ・サイトに一つ上の工夫ができる）

オシャレなサイトに必須！CSSだけで定期的に画像をフェードインしながら切り替える方法をご紹介します。

読者からの好感度もアップするこの方法は、JavaScriptを使わなくても実現可能。

ページのワンアクセント表現でも最適で、複数の画像を一定間隔で切り替えながら、スタイリッシュに表示することができます。これからサイトを作る方やデザインにこだわりたい方必見の記事です。

ポイント

本記事では、

CSSだけで実現する画像を一定間隔で切り替える方法を解説します。

表現力豊かなデザインの素敵なブログを作れますね。

「アフィリエイトスクールのススメ」はこちら

1 画像を一定時間でボワっと切り替えるサンプル
2 WordPress で一定間隔での画像切り替える仕組み（CSSだけで実現）
3 WordPress で一定間隔での画像切り替える方法（CSSだけで実現）
4 まとめ

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

５枚の画像を一定時間（２秒ごと）に切り替えています。

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

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

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

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

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

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

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

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

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

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

記事作成画面で「カスタム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」は、「切り替え間隔（例：２秒）× 画像の枚数（例：５枚）」の値（例：10s）に書き換える
「0%」～「100％」の％指定は、画像の枚数によって変える（枚数ごとの数値は後述参照）
「animation-delay: 2s;」は、切り替え間隔の掛け数を指定する（２秒おきなら、2s、4s、6s、……）

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

値	画像２枚	画像３枚	画像４枚	画像５枚
opacity: 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 完成

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

画像２枚のパターン

画像３枚のパターン

画像４枚のパターン

画像５枚のパターン

WordPress のお役立ちテクニックはこちら

まとめ

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

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

ポイント

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

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

■ JavaScript を利用して実現する方法はこちら

: 画像を一定間隔で切り替える方法（CSS＋JavaScript）

CSS と JavaScript を利用して、複数の画像を一定間隔でフェードインしながら表示を切り替える方法です。ページのポイントで使うとオシャレなサイト（記事）になり、読者からの好感度向上が期待できます。

続きを見る

40代・50代「会社員におすすめ」の在宅でできる副業５選

: 40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる）

４０代、５０代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では４０代、５０代におすすめの副業５選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

: 20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる）

２０代、３０代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（または少ない）主婦におすすめの副業ができれば安心ですね。記事では、２０代、３０代専業主婦におすすめの副業３選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介！

: 地方で快適に暮らす！地方がチャンスのおすすめ副業を紹介！在宅でパソコンがあれば「できる」副業

都会は住みにくい！地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす！おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る