Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

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

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

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

How to Add an Animated Background in WordPress

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

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

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

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

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

An example of a Christmas particle background

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

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

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

particle.js とは?

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

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

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

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

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

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

The SeedProd page builder plugin for WordPress

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

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

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

Adding a SeedProd license key to WordPress

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

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

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

Clicking Edit with SeedProd on a WordPress page

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

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

Clicking Edit with SeedProd inside the WordPress block editor

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

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

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

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

Enabling the particle background settings in SeedProd

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

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

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

Configuring the basic particle background settings in SeedProd

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

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

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

What the Christmas particle background in SeedProd looks like

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

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

The particle background's advanced settings in SeedProd

それですべてだ。

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

Saving or previewing changes in SeedProd

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

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

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

Selecting the Custom style and clicking the link provided in SeedProd to make a custom particle background

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

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

Editing the Particles settings in Vincent Garreau's particle.js website

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

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

The particle interactivity settings in Vincent Garreau's website

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

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

The particle page background settings in Vincent Garreau's website

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

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

Downloading the JSON file for the particle background

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

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

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

Inserting the JSON code  in the particle background settings of SeedProd

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

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

Example of an animated particle background made with SeedProd

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

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

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

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

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

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

Configuring the Particle Background WP Deploy settings

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

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

Inserting some text in the Particle Background WP plugin

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

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

Configuring the Particle Background WP's animated particle background settings

それで終わりだ!

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

An animated background example using Particle Background WP plugin

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

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

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

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

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

Video background example made with Thrive Architect

詳しくは、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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

3件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Carlos Rangel

    Nice article. I wonder if is possible to achieve this effect using some code like vanilla JavaScript and maybe some CSS styles. This as become my favorite WordPress blog :)

    • WPBeginner Support

      While possible, it would require coding knowledge and would not be a beginner task which is why we do not currently recommend it.

      管理者

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。