【WordPress】画面全体をフェードインさせるためのCSSソースコード（アニメーション）

2020.05.21

この記事は約3分で読めます。

【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に強くなれます。

ぜひプログラミング頑張ってみてくださいね。