ページの読み込み時間をアニメーションで演出するプラグイン/Loading Page

2020-10-182023-08-18

記事内に商品プロモーションが含まれる場合があります。

ブログ記事を読み込む時間に変化をつけてみませんか？

ローディング画面にアニメーションを付けてみてはいかがでしょう。

ページの読み込み時間をアニメーションで演出するプラグイン/Loading Page

多数あるプラグインの中でも使いやすいLoading Pageを紹介します。

Webページへアクセスする間の待ち時間、ローディングアニメーションが流れるようにするWordPressプラグインです。これを使うことで、サイトに訪れた訪問者がページ読み込みまでの時間をワクワクさせることができます。

読み込み中にロード中にアニメーションやパーセントの表示もします。
まずは、プラグインのインストールをしてください。

Loading Page with Loading Screen

■　プラグインの画面で新規追加→「Loading Page Plugin」を検索→インストール→「有効」

■インストールすると直接「Loading Page Setting」ページに移動します。

Loading Page Settingのポイント

設定方法は、有効をすると同時にYouTubeで視覚的に見せてくれます。

ほとんど変更する必要はありませんが、チェックが必要なところ説明しときますね。

Enable loading screen：　
ロード画面の表示するかどうかです。使用するのでチェックを入れます。
Display a close screen button：　
画面を閉じるボタンの表示するかどうか。
　　　　　　　　　　　　　　　　　チェックを入れます。

Hide the loading screen in the window onload event：
ウィンドウのonloadイベントでロード画面を表示します-または-できるだけ早くしたいのでチェックを入れます。

Remove the loading screen in the window onload event：　
開発中なのでチェックしない。

Display the loading screen on：　ロード画面の表示対象ページになります。全ページ上で対応したいので「All Screens」を選びます。

Display the loading screen：　
ロード画面を表示する期間になります。いつもした方がいいので「always」にしましょう。

Display loading screen in：　
ロード画面の表示対象ページになります。全てのページに対応させるので「all pages」を選びます。

後の三段は「全ページに対応したいので空白のまま」でOKです。

ローディング画面アニメーションの設定

アニメーションを選びましょう。

Select the loading screen：　アニメーションで表示するタイプを選びます。　ここでは「Logo Screen」を選びました。

「Bar Screen」は棒状のアニメーションになります。

Select the logo image (or any other image)：　「Logo Screen」を選んだ場合だけ。ここでアニメーションを選べます。

■「読み込み率を表示」にチェックを入れる。