読者に飽きさせないためにもローディングアニメーションを実装してみました。
そのご紹介をしていきます！
LoftLoader
無料かつ、プラグインをインストールするだけで簡単にローディングアニメーションが実装することが出来ます！
有料プランもありますが、無料だけで十分ですのでご安心ください。
LoftLoaderをおすすめする5つのポイント
- 「サイト全体」か「トップページのみ」かの表示設定が可能
- 背景色と透明度のカスタマイズ機能
- 読み込み後のアニメーションが4種類
- ローディングアニメーションの変更（5種類＋オリジナル画像）
- 最大表示時間の設定
では実際にプラグインをインストールしていってみましょう！
プラグインを追加
まずは、「プラグインを追加」ページを開き、右上の検索窓に「LoftLoader」を入力し検索をかけます。
青色の四角が交差しているアイコンのプラグインが出てきますので「今すぐインストール」をクリック！
そのあとは「有効化」し、設定作業にはいっていきます。
設定
次に設定をしていきたいので
「設定」> 「LoftLoader Lite」を開いてください。
設定画面を表示すると、左側に英語の項目が出てきますがややこしくないので
上から順番に説明していきます！
Display on
Sitewideは「サイト全体」、
Homepage onlyは「トップページだけ」という意味です！
当ブログでは、サイト全体にしております。
Background
- Pick Colorは背景色を指定。
- Opacityは透明度。
- Ending Animationは読み込み後のアニメーション
となってます。
当ブログでは、背景色を白色、透明度を90％、アニメーションをFadeに設定！
ちなみにアニメーションは4種類あり、
Loader
ローディングアニメーションを設定することができます。
（5種類＋オリジナル画像）
左から順番に説明していきます！
More
Moreでは、
- Maximum Load Time （何秒間ローディング画面を表示するか）
- Close Button （何秒後に閉じるボタンを表示するか）
があります。
Plugin Dateは特に気にしなくて大丈夫です！
ここではClose Buttonは触らずに、Maximum Load TimeだけでOK！
閉じるボタンを出すと、読者に余計なアクションを増やしてしまうので
最大に何秒間だけローディングアニメーションを表示する設定だけでいいです。
僕は最大10秒間だけに設定しております！
ちなみにローディングアニメーションは読み込みが終わったら自動的に表示が終わる仕様です。
その他の項目
「Advanced」 と 「Upgrade to Pro」は特に触る必要はないのでノータッチで大丈夫です！
まとめ
今回はWordPressのプラグイン「LoftLoader」を使ったら簡単にローディングアニメーションを実装できる方法を書きました！
- ページの読み込みが終わると自動的にローディングアニメーションも非表示になる
- 最大何秒間表示するのかを設定できる
ので、ずっとローディングアニメーションが流しっぱなしになる心配もないです。
ローディングアニメーションを実装してみたい人には、
おすすめのプラグインになっておりますのでぜひ、試してみてください！
最後までお読みいただきありがとうございましたっ！！
コメント
コメント一覧 （2件）
お初にご連絡します。宮島真一と申します。Elementorを使ってお仕事しています。よろしくお願いします。ロフトローダーをたまたまYoutubeで見つけてその通りやってみるのですが、上手くいきませんでした。というのは固定ページにいくつかLPを作っているので、各々違った、ロフトローダーをくっつけたいのですが、https://d-f-design.com
にしかくっつかないでいます。ここは、別にホームではないので、そのうち変更しようとは思っていますが。お忙しいところ申し訳ないのですが、お時間があるときでも、何かしかヒントをいただければありがたいです。よろしくお願いします。お世話になります。
コメント頂きありがとうございます！
LoftLoaderですが、「サイト全体」or「トップのみ」の2択しか設定ができないですので、
各々のLPに反映をさせる場合は
①LPをサブドメインで別のWPで管理をする（管理は大変ですのでオススメはしません..）
②ローディングアニメーションを自作をする（html、cssやjQueryなどの知識は必要になってきます）
の2パターンで個人的は②の自作が宜しいかと思います。
「ローディングアニメーション コピペ」などでGoogle検索をかけてもらえれば色んな情報がありますのでぜひ試してみてください^^
他ブログですが、わかりやすかったので載せさせて頂きます！
https://recooord.org/loading-animation/