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

みなさんこんにちは。

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

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

 今回のポイント

  • フワッと表示でページの読み込みの遅さをカバーできる
  • 海外サイトのようにオシャレに見せることができる
  • CSSのコピペだけなので初心者でも簡単にできる
 
Ai
ページ遷移時に画面がフワッと表示されると海外のサイトみたいでオシャレだよね!
 
Jony
しかも CSSのコピペだけやから初心者の人でも簡単に使うことができるで!

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

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

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

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

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

しかもなぜ 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って[…]

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>

手順2. </head>直上に貼り付ける

手順2では THE THOR(ザ・トール)の </head>内にソースコードを貼り付けます。

外観 → カスタマイズ → 基本設定[THE] → 高度な設定

と進み、</head>直上の自由入力エリア内に以下のコードを貼り付けます。

</head>直上に貼り付ける

以上で完了です。

THE THOR 画面をフワッとフェードインで表示するカスタマイズ:まとめ

今回は THE THOR(ザ・トール)のサイト遷移時に画面をフワッとフェードイン表示するカスタマイズを紹介しました。

いかがでしょう?少し海外っぽいオシャレなサイトになったんじゃないでしょうか?

この方法は body全体にアニメーションをかけています。

この他にもアーカイブ記事をフワッと浮かせることもできます。記事をフワッと浮かせたい場合は以下の記事をご覧ください。

関連記事

みなさんこんにちは。 ONE PIECEのボスキャラ"フワフワの実"の金獅子のシキが大好きな JonyとAi(@10to1_JonyAi)です。 声優が竹中直人さんなのが最高にかっこいいですよね! さて、シキのフ[…]

最後まで読んでいただきありがとうございます。

何か質問等ありましたらお問い合わせいただくか、Twitterの DMにてご連絡ください!

おわり