読み込み中にお洒落なロード画面が表示されるブログがあるけどどうやってるんだろう？
画面の読み込み中にお洒落なロードアニメーションが表示されるブログに出会ったことはありませんか？
例えばこんな感じです。
これですが、「Preloader」というWordPressプラグインを使うことで簡単に実現できちゃいます。
ロード画面をお洒落に演出することで、
ユーザー（読者）を退屈させない ⇒ 直帰率・離脱率を下げる
という効果も期待できます。
そよごゲームのロード画面でもキャラが動いたりしますよね
そこで今回は、「Preloader」というプラグインを使った、ロード画面アニメーションの導入方法を解説していきます！
すべて無料でできるので、是非試してみてください！
※このプラグイン自体は非常に軽いので、導入してもほとんど遅延は生じません。
Preloaderの使い方
Preloaderのインストール・有効化
早速ですが、WordPressプラグインの新規追加から「Preloader」をインストール、有効化します。
似たような名前の別のプラグインがあるので、注意です。
プラグインのインストール・有効化方法が分からない方は、こちらの記事を参照してください。
テーマヘッダー（header.php）の編集【下準備】
Preloaderを使うためには、テーマヘッダー（header.php）を編集する必要があります。
そよご難しそうに聞こえますが、基本コピペだけなので手順通りやってみてください。
まず、WordPressダッシュボードの「外観」から「テーマエディター」を開きます。
「編集するテーマを選択」から親テーマを選んで「選択」をクリックします。
テーマファイルの中から、テーマヘッダー（header.php）を探してクリックします。
<body>タグの真下に、以下のコードを追加します。
<div id=”wptime-plugin-preloader”></div>
Preloaderの基本設定【アニメーションの表示】
ここから実際に、ロードアニメーションを表示させるための設定をしていきます！
WordPressのダッシュボードから、「プラグイン」⇒「Preloader」に進みます。
開いた設定画面で、「Get FREE Preloader Image」のリンクをクリックします。
そうすると、「Preloaders.net」という、ロードアニメーションの素材サイトが開きます。基本無料で使えますので安心してください！
画面を下にスクロールすると、アニメーションアイコンが表示されますので、好きなものを選んでクリックします。
そうすると、アニメーションアイコンの編集画面が開きます。
設定できる項目は以下です。左下の「Generate」をクリックしないと適用されないので注意です。
Image type：GIFを選びましょう。
Color：色や背景色、透過設定などができます。
Animation speed：アニメーションの速さが設定できます。
Preloader size：アイコンのサイズが設定できます。
Advanced options：その他、応用設定ができます。
好きなように編集したら、「Download」をクリックして保存します。
WordPressのダッシュボードから、「メディア」⇒「新規追加」を開きます。
先ほどダウンロードしたGIF画像を取り込みましょう。
取り込めたら「編集」をクリックします。
※閉じてしまった場合でも、ライブラリから編集できます。
「URLをクリップボードにコピー」をクリックします。
先ほどのPreloaderの設定画面を開き、「Preloader Image」にURLを貼り付けたうえで、「Save Changes」をクリックして変更を保存します。
ダッシュボード左上のサイト名から、「サイトを表示」して、ロードアニメーションが表示されれば完成です！
Preloaderのその他の設定
最後に、Preloaderのその他の設定を簡単にご紹介して終わります。
Background color：ロード画面の背景色が設定できます。
Preloader Image Width：アニメーションの横幅が設定できます。（有料オプション）
Preloader Image Height：アニメーションの高さが設定できます。（有料オプション）
Display Preloader：アニメーションを表示する画面を選べます。
・In The Entire Website. すべてのページ
・In Home Page only. トップページのみ
・In Front Page only. フロントページのみ
・In Posts only. 固定ページのみ
・In Pages only. 記事ページのみ
・In Categories only. カテゴリページのみ
・In Tags only. タグページのみ
・In Attachment only. ファイルダウンロード時のみ
・In 404 Error Page only. 404エラー表示時のみ
Preloader Element：テーマヘッダー（header.php）に貼り付けたコードが記載されています。
まとめ：Preloaderを使ってロード画面をオシャレに演出しよう
本記事では、「Preloader」を使った、ロード画面アニメーションの入れ方を解説しました。
こうしたちょっとしたデザインのこだわりが、ユーザー（読者）の滞在時間を伸ばすことにも繋がりますので、是非取り入れてみてはいかがでしょうか。
今回は以上です。
