「はじめぼんやり徐々にはっきり」と画像が見える様にするHTMLとCSS

　HTKLとCSSで一つの画像を「はじめぼんやり徐々に画像をはっきり」見せることができるはずなんだけど、やり方を忘れてしまった。

　WordPressで表示するにはどうするんだったかな？

　もう一度勉強しなおしましょう。

　1枚の画像とHTML・CSSでできるはず。

画像をゆっくりとはっきり表示させていくCSSアニメーションのHTML

　画像をゆっくりとはっきり表示させていくCSSアニメーションのHTMLの基本コードは

<p class="img_wrap">
<img src="画像のURL" alt="ぼやけた画像が徐々にはっきり表示されるアニメーション" width="800" height="420" loading="lazy" itemprop="image" />
</p>

画像をゆっくりとはっきり表示させていくCSSアニメーションのCSS

.img_wrap{
filter: blur(数字px);
animation:blur 1s ease-in-out forwards;　
<!-- 速度は「blur 数字s」
大きくすればアニメーション時間が長くなり、小さくすれば短くなる -->
}
@keyframes blur{
0%{filter:blur(数字px);}
100%{filter:none;}
}
<!-- ぼかしの描け具合「filter:blur(数字px)」
大きくすればよりぼかしが強くなり、小さくすればぼかしが弱くなる -->

　で、できたのが下の画像。

　相当ゆっくり変化するように〔animation:blur 20s〕にしたので、気長にみていてね。

WordPressの投稿ページで表示させるには

　WordPressで表示させるにはどうしたら良いのかな？

　では、実際にやってみよう。

1.使いたい画像を先にメディアライブラリへアップロードする。

2.〔メディア〕→〔ライブラリ〕を押して、目当ての画像のURLをコピーする。

画像のURLをコピー-WordPress

3.投稿ページ・固定ページなどに戻って、下のHTMLの「画像のURL」の部分にコピーした画像URLを貼り付ける。

<p class="img_wrap">
<img src="画像のURL" alt="ぼやけた画像が徐々にはっきり表示されるアニメーション" width="800" height="420" loading="lazy" itemprop="image" />
</p>

4.ページの〔カスタムCSS〕へ調整したCSSを貼り付ける。

.img_wrap{
filter: blur(数字px);
animation:blur 1s ease-in-out forwards;　
<!-- 速度は「blur 数字s」
大きくすればアニメーション時間が長くなり、小さくすれば短くなる -->
}
@keyframes blur{
0%{filter:blur(数字px);}
100%{filter:none;}
}
<!-- ぼかしの描け具合「filter:blur(数字px)」
大きくすればよりぼかしが強くなり、小さくすればぼかしが弱くなる -->

カスタムCSS-WordPress