【WordPress】画面全体をフェードインさせるためのCSSソースコード（アニメーション）について紹介します。
WordPressだけでなくても、普通のWebサイトでも、HTMLとCSSさえ書ければできるのでぜひ試してみましょう。
WordPressでは、左から「外観」>「テーマエディター」>「style.css」のbody要素直下または内部に以下のソースコードを記述しましょう。
body{
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
CSSではopacity（透明度）を編集することによって、あたかもフェードインしているように魅せることができます。
なお、試してみたけれど適用または反映、表示されない場合は、「外観」>「テーマエディター」> header.phpの<head></head>内に記述してあげましょう。
HTML内に記述する場合は特殊なのですが、<style type=”text/css”></style>で囲む必要があります。
詳しくは以下のページで解説しています。
【WordPress】CSSをHTMLのテキストエディタ上で簡単に適用する方法（投稿記事のみで編集）
WordPressでCSSをHTMLのテキストエディタ上で適用する方法をご紹介します。
投稿の下書きに直接書いて作ることができます。
functions.phpやテーマエディターなどをいじることなく簡単にできるので、初心者や初学...
updowntech.com
2020.05.12
また、個々の投稿記事ページに適用させたい場合は、以下のような方式でHTML内に記述しましょう。
WordPressのテーマによっては、追加CSSができるかもしれませんので、その場合は<style type=”text/css”>と</style>を省いて上記のCSSソースコードを書きます。
<style type="text/css">
body{
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
</style>
まとめ
無事に画面がフェードインされたでしょうか。CSSだけでも結構なアニメーションが実現できます。
フェードインやアニメーションのほか、もっといろいろな手法について学びたい場合はLIGのプログラミングスクールがおすすめです。
このページの画面上にあります。
デザイン系が専門なので、CSSに強くなれます。
ぜひプログラミング頑張ってみてくださいね。