WordPressでアニメーションの背景を追加する方法（2つの方法）

WordPressサイトの背景をアニメーションにしたいですか？

アニメーションの背景は、あなたのサイトに視覚的な魅力を加えることができます。あなたのサイトをより魅力的で印象的なものにし、訪問者の印象に残ります。

このガイドでは、JavaScriptアニメーションライブラリであるparticle.jsを使ってWordPressにパーティクル背景を追加する方法を紹介します。

なぜWordPressにアニメーションの背景を追加するのか？

サイトの背景をカスタマイザーでカスタマイズすることは、重要でないように思われるかもしれません。しかし、それは実際にあなたのブランドに対する訪問者の第一印象を形成し、あなたのサイトでの経験に影響を与えることができます。

アニメーションの背景は、あなたのサイトの視覚的な魅力を高め、よりインタラクティブで訪問者の目を引くようにすることができます。WordPressサイトが高品質で革新的なデザインであるという印象を与えます。

また、多くのサイトが特別な日を祝うためにアニメーション効果を使用している。

例えば、eコマースショップがホリデーシーズンの華やかな雰囲気を演出するために、ウェブページに雪の結晶やクリスマスツリーの落下のアニメーションを追加しているのを見かけるかもしれない。

また、サイトによっては、プリローダーの背景アニメーションを使用しているところもある。

これにより、訪問者はサイトが読み込まれているという感覚を得ることができ、ウェブページの要素が表示されるまで辛抱強く待つことができるようになります。詳しくは、プリローダーの背景アニメーションの追加に関する投稿をご覧ください。

このガイドでは、particle.jsを使ってアニメーションの背景を追加する方法を紹介します。particle.jsとは何か知りたい方は、次のセクションに進んでください。

particle.js とは？

particle.jsは、小さなグラフィカルなアニメーション要素であるパーティクルを使って、魅力的な視覚効果を作成できるJavaScriptライブラリです。

パーティクルは、サイズ、色、形、動きをカスタマイズできます。また、マウスの動きやクリックなど、ユーザーのインタラクションに反応し、サイトにエンゲージメントのレイヤーを追加します。

particle.js がどのようなものかお分かりいただけたと思いますので、WordPress で背景をアニメーションさせるためにどのように使用できるかを見てみましょう。初心者の方には2つの方法がありますので、以下のクイックリンクからナビゲーションしてください：

方法1：ページビルダーでアニメーションの背景を追加する方法（推奨）

最初の方法は、市場で最高のWordPressページビルダープラグインであるSeedProdを使用することです。 ビルトインで高度にカスタマイズ可能なパーティクル背景機能を提供する。

すでに用意されているパーティクルアニメーションから1つを選ぶか、カスタマイザーで追加することができます。また、パーティクルの数、アニメーションの動き、マウスオーバー効果などを好みに合わせて変更することも可能です。

SeedProdの詳細については、SeedProdの詳細レビューをご覧ください。カスタマイズオプション、テンプレートやブロックの選択、サードパーティとの統合など、すべてを網羅しています。

このガイドでは、SeedProdのプレミアム版を使用します。プレミアム版ではパーティクルバックグラウンド機能が使用可能だからです。

SeedProdを使用するには、まずプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストールに関する初心者ガイドをご覧ください。

その後、ライセンスキーをプラグインにコピー＆ペーストするだけです。WordPressダッシュボードに移動し、SeedProd ” 設定、 、適切なフィールドにライセンスキーを挿入します。そして、’Verify Key’をクリックします。

WordPressでパーティクルの背景を追加する前に、まずテーマをカスタマイズしたい場合は、SeedProdでカスタムテーマを簡単に作成する方法のガイドに従ってください。

次に、パーティクルの背景を挿入したいページのドラッグ＆ドロップ・ビルダーを開く必要があります。SeedProdでテーマを作成した場合は、すでにWordPressにいくつかのページが追加されているはずです。

次に、Pages ” All Pagesに 行き、ホームページやアバウトページなどのページにカーソルをオーバーするだけです。そして、「SeedProdで編集」ボタンを選択します。

このオプションがあなたの方で設定されなくても、心配しないでください。

代わりに’Edit’ボタンをクリックし、ブロックエディターで’Edit with SeedProd’ボタンをクリックします。

これでSeedProdのページビルダーの中にいるはずです。

WordPressでパーティクルの背景を追加したいページセクションにマウスオーバーして選択するだけです。セクションの上部に紫色の枠線とツールバーが表示されれば、選択したことがわかります。

セクションをクリックすると、左側にセクションのサイドバーが表示されます。

あとはすべて、「高度な」タブに切り替えて、「パーティクルの背景を有効化」の設定を切り替えるだけです。

設定できるパーティクルの背景設定はいくつかあります。

一つはスタイルで、ポリゴン、スペース、スノー、雪の結晶、クリスマス、ハロウィーン、カスタマイザーのアニメーションエフェクトの中から好きなものを選ぶことができます。

カスタムパーティクル背景アニメーションの追加については、投稿の後半で詳しく説明します。

また、アニメーションの不透明度をコントロールする「不透明度（Opacity）」や、パーティクルが向かう方向を設定する「流れ方向（Flow Direction）」もあります。

パーティクルの色もカスタマイズできる。

ただし、クリスマスとハロウィーンについては、パーティクルが画像形式であるため、色の設定はない。

Colorの下には「高度な設定」があります。これを有効にすると、パーティクルの数、パーティクルのサイズ、移動速度、マウスオーバー効果の有効化をカスタマイズできます。

最後の機能では、パーティクルがマウスの方向に従って動きます。ページビルダーエリアでサイトを表示している場合や、セクション内のコンテンツがそのセクションのスペース全体を占めている場合は機能しないことに注意してください。

それですべてだ。

WordPressのパーティクル背景のカスタマイザーが完了したら、右上の「保存」ボタンをクリックして変更を公開します。また、「プレビュー」ボタンを選択すると、パーティクルの背景がどのように見えるかを確認できます。

サイトにカスタムパーティクル背景を作成する

利用可能なアニメーションエフェクトがあなたのニーズに合わない場合は、カスタマイザーを作成することもできます。パーティクル背景の設定で「カスタム」スタイルを選択します。

その後、「こちらのリンクにアクセスし、パーティクルに必要な属性を選択してください」という行のリンクをクリックする。

このサイトでは、パーティクルのデザイン、インタラクティブ性、背景色をカスタマイザーすることができます。

パーティクル」設定では、パーティクルの数、色、形、大きさ、不透明度、パーティクルをつなぐ線、動きを調整できる。

その下にあるのが『双方向性』だ。

ここで、パーティクルの上にマウスオーバーしたり、パーティクルをクリックしたときのパーティクルの挙動を調整できます。

最後に、「ページ背景（css）」です。ここでは、パーティクルアニメーションの背景色を変更し、そのサイズ、位置、繰り返しを変更することができます。

必要であれば、カスタムの背景画像URLをアップロードすることもできる。

完了したら、下部にある「現在の設定（json）をダウンロード」ボタンをクリックします。

これでパーティクル背景のJSONコードファイルがダウンロードされるので、テキストエディターアプリを使って開いてください。テキストエディターウィンドウを開いたまま、次のステップに進んでください。

さて、SeedProdページビルダーに戻りましょう。

高度な設定の「Particle Background」メニューにもう一度ナビゲーションします。そして、JSONコードをコピー＆ペーストして、適切なテキストボックスに入れます。

これでプレビューセクションにパーティクルの背景が表示されるはずです。

プレビュー」をクリックしてフロントエンドでパーティクルの背景がどのように見えるかを確認し、「保存」をクリックして変更を確定します。

パーティクルの背景がどのように見えるかの例です：

方法2：無料のプラグインでアニメーションの背景を追加する方法

2つ目の方法は、SeedProdを使用する無料の代替方法です。これには、無料のアニメーションプラグインであるParticle Background WPプラグインが必要です。

前回同様、Particle Background WPプラグインをインストールして有効化してください。ガイドが必要な場合は、WordPressプラグインのインストール方法をご覧ください。

プラグインを有効化した後、WordPressダッシュボードからParticle Backgroundに移動します。ここで、いくつかのセクションが表示されます。

ひとつはDeploy。完成したパーティクルの背景をページや投稿に追加したい場合は、ショートコードが含まれています。

また、「フロントページに追加」や「ブログページに追加」にチェックを入れることで、それらのページに背景が自動的に挿入されます。

下にスクロールすると、コンテンツセクションがあります。ここで、パーティクルの背景の上にテキストを追加することができます。

HTMLを知っていれば、HTMLコードを追加してテキストをカスタマイズすることができます。また、「メディアを追加」をクリックして、WordPressのメディアライブラリから画像やファイルを挿入することもできます。

以下はWordPressパーティクル背景アニメーションの設定です。パーティクルの近さ、遠さをコントロールする「パーティクル密度」、パーティクルの「ドットカラー」、「背景色」を調整できます。背景を透明にすることも可能です。

このWordPressプラグインの欠点は、SeedProdと同じようにパーティクルの形状を調整できないことです。そのため、このプラグインを使用する場合は考慮する必要があります。

それで終わりだ！

このWordPressプラグインを使ったパーティクルアニメーション背景の例をご覧ください。

代替オプション：WordPress動画の背景を追加する

サイトにアニメーション効果を加えたいが、これまでご紹介した方法が気に入らない場合は、代わりに動画の背景を追加することをお勧めします。

動画の背景を使えば、サイトにどのようなアニメーション効果を持たせるか、より多くのオプションが得られます。さらに、動画を自動的にループ再生させることもできるので、アニメーションのように感じることができます。

もちろん、動画全体をサイトにアップロードすることはお勧めしません。WordPressの動作が大幅に遅くなり、訪問者をイライラさせることになります。

その代わりに、YouTubeの動画を埋め込んで、フルスクリーンのアニメーション背景として使うことができます。

詳しくは、WordPressでYouTube動画の背景をフルスクリーンにする方法をご覧ください。

アニメーションの背景はサイトを遅くする？

アニメーションの背景は、適切でなければサイトの表示速度を低下させます。しかし、これを避ける方法があります。

パーティクル背景の場合、パーティクルの数と移動速度はページの読み込み速度に影響します。パーティクルの数が多ければ多いほど、また動きが速ければ速いほど、処理能力が必要になり、読み込みが遅くなる可能性があります。

この問題を解決するには、パーティクルの密度や速度の設定を変えてみて、サイトに最適な設定を見つけるとよいでしょう。この過程で、WordPressのスピードテストを実行して効果を確認することができます。

また、アニメーションの背景は、最も重要なページにのみ使用するのがよいでしょう。どこにでも使う必要はありませんし、飽きてしまうかもしれません。

最後に、あなたのサイトをパーティクルの背景で高速に保つためには、サイト速度のベストプラクティスに従うようにしてください。さらに詳しくは、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.