WordPressにプリローダーアニメーションを追加する方法（ステップバイステップ）

サイトが読み込まれている間に、回転するアイコンやアニメーションが外観に現れることにお気づきでしょうか？あれはプリローダー・アニメーションで、WordPressプロジェクト全体で使える便利なツールです。

プリローダーは実に重要な役割を果たします。コンテンツが多いサイトでは、読み込み中の重要な数秒間、訪問者の興味を引きつけ、直帰率を下げることができます。また、ビジネスサイトでは、ブランド化されたプリローダーがプロフェッショナルな雰囲気を醸し出します。

複雑そうだと思っている方、ご安心ください。WordPressサイトにプリローダー・アニメーションを追加する2つの方法をご紹介します。

なぜWordPressにプリローダー・アニメーションを追加するのか？

プリローダーとは、ページが読み込まれるのを待っているときに表示されるアニメーションのことです。ユーザーにウェブページがまだ準備中であることを伝え、辛抱強く待つように促します。読み込みが終わると、プリローダーは消え、訪問者は普通にウェブページを見ることができます。

プリローダー・アニメーションの例です：

ローディングアニメーションを追加したいシナリオの1つは、ウェブページに大きな画像や動画がたくさんある場合です。この場合、ページの読み込みに通常よりも長い時間がかかるため、ユーザーがページを完全に表示させるまで十分に長く固定表示させる必要があります。

もしあなたのページに重い要素があまりないのであれば、サイトのスピードとパフォーマンスを向上させることに集中した方がよいでしょう。また、より良いWordPressホスティングサービスにアップグレードするのも良いでしょう。

それでは、WordPressサイトにプリローダーを簡単に追加する方法を見ていきましょう。以下のクイックリンクから、使いたい方法にジャンプしてください：

方法1：WP Smart Preloaderを使ってWordPressにプリローダーを追加する（簡単な方法）

WordPressでプリローダーを追加する簡単な方法の1つは、WP Smart Preloaderを使用することです。

このガイドで紹介する2つのプラグインのうち、このプラグインは最もシンプルなバージョンです。なぜなら、このプラグインには6つのプリローダー・アニメーションがビルトインされており、アニメーションを有効化するために多くの設定をする必要がないからです。

最初に必要なことは、WP Smart Preloaderプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、Settings ” WP Smart Preloaderに行き、’Smart Preloader’ドロップダウンを開いてください。使用できるアニメーションがすべて表示されます。

プラグインは、選択したアニメーションのプレビューを表示するので、さまざまなプリローダーを選択して、どれが一番好きかを確認することができます。

初期設定では、アニメーションはWordPressサイト全体に外観されますが、お好みにより、ホームページのみに使用することもできます。ホームページだけに表示する」にチェックを入れてください。

独自のCSSアニメーションを作成したい場合は、「カスタムCSS」ボックスにコードをタイプするだけです。

もう一つのオプションは、「カスタマイゼーション」ボックスにコードを追加して、カスタムHTML5アニメーションを作成することです。

アニメーションを選択したら、「ローダー表示時間」セクションまでスクロールしてください。ここで、プリローダーの再生時間を変更することができます。

初期設定は1500ミリ秒または1.5秒です。ほとんどのサイトではこれで十分ですが、必要であれば別の数値を入力することもできます。

初期設定では、アニメーションが完全にフェードアウトするまで2500ミリ秒または2.5秒かかります。これを変更するには、’Loader to Fade Out’フィールドに大きいか小さい数値を入力するだけです。

プリローダーの設定に満足したら、「変更を保存」ボタンをクリックして設定を保存します。

これで、WordPressブログやサイトにアクセスして、プリローダーが動作しているのを確認できます。

方法2：Safelayout Cute Preloaderを使ってWordPressにプリローダーを追加する（よりカスタマイズ可能）

最初のプラグインは、WordPressにプリローダー・アニメーションを簡単に追加できる。しかし、最もカスタマイズしやすいオプションではない。

プリローダーに自分なりのアレンジを加えたい、あるいは自分のブランドに一致するようにデザインを調整したいという方は、Safelayout Cute Preloaderをチェックしてみてください。

Safelayout Cute Preloaderを使用するには、WordPressプラグインを管理エリアにインストールしてください。プラグインを有効化したら、Settings ” Safelayout Preloaderにアクセスしてください。

最初に表示されるタブは「プリセット」と呼ばれています。ここでは、あなたのサイトにあらかじめ用意されたプリローダーのデザインを選ぶことができます。

気に入ったデザインがあれば、テンプレートの下にある「このプリローダーの設定を変更する」ボタンをクリックしてください。

そこから、これから紹介する他のデザインオプションを使用して、プリローダーをカスタマイズすることができます。

そうでない場合は、このステップをスキップして、次のタブである「ディスプレイ設定」に切り替えることができる。

ここでは、プリローダーのアニメーションを表示する場所を選択できます。

プラグインが動作するように、「Enable Safelayout Cute Preloader」にチェックを入れてください。

Display on’設定では、ロケーション・オプションのいずれかを選択できます。ここでは例として、「フルサイト」とします。

下にスクロールすると、プリローダー・アニメーションの継続時間を変更できます。

最小ロード時間とは、ページのロードが終了してもプリローダー・アニメーションが表示される時間を意味します。

一方、最大ロード時間は、ページのロードに予想以上の時間がかかった場合に、アニメーションが消えるべき秒数である。

また、プリローダーが表示されてから何秒経過したら「閉じる」ボタンを表示するかを選択することもできます。

変更が完了したら、「変更を保存」をクリックします。

次に、「背景」タブに行ってみよう。

上部では、背景アニメーションを選択することができます。それぞれのボックスは、後であなたのサイトにどのようなアニメーション効果が現れるかを示しています。

どれも選びたくない場合は、『背景なし』を選択すればいい。

下に移動すると、背景色の不透明度を選択したり、全画面の背景を小さな背景に変更したり、背景色を選択したりできます。

ピックに満足したら、「変更を保存」をクリックします。

次の設定は『プログレス・バー』だ。

ここでは、プリローダーアニメーションに表示するプログレスバーの形状をオプションで設定できます。ページが読み込まれているという印象を訪問者に与える良いデザイン機能です。

プログレスバーなし」を選択することもできます。

下にスクロールすると、プログレスバーの色を変更できます。

その後、プログレスバーの位置、幅、枠線の半径、枠線の色、余白を変更することができます。

次のステップに進む前に、必ず「変更を保存」ボタンをクリックしてください。

それが終わったら、「ブランドイメージ」タブに切り替えてください。

ここでは、プリローダー・アニメーションにロゴを追加することができます。これを行うには、’ブランドを表示’ボックスにチェックを入れ、’メディアライブラリ’ボタンをクリックしてロゴ画像を選択します。

また、必要に応じてアニメーション効果を加えることもできる。

完了したら、ロゴ画像の位置を変更できます。

プリローダーアイコンの上、プリローダーカウンターの上、プリローダーテキストの上、テキストの下の4つのオプションがあります。本当に〜してもよいですか？

また、ロゴ画像の上下の余白を変更することで、他のプリローダー要素に近づきすぎないようにすることもできます。しかし、私たちの場合はそのままにしておきます。

すべて設定したら、『変更を保存』をクリックする。

アイコン」の設定に移動しましょう。

ここでは、円形のプログレスバーのような、通常プリローダー上に表示されるアニメーション画像を表示することができます。

すでにプログレスバーを使っていて、アイコンを使うのはやりすぎかもしれないと感じる場合は、「アイコンなし」を選択すればいい。

しかし、アイコンを選んだ場合、その外観をカスタマイズするオプションもある。

サイズ、色、アニメーション効果を変更できる。

アイコンのデザインに満足したら、「変更を保存」をクリックします。

次に設定するのは「カウンター」です。これは、読み込みの進行状況を示す数字のカウンター（0％から100％のような）を表示します。この機能を無効化するか有効化するかを選択できます。

さらに、必要であれば、数字の後に表示されるカウンターのテキストも自由に変更してください。

もうひとつ変更できるのは、カウンターの外観だ。

4つのオプションがあります：プリローダーアイコンの下、プログレスバーの真ん中、プログレスバー内の左側、プログレスバー内の右側。

下に移動すると、カウンターの色、フォントサイズ、余白を変更できる。

その後、「変更を保存」ボタンをクリックするだけです。

最後に、プリローダーのテキストを追加・変更することができます。これを行うには、「テキストを表示する」ボックスにチェックが入っていることを確認してください。

初期設定では、プリローダーは「Loading…」というテキストを表示するが、もっとクリエイティブにすることもできる。

また、アニメーション効果を加えて、テキストをさらに目立たせることもできる。

下にスクロールすると、テキストの色、フォントサイズ、上マージンを変更できます。

完了したら、「変更を保存」ボタンをクリックしてください。

これで完了です！プリローダー・アニメーションがあなたの設定に基づいて外観されるはずです。モバイル、デスクトップ、タブレットでサイトを表示して、実際に動作しているところを確認できます。

私たちのはこんな感じだ：

サイト訪問者を魅了するWordPressのその他のトリック

プリローダーアニメーションを追加することは、WordPressサイトを強化する数多くの方法の一つに過ぎません。視聴者を魅了するクリエイティブなアイデアをお探しなら、私たちにお任せください：

• WordPressテーマにパララックス効果を追加する方法– このスクロールイリュージョンのテクニックで奥行きと視覚的な面白さを作り出しましょう。
• WordPressブログに雪の結晶を追加する方法– あなたのサイトに冬の魔法のタッチで訪問者を喜ばせる。
• WordPressサイトにダークモードを簡単に追加する方法– この人気機能を使って、より快適なブラウジング体験を提供しましょう。
• あなたのWordPressサイトにハロウィーン効果をもたらす方法– 楽しく華やかなハロウィーントリックであなたのサイトを驚かせましょう。
• WordPressでアニメーション背景を追加する方法– 目を引く動く背景で大胆なステートメントを作成します。
• WordPressでYouTubeの動画をフルスクリーンの背景に追加する方法– ダイナミックな動画背景で第一印象を力強く演出。
• WordPressサイトにインフィニットスクロールを追加する方法（ステップバイステップガイド）– スクロールに合わせてシームレスにコンテンツを読み込むことで、訪問者の興味を引き付けましょう。

この投稿が、WordPressサイトにプリローダーアニメーションを簡単に追加する方法を知る一助となれば幸いです。また、WordPress の エキスパートが選ぶ最高のドラッグ＆ドロップページビルダーや 、WordPress サイトの編集方法に関する完全ガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.