みなさんこんにちは。
旅ブロガーのJonyとAi(@10to1_travel)です。
今回は初心者の方でも簡単にできる、コピペだけで画面の読み込みをフワッとフェードインで表示するカスタマイズを紹介します。
今回のポイント
- フワッと表示でページの読み込みの遅さをカバーできる
- 海外サイトのようにオシャレに見せることができる
- CSSのコピペだけなので初心者でも簡単にできる
しかしここで気になるデメリットがあります。CSSカスタマイズによるサイト速度の低下です。
私たちもカスタマイズしたことによりサイト速度が遅くなってしまうと本末転倒だと思い、実際に当サイトで検証しました。
カスタマイズ後のサイト速度の変化は?
画面をフェードインして表示するカスタマイズを行う前と後でサイト速度を計測しました。
多少前後しますが、測定数は常に変化し平均を出すものなのでこの結果からは「ほとんど変わらない」ということがわかります。
しかもなぜ PC表示がかカスタマイズ後の方が速いというナゾの結果に。笑
安心してカスタマイズできますね。
THE THORの画面をフェードインで表示するCSSカスタマイズ
それでは THE THORのページ遷移時に画面をフェードインで表示する CSSカスタマイズの手順を紹介します。
- 手順1CSSをコピーする最初に、ページ遷移時に画面をフェードインで表示するための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内にコードを貼り付けてください。
以上でカスタマイズは完了です。サイトを開いてみてフワッとフェードイン表示のエフェクトがかかっていれば成功です。
お疲れ様でした!
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>内にソースコードを貼り付けます。
と進み、</head>直上の自由入力エリア内に以下のコードを貼り付けます。
以上で完了です。
THE THOR 画面をフワッとフェードインで表示するカスタマイズ:まとめ
今回は THE THOR(ザ・トール)のサイト遷移時に画面をフワッとフェードイン表示するカスタマイズを紹介しました。
いかがでしょう?少し海外っぽいオシャレなサイトになったんじゃないでしょうか?
この方法は body全体にアニメーションをかけています。
この他にもアーカイブ記事をフワッと浮かせることもできます。記事をフワッと浮かせたい場合は以下の記事をご覧ください。
みなさんこんにちは。 THE THOR(ザ・トール)のトップページのアーカイブ記事一覧には、マウスオーバー時のエフェクトがありません。 記事を選んだ際に、フワッと浮いたり、色が変わるなどのホバーがあるとオシャレです[…]
最後まで読んでいただきありがとうございます。
何か質問等ありましたらお問い合わせいただくか、Twitterの DMにてご連絡ください!
おわり
- 2021年7月13日
- THE THORのカスタマイズ
- CSSカスタマイズ, THE THOR