【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やテーマエディターなどをいじることなく簡単にできるので、初心者や初学...
また、個々の投稿記事ページに適用させたい場合は、以下のような方式で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に強くなれます。
ぜひプログラミング頑張ってみてくださいね。