【WordPress】body画面をだんだん少しずつ表示させる(フェードイン)

この記事は約3分で読めます。
ポートフォリオ制作実績

WordPress・CSSでbody画面をだんだん少しずつ表示させる(フェードイン)について紹介します。

スポンサーリンク

【WordPress・CSS】body画面をだんだん少しずつ表示させる(フェードイン)

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}
}

 

スポンサーリンク

適用または反映、表示されない場合

適用または反映、表示されない場合は、header.phpの<head></head>内に以下ソースコードを記述してあげましょう。

<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>

 

スポンサーリンク

個々の投稿記事のみに表示させたい場合

個々の投稿記事のみに表示させたい場合は、以下のソースコードをHTML(テキストエディタ)のほうへ貼り付けましょう。

ソースコード自体は上に同じものを使用しています。

<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>

 

 

 

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