【WP Smart Preloader】WordPressに簡単にローディング画面を追加してみた
目次
1.WP Smart Preloaderとは
ローディング画面を簡単に追加するプラグインです
アニメーションを取り入れる事によってサイトとしての高級感が上がり、サイトを閲覧した人に大きな印象を与え興味をもってもらいやすくなります。
今回は、そういったアニメーションを追加するプラグインを簡単に導入等の説明をしたいと思います。
公式サイト：WP Smart Preloader
2.導入方法
2-1.公式サイトからダウンロード
公式サイトでダウンロードして、ダウンロードファイルをそのまま管理画面にて「プラグイン」→「新規追加」→「プラグインのアップロード」→有効化
2-2.管理画面から直接追加
3.ローディング画面設定
Select Preloader:デフォルトのローディングアニメーションとカスタムアニメーションが選択できます。
Show only on Home Page:トップページの読み込みのみの有無が選択できます
Custom Animation:Select Preloaderでカスタムアニメーションを選択した場合に反映されるHTMLです。
Custom CSS:カスタムアニメーションのカラーの設定だけでなく、デフォルトのローディングアニメーションカラーも設定できます。
Duration to show Loader:読み込み時間になります。
Loader to Fade Out :フェードアウト時間になります。
読み込み時間とフェードアウト時間は、1~1.5秒がオススメです。
2~3秒以上に設定しまうと、実際確認していただけると分かると思いますが少し長く感じサイトの離脱につながりやすくなります。
カラーの変更については、今回のページは読み込みページになりますので、Google Chormeの検証機能等では確認できませんでしたので、 「プラグイン」→「プラグインエディター」で該当コードを確認する方法を試しました。 他にいい方法がありましたら、追記致します。
4.最後に
サイトとしての高級感というのもありますが、最近のトレンドとしてローディング画面が実装されている事が多いです。
今回紹介したプラグインにはhtml/cssでの実装で、背景カラーやアニメーションカラーの変更を実装し、さらにcssアニメーションの実装の確認をしたのですが、まだJavascriptのアニメーションについては実装していません。
Javascriptでさらに動きのあるアニメーションを追加できると、かなりアニメーション幅が広がりそうですね。
