【WordPress】画像をフェードイン（ぼわっと）表示する！簡単な CSS で実現

サイトの印象を良くするために、ページを開いた瞬間からユーザーの目を引く動きを取り入れることが重要です。効果的な表現方法に、ぼわっと画像を表示させる「フェードイン」表示があります。

ポイント

本記事では、

CSSを使って画像をフェードインさせる簡単な方法をご紹介します。

ユーザーはページを開いた瞬間から興味を持ち、サイトの印象をより魅力的なものにすることができるでしょう。

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

1 フェードイン（ぼわっと）で画像を表示させるサンプル
2 画像をフェードイン（ぼわっと）表示させる CSS
3 サイト全体（ページ内部）の画像をフェードインさせる場合
4 まとめ

フェードイン（ぼわっと）で画像を表示させるサンプル

実際にフェードイン（ぼわっと）表示するサンプルです。

ページ表示時に動きますので、下のボタンを押してページを再読み込みしてください。

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

ページ表示時に上の画像を「ぼわっ（フェードイン）」と表示しています。ぜひ体験してみてください。

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

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

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

<style>

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

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

</style>

「animation: fadeIn 3s ease 0s 1 normal;」は、３秒かけて変化する指定です。

変化の方法は「faceIn」名の @keyframes で指定しており、opacity（透明度 / 不透明度）を 0 → 1 に変化させています。

項目	値	概要
classname	classname	フェードインさせる画像のクラス名を指定します
animation-name	fadeIn	@keyframes に指定する名前を書きます。サンプルでは、「fadeIn」名を指定しています。
animation-duration	3s	アニメーションにかける時間です。「3s」で 3秒です。
animation-timing-function	ease	アニメーションの変化を指定します。「ease」は規定値で、アニメーションの開始・終了付近の動きを滑らかにします。
animation-delay	0	アニメーションの開始を遅らせる秒数です。「0」で、すぐにアニメーションを始めます。
animation-iteration-count	1	アニメーションを繰り返す回数です。「1」で1回だけアニメーションします。
animation-direction	normal	「normalnormal」で繰り返しを行いません。
@keyframes	－	アニメーション開始時と終了時の不透明度（開始時 0%、終了時 100%）を指定します。

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

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

ページ内部の全画像をフェードインで表示する場合のクラス名は以下を参照してください。

クラス名	種類	対象の画像
wp-post-image	WordPress 標準	投稿サムネイルの画像
wp-block-image	WordPress 標準（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;
}

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

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

サイト全体で利用する場合は、WordPress の「追加 CSS」に記述します。

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

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

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

まとめ

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

ポイント

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

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

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

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

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

続きを見る

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

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

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

続きを見る

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

: 【2024年チャンス】地方でノマドで働ける。おすすめ在宅副業を紹介！快適な移住先も紹介します

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

続きを見る