【CSS】WordPressの記事内で画像の切り替えを自動でする方法

ここでは、Wordpressの記事内で画像を自動で切り替える方法について紹介しています。

この記事の対象

CSSで画像を切り替えたい方
画像を自動で切り替える方法を知りたい方
特定の記事内のみで実装したい方

INDEX

行ったこと
1. 任意の場所でカスタムHTML挿入

行ったこと

こちらを参考にさせてもらいました。参考サイトを基に少しアレンジしてみました。

任意の場所でカスタムHTML挿入

<!-- HTML -->
<div class="testBox">
  <img src="test1.png" alt="Image 1" class="item1">
  <img src="test2.png" alt="Image 2" class="item1">
</div>

<!-- CSS -->
<style>
.testBox {
  height: 400px;
  overflow: hidden;
  position: relative;
}

/* img*/
.item1 {
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 10s infinite;
  animation: anime 10s infinite;
}

.item1:nth-of-type(2) {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

/* アニメーション */
@keyframes anime {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>

以下は解説になります。

<!-- CSS -->
<style>
.testBox {
  height: 400px;
  overflow: hidden;
  position: relative;
}

「testBox」クラスでは、高さを400pxに制限し、オーバーフローを隠し、相対位置を指定しています。

/* img */
.item1 {
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 10s infinite;
  animation: anime 10s infinite;
}

「.item1」クラスでは、画像のスタイルやアニメーションを設定しています。

opacityプロパティを使用して初期状態では画像を透明にし、widthとheightプロパティを100%に指定して画像を親要素に合わせて表示されるようにしています。object-fitプロパティは、画像のアスペクト比を維持しながら親要素に合わせて画像を拡大縮小する設定です。

さらに、positionプロパティをabsoluteに指定して、画像を親要素に対して絶対位置で配置しています。leftとtopプロパティを0に指定して、画像を親要素の左上隅に配置しています。また、-webkit-animationとanimationプロパティを使用して、animeという名前のキーフレームアニメーションを設定しています。-webkit-animationはWebKitベースのブラウザ（例: Chrome、Safari）向けのプレフィックスです。

.item1:nth-of-type(2) {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

animation-delayプロパティを使用して、2つ目の画像のアニメーションを5秒後に開始するように設定しています。

/* アニメーション */
@keyframes anime {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>

animeキーフレームアニメーションは、画像の透明度を0%から50%に徐々に上げてから、50%から100%までの間で透明度を0%に戻すことで、画像がふわっと表示されるように設定しています。

おすすめ書籍