WordPress

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


パソコンで会議している風景

サイトの表示に動きをつけることで、サイトを見たときの印象を好印象にすることができます。

記事(ページ)を表示する際に、画像を(ぼわっと)フェードインして表示します。

本記事では簡単な CSS で実現する方法を紹介です。

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

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

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

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

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

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

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

画像をフェードイン(ぼわっと)表示させる 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」に記述します。

CSS編集画面

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

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

まとめ

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

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

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

WordPress のおすすめテーマ



  • SEO に強く【集客力強化】が望める
  • かっこいい(かわいい)ホームページを作りやすい
  • 初心者でも使えて、上級者になっても満足できる


本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。



AFFINGER の紹介はこちら




AFFINGER(アフィンガー)テーマは「ここ」がすごい!【WordPress 初心者必見!】

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ(読者)を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る


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










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




Presented By Irojiro Haraguro .Com