広告:ページ内にてアフィリエイト広告を利用しています。
サイトの印象を良くするために、ページを開いた瞬間からユーザーの目を引く動きを取り入れることが重要です。効果的な表現方法に、ぼわっと画像を表示させる「フェードイン」表示があります。
本記事では、CSSを使って画像をフェードインさせる簡単な方法をご紹介します。ユーザーはページを開いた瞬間から興味を持ち、サイトの印象をより魅力的なものにすることができるでしょう。
\自宅でする副業で月に〇万円の収入増があると嬉しすぎる!/
ココナラ副業を始めよう
実際に4か月でプラチナランク(売り上げ10万円以上)を達成した筆者が、ココナラで成功する方法を詳しく解説します。こちら をクリックしてください
フェードイン(ぼわっと)で画像を表示させるサンプル
実際にフェードイン(ぼわっと)表示するサンプルです。ページ表示時に動きますので、下のボタンを押してページを再読み込みしてください。

↑ボタンを押すともう一度動きがみられます。
ページ表示時に上の画像を「ぼわっ(フェードイン)」と表示しています。ぜひ体験してみてください。
(※ ブラウザによっては動作しない場合があります)
画像をフェードイン(ぼわっと)表示させる 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;」は、3秒かけて変化する指定です。
変化の方法は「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 にフェードイン用のコードを埋め込んで保存(公開)して完成です。
【自宅で出来る・一人で出来る】ブログ・アフィリエイトで始める副業
比較的安定した収入がある会社員が、月々プラスアルファの収入を得たいと思った時に最もおすすめしたい副業は「ブログ・アフィリエイト」です。
「ブログ・アフィリエイト」とは、自分のブログを開設し企業の広告を貼ることで、読者が広告をクリックして商品を購入した場合に紹介報酬が手に入る副業です。

人気の出るサイトであれば、大きな収益が期待できることも。ストック型の収益モデルのため、作業時間以上に収益をあげられる可能性がある副業です。定年して会社を退職した後も、収入を確保し続けることができます。
ブログ・アフィリエイトの始め方がわからない場合でも手順通りやれば大丈夫、具体的な手順は こちらを参照 してください。
\1日早く始めれば、1日早く収入が増える/
プラスアルファの人生は、始めなければ始まらない

まとめ:画像をフェードイン(ぼわっと)表示する!簡単な CSS で実現
記事(ページ)を表示する際に、WordPress の記事の画像をフェードイン(ぼわっと)表示を簡単な CSS で実現する方法の紹介です。
- CSS の animation で実現します
- サイト全体の画像を対象にする場合は 「wp-post-image」、「wp-block-image」 クラスを対象にします
- サイト全体の画像を対象にする場合は 「追加CSS」 にコードを埋め込みます
いろいろな工夫で、かっこいいページを作りましょう。(^^)/
40代・50代「会社員におすすめ」の在宅でできる副業5選

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

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


当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。
当サイトは Google アドセンスを利用し、広告により収入を得ています。
当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。