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

この記事は約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に強くなれます。

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

 

 

 

 

タイトルとURLをコピーしました