WordPress

画像を一定間隔で切り替える方法(CSS+JavaScript)

広告:ページ内にてアフィリエイト広告を利用しています。

画像を一定間隔で切り替える方法

サイト上で一定間隔で自動で画像が切り替わるとオシャレですね。ページのポイントで使うと素敵です。読者からの好感度向上が期待できますね。

ポイント

本記事では、

CSS と JavaScript を利用して、複数の画像を一定間隔で切り替える方法を解説します。

フェードインしながら表示を切り替えていきます。

おすすめ副業

\ココナラ成功パターンを詳しく見たい方は こちら をクリックしてください/

PR

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

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

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

画像の順番概要
1枚目丸の内のビル群とクラシックな東京駅のコントラストとライトアップが美しい
2枚目青空を見据えて凱旋門に向かう道がかっこいい
3枚目京都の小路、奥ゆかしさに秘める日本の美が美しい

WordPress で一定間隔での画像切り替えを実現する方法

WordPress のエディタでは、イメージをブロックごとに指定していくため、若干の工夫が必要です。WordPress での実現手順を紹介します。

■ Step.1 画像を配置してグループ化する

グループ化

表示したいイメージを縦に並べて配置し、すべてのイメージを選択してグループ化します。

ポイント

配置するイメージは、同じ大きさ(高さ、幅)のイメージを用意すると、よりきれいに見えます。

■ Step.2 グループ(親)にクラス名を記載する

クラスを指定

作成したグループ(親)を選択している状態で、グループのプロパティから「高度な設定」の「追加 CSS クラス」に「クラス名」を記載します。

ここでは仮に「myBaseChangeImg」と名付けます。

■ Step.3 イメージ(子)にクラス名を記載する

クラス名を入れる

「子」として、表示を切り替えたいイメージ(オブジェクト)を個別に選択して、プロパティから「高度な設定」の 「追加 CSS クラス」に「クラス名」を記載します。

ここでは仮に「myChildImage」と名付けます。

並べたイメージすべてに同じクラス名「myChildImage」を付けてください。

■ Step.4 CSSを記載する

縦に並べたイメージを同じ位置に重ね合わせるための CSS ( position ) 記載します。

<style>
.myBaseChangeImg {
    position:relative;
    height:500px;
}
.myChildImage{
    position:absolute;
    opacity:0.0;
    top:0px;
    transition:all 1s ease-in-out;
}
</style>

ページに CSS を適用してください。

■ 親クラス ( myBaseChangeImg  )

概要
position:relative;画像を重ね合わせるためのポジション指定です。
height:500px;画像の高さに合わせて親の高さを強制指定します。

■ 子クラス( myChildImage )

概要
position:absolute;画像を重ね合わせるためのポジション指定です。
opacity:0.0;初期状態ですべての子イメージを透過状態にします。
top:0px;すべての子イメージの上辺の始まり位置を揃えます。
transition:all 1s ease-in-out;表示・非表示で1行かけて透過→表示(または逆)に切り替える指定です。

本文中に記載する場合は「カスタム HTML」ブロックで CSS を記載することも可能です。

CSSを設定する

■ Step.5 JavaScriptを記載する

縦に並べたイメージの表示を一定時間で切り替える JavaScript を記載します。

<script>
var myImageNo = 0;

window.addEventListener('load', function () {
    var myImgArray = document.getElementsByClassName("myChildImage");
    myImgArray[0].style.opacity = 1.0;

    setTimeout(function(){functionChangeImage();}, 5000);
});

function functionChangeImage() {
    var myImgArray = document.getElementsByClassName("myChildImage");

    myImgArray[myImageNo].style.opacity = 0.0;
    myImageNo++;
    if (myImageNo >= myImgArray.length) {
        myImageNo = 0;
    }
    myImgArray[myImageNo].style.opacity = 1.0;

    setTimeout(function(){functionChangeImage();}, 5000);
}
</script>

1個目の 「5000」 が、ページを表示してから最初に切り替わるまでの秒数になります。1000 で 1秒(3秒にする場合は 3000)になります。必要に応じて変えてください。

2個目の 「5000」 が、2回目以降に画像が切り替わる秒数になります。こちらも必要に応じて書き換えて下さい。

JavaScriptを設定する

本文中に記載する場合は「カスタム HTML」ブロックで JavaScript を記載することも可能です。

■ 完成です

完成です。実際にプレビューして、動作を見てみてください。

5秒ごとに画像が切り替わります。

WordPress もっと!お役立ちテクニック

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

まとめ:画像を一定間隔で切り替える方法

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

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

ポイント

  • 切り替える画像を並べてグループ化する
  • 画像は CSS の position で位置を揃える
  • CSS と JavaScript で定期的に透過度を切り替える

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

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

40代・50代「会社員におすすめ」の在宅でできる副業5選(初心者でもできる)

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

続きを見る

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

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

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

続きを見る

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

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

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

続きを見る

この副業
アフィリエイトスクール
ノートパソコン
もっと WordPress のノウハウを知りたいときは

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

クリックアイコン

WordPress のおすすめテーマ

あなたのブログを強力にアピールし、読者を惹きつける、

魅力的なウェブサイトを手軽に作りたいですか?

そんな方に オススメのテーマが「AFFINGER」 です。

「AFFINGER」テーマを使えば、SEOに強く、集客力がアップし、

上級者でも満足できる、魅力的なウェブサイトが作れます。

ブログアフィリエイトを本気で戦うなら、「AFFINGER」の威力を体感してください。

\ WordPress のおすすめテーマ「アフィンガー」を詳しく見る /

AFFINGER の紹介(メリット・デメリットを紹介)

PR
―― 今日のおみくじ ――

第 38 番

”小吉"


今日のメッセージ

為せば成る、為さねば成らぬ。何事も。宝くじ、買わなきゃ当たる、ことはナシw
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

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

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記