【THE THOR】コピペだけで画面をフワッとフェードインで表示するカスタマイズ

みなさんこんにちは。

旅ブロガーのJonyとAi(@10to1_travel)です。

今回は初心者の方でも簡単にできる、コピペだけで画面の読み込みをフワッとフェードインで表示するカスタマイズを紹介します。

今回のポイント

フワッと表示でページの読み込みの遅さをカバーできる
海外サイトのようにオシャレに見せることができる
CSSのコピペだけなので初心者でも簡単にできる

ページ遷移時に画面がフワッと表示されると海外のサイトみたいでオシャレだよね！

Jony

しかも CSSのコピペだけやから初心者の人でも簡単に使うことができるで！

しかしここで気になるデメリットがあります。CSSカスタマイズによるサイト速度の低下です。

私たちもカスタマイズしたことによりサイト速度が遅くなってしまうと本末転倒だと思い、実際に当サイトで検証しました。

この記事の目次

1 カスタマイズ後のサイト速度の変化は？
2 THE THORの画面をフェードインで表示するCSSカスタマイズ
- 2.1 手順1. CSSをコピーする
- 2.2 手順2. 追加CSSに貼り付ける
3 CSSで反映されない場合の解決方法：head内に直接入力
- 3.1 手順1. ソースコードをコピーする
- 3.2 手順2. </head>直上に貼り付ける
4 THE THOR 画面をフワッとフェードインで表示するカスタマイズ：まとめ

カスタマイズ後のサイト速度の変化は？

画面をフェードインして表示するカスタマイズを行う前と後でサイト速度を計測しました。

多少前後しますが、測定数は常に変化し平均を出すものなのでこの結果からは「ほとんど変わらない」ということがわかります。

しかもなぜ PC表示がかカスタマイズ後の方が速いというナゾの結果に。笑

安心してカスタマイズできますね。

THE THORの画面をフェードインで表示するCSSカスタマイズ

それでは THE THORのページ遷移時に画面をフェードインで表示する CSSカスタマイズの手順を紹介します。

カスタマイズの手順

手順1
CSSをコピーする
最初に、ページ遷移時に画面をフェードインで表示するためのCSSコードをコピーします。
手順2
「追加CSS」に貼り付ける
手順1でコピーした CSSを THE THORの《追加CSS》に貼り付けます。

※カスタマイズは自己責任でお願いします！

手順1. CSSをコピーする

まず、手順1は以下の 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}
}

手順2. 追加CSSに貼り付ける

手順2ではコピーした CSSを THE THOR(ザ・トール)の《追加CSS》に貼り付けます。

外観 → カスタマイズ → 追加CSS

と進み、追加CSS内にコードを貼り付けてください。

以上でカスタマイズは完了です。サイトを開いてみてフワッとフェードイン表示のエフェクトがかかっていれば成功です。

お疲れ様でした！

THE THOR(ザ・トール)の《追加CSS》機能をもっと詳しく知りたい人は以下の記事をご覧ください！

簡単！THE THOR「追加CSS」でカスタマイズする方法【徹底解説】

みなさんこんにちは。 THE THOR(ザ・トール)のデザインをもっと細かくカスタマイズしたい時に、ネットで調べたら【コピペだけ！】ってタイトルありますよね。でもコピペってどこに？追加 CSSって[…]

CSSで反映されない場合の解決方法：head内に直接入力

もし上記の方法でエフェクトが反映されない場合は、header.phpの<head></head>内に以下のコードをコピペしましょう。

手順1. ソースコードをコピーする

まず手順1は以下のソースコードをコピーします。

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