WordPress

【WordPress】画像をフェードイン(ぼわっと)表示する!簡単な CSS で実現します




記事(ページ)を表示する際に、WordPress の記事の画像をフェードイン(ぼわっと)表示を簡単な CSS で実現する方法の紹介です。

※ ブラウザによっては動作しない場合があります。


フェードイン(ぼわっと)で画像を表示させる例


実際にフェードイン(ぼわっと)表示するサンプルです。ページ表示時に動きますので、下のボタンを押してページを再読み込みしてください。





ボタンを押すとページを再読み込みします。

ページ表示時に上の画像を「ぼわっ(フェードイン)」と表示しています。

(ブラウザによっては動作しない場合があります)


画像をフェードイン(ぼわっと)表示させるCSS


CSS の animation プロパティを使います。


<style>

.calssname {
    animation: fadeIn 3s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

</style>


classnameclassnameフェードインさせる画像のクラス名を指定します
animation-namefadeIn[fadeIn] で画像をフェードインします。
animation-duration3sアニメーションにかける時間です。[3s] で 3秒です。
animation-timing-function easeアニメーションの変化を指定します。
[ease] は規定値で、アニメーションの開始・終了付近の動きを滑らかにします。
animation-delay0アニメーションの開始を遅らせる秒数です。
[0] で、すぐにアニメーションを始めます。
animation-iteration-count1アニメーションを繰り返す回数です。
[1] で1回だけアニメーションします。
animation-directionnormalnormalnormal] で繰り返しを行いません。
@keyframesアニメーション開始時と終了時の不透明度(開始時 0%、終了時 00%)を指定します。

特定の画像をフェードインで表示する場合は、[classname] の部分を画像のクラス名をに書き換えて、記事にコードを埋め込みます。


サイト全体(ページ内部)の画像をフェードインさせる場合


ページ内部の全画像をフェードインで表示する場合は、以下のクラス名を対象にします。


クラス名種類対象の画像
wp-post-imageWordPress 標準投稿サムネイルの画像
wp-block-imageWordPress 標準
(Gutenbergグーテンベルク利用時)
Gutenbergグーテンベルクで投稿した記事内の画像
st-cardlink-cardテーマ [AFFINGER5] 利用時ヘッダーカードの画像

※ WordPress のテーマによっては、他にもクラスが必要な場合があります。


クラス名を反映した CSS は以下となります。


.wp-post-image {
    animation: fadeIn 3s ease 0s 1 normal;
}

.wp-block-image {
    animation: fadeIn 3s ease 0s 1 normal;
}

/* テーマ AFFINGER5 の場合のみ */
.st-cardlink-card {
    animation: fadeIn 3s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


こちらを WordPress の追加 CSS に記述します。



WordPress の管理画面から [外観] → [カスタマイズ] → [追加CSS] を選択します。

追加CSS にフェードイン用のコードを埋め込んで保存(公開)して完成です。


まとめ


記事(ページ)を表示する際に、WordPress の記事の画像をフェードイン(ぼわっと)表示を簡単な CSS で実現する方法の紹介です。



  • CSS の animation で実現します
  • サイト全体の画像を対象にする場合は [wp-post-image]、[wp-block-image] クラスを対象にします
  • サイト全体の画像を対象にする場合は [追加CSS] にコードを埋め込みます


いろいろな工夫で、かっこいいページを作りましょう(^^)/




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









Presented By Irojiro Haraguro .Com

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