WordPressでParticle.jsのアニメーション背景を作成する方法 

WordPressのウェブサイトにパーティクルの背景を追加したいですか？

particle.jsのアニメーション効果は、サイトをよりインタラクティブに感じさせ、重要なコンテンツを目立たせることができます。このガイドでは、プラグインやページビルダーを使ってWordPressにパーティクルの背景を追加する方法をステップバイステップで紹介します。

また、自分のスタイルに合わせてパーティクルをカスタマイズし、サイトを高速でモバイルフレンドリーに保つ方法も紹介する。

WordPressにパーティクル背景を追加する簡単な手順

なぜWordPressでパーティクル背景を使うのか？

パーティクル背景は、サイトにダイナミックでインタラクティブな雰囲気を加えることができます。主要なセクションに注意を向けさせ、訪問者の関心を長く引きつけることができます。

• 重要なコンテンツを強調するヒーローセクションやコールトゥアクションの後ろに、パーティクルの背景をさりげなく使いましょう。
• クリエイティビティをアピール：ポートフォリオ、クリエイティブエージェンシー、デザイン性の高いウェブサイトに最適です。
• 知覚されるロード時間を改善します：バックグラウンドで重いメディアを読み込んでいる間、ローディングアニメーションとしてparticle.jsのエフェクトを使用することもできます。

例えば、デザインポートフォリオサイトでは、ヘッダーにソフトパーティクルアニメーションを追加することで、展示作品の邪魔をすることなく、クリエイティビティをアピールすることができる。

WordPressサイトにParticle.jsの背景を追加するには？

初心者でもWordPressサイトにパーティクルの背景を追加する方法はいくつかあります。

まず、WordPressのParticle.jsプラグインや、パーティクルエフェクト機能が組み込まれたWordPressページビルダーを使用します。通常、コーディングの知識や技術的なスキルは不要なので、初心者の方にはこの方法をお勧めします。

パーティクル効果をサイトに追加するもう一つの方法は、particle.jsを含むWordPressテーマを使用することです。これは、新しいサイトを立ち上げる際にWordPressテーマが必要な場合に便利です。

最後のオプションは、カスタムコードを使用してウェブサイトにパーティクル効果を手動で追加する方法です。このオプションは、コーディングに慣れている場合にのみお勧めします。

このガイドでは、最も簡単な方法であるWordPressプラグインを使用する方法を説明します。さっそく始めよう！

SeedProdを使ってWordPressのセクションにパーティクル背景を追加する

まず、particles.jsライブラリを組み込んだWordPressページビルダープラグインを使う：SeedProdです。

SeedProdは、100万人以上のユーザーを持つWordPressのための最高のウェブサイトとページビルダーです。ドラッグ＆ドロップでWordPressテーマ、ランディングページ、WooCommerceウェブサイト、その他あらゆるレイアウトをコードを書くことなく作成できます。

何百ものページテンプレート、デザインエレメント、パーティクル背景があらかじめ用意されているため、魅力的なパーティクルアニメーションを作成するのに数分しかかかりません。

SeedProdを使用してパーティクル背景をサイトに追加するには、以下の手順に従ってください。

ステップ1.SeedProdのインストールとアクティベート

まず、ここをクリックしてSeedProdを始め、プラグインをダウンロードしてください。その後、WordPressウェブサイトにプラグインをインストールし、有効化してください。

SeedProdをインストールする際にヘルプが必要な場合は、SeedProdのインストールに関するドキュメントをご覧ください。インストール手順とプラグインのライセンスキーの見つけ方と有効化について説明しています。

ステップ2.テンプレートを選ぶ

次のステップは、あらかじめ用意されているテンプレートを選ぶことです。テンプレートの種類は、WordPressのテーマを作りたいのか、ランディングページを作りたいのかによって異なります。

SeedProdのテーマビルダーを使用すると、ゼロから完全なWordPressテーマを構築することができます。ただし、このオプションを選択すると、既存のウェブサイトのデザインが上書きされます。 

あるいは、ランディングページビルダーを使えば、既存のテーマに触れることなく、どんなページでも作ることができる。このガイドでは、このオプションを使用します。

WordPressの管理ダッシュボードから、SeedProd " Landing Pagesに移動します。このページでは、さまざまなページモードが上部に表示され、独自のカスタムページを作成するオプションがあります。

新しいランディングページを追加]ボタンをクリックします。

ここでは、何百ものランディングページのテンプレートから選ぶことができます。

上部のタブをクリックすると、以下のようにタイプ別に絞り込むことができる：

• 近日公開
• メンテナンス・モード
• 404ページ
• 売上高
• ウェビナー
• リード・スクイーズ
• ありがとう
• ログイン

テンプレートのデザインを選択するには、オレンジ色のチェックマークアイコンをクリックします。

ランディングページ名を入力するポップアップウィンドウが開きます。SeedProdは自動的にランディングページのスラッグ(URL)を生成しますが、お好みで変更することもできます。

これらの詳細に満足したら、「保存してページの編集を開始する」ボタンをクリックします。

ページビルダーの操作

テンプレートはSeedProdのドラッグアンドドロップビジュアルエディタで開きます。左側のパネルにはブロック、セクション、設定が表示され、右側にはライブプレビューが表示されます。

プレビューのどこかをクリックすると、そのエレメントの設定を表示したりカスタマイズしたり、変更をリアルタイムで確認することができます。

例えば、メインヘッダーセクションをクリックすると、左側のパネルでその設定が開きます。そこから、新しい背景画像を選んだり、別の背景位置を選んだり、背景を色で薄めたりすることができます。

さらに、左側のブロックパネルから新しい要素をドラッグして所定の位置にドロップすることで、テンプレートに新しい要素を追加できます。

ステップ3.パーティクルの背景を有効にしてカスタマイズする

先に述べたように、SeedProdはページビルダーの設定にparticle.jsを組み込んでいます。現在、どのページセクションでもこの機能を使用できます。

これを行うには、紫色の枠が表示されるまで任意のセクションをクリックし、「詳細設定」タブを選択します。

次にParticle Background見出しを見つけて展開し、Enable Particle Backgroundトグルをオンに切り替えます。

すぐに、セクションの背景にポリゴンアニメーションエフェクトが表示されます。

スタイル」ドロップダウンメニューをクリックすると、パーティクルを変更することができます：

• スペース
• 雪
• 雪の結晶
• クリスマス
• ハロウィーン
• カスタム

パーティクルのスタイルを選択した後、パーティクルの不透明度、流れの方向、色を設定できます。

パーティクルのカスタマイズをもっとコントロールしたい場合は、Advanced Settingsトグルを有効にしてください。

ここでは、パーティクルの数を増やしたり、パーティクルの大きさを変えたり、セレクタを使ってパーティクルの移動速度を調整したりできます。

注意：パーティクルの数を増やすと、ページ速度に影響することがあります。最高のパフォーマンスを得るためには、この設定をできるだけ低く保つのがベストです。

同じパネルに、パーティクルのホバー効果を有効にするオプションがあります。これを有効にすると、カーソルでパーティクルの上を移動したときにパーティクルが散らばります。ただし、このエフェクトを見ることができるのは、ページビルダーの外でページをプレビューするときだけです。

カスタムパーティクル背景の追加

カスタムパーティクルエフェクトを追加したい場合は、スタイルドロップダウンメニューからカスタムオプションを選択するだけです。ご覧のように、カスタムJSONファイルを追加する必要があることが説明されています。

幸運なことに、説明書にはvincentgarreau.com/particle.jsへのリンクが含まれている。これはJavaScriptのライブラリで、ポイント＆クリックでパーティクルの背景にカスタム属性を設定できる。

パーティクルのjson設定パネルでは、カスタム形状、密度、サイズ、速度、色などを選択できます。また、背景のカスタムCSSを設定したり、動きのエフェクトを有効にすることもできます。

パーティクルの設定が完了したら、"Download current config "をクリックします。これで設定ファイルがコンピュータにダウンロードされます。

ファイルを開いてコードをコピーし、ページビルダーの空欄に貼り付けます。

カスタムパーティクルの背景が即座に表示されます！

そこから、ランディングページが思い通りになるまでカスタマイズを続けましょう。変更を保存するには、忘れずに「保存」をクリックしてください。

ステップ 4.変更を公開する

ランディングページのカスタマイズに満足したら、本番の準備が整いました。

これを行うには、[Save]ドロップダウンの矢印をクリックし、[Publish]をクリックします。

これで、あなたのランディングページにアクセスして、パーティクル背景の動きを見ることができます。

Particle Background WPプラグインを使う

WordPressサイトにパーティクル背景を追加するもう一つの方法は、Particle Background WPプラグインを使用することです。

価格無料

無料プラン/トライアル：あり

主な機能： 🔹 基本的なパーティクルエフェクト 🔹 ショートコードのサポート 🔹 シンプルな設定

評価B

最適：無料で軽量なオプションを求めるユーザー

これは無料のWordPress particle.jsプラグインです。しかし、カスタマイズのオプションはSeedProdほど簡単でも広範囲でもありません。

まず、WordPressサイトにParticle Background WPをインストールし、有効化します。次に、WordPressの管理画面で「Particle Background」メニュー項目をクリックします。

最初のパネルでは、フロントページとブログページ、またはショートコードでパーティクル背景バナーを表示できます。ブログページのバナーを有効にしました。

その下には、WYSIWYGエディタでカスタマイズできるコンテンツエリアがあります。ここでは、バナーの見出し、説明、行動喚起を入力することができます。

次のパネルには、密度、色、背景色などのパーティクルカスタマイズオプションがあります。また、カスタムCSSを入力することもできます。

変更を保存した後、ブログページにアクセスすると、パーティクルの背景が付いたバナーが表示されます。

また、ショートコードを使用して、どのページや投稿にも同じバナーを追加することができます。ただし、バナーはSeedProdのようにコンテンツの後ろではなく、コンテンツの上に表示されることに注意してください。

WordPressにParticle.jsを追加するその他の方法

WordPress サイトに particle.js を追加する他の方法をお探しの場合は、以下のツールが役立ちます：

• Elementor用のUltimate Addons：このアドオンを使用すると、Elementorページビルダープラグインを使用して作成したページにパーティクルエフェクトを追加できます。
• Beaver Builderのための究極のアドオン：Beaver Builderプラグインを使用して作成されたページにパーティクルアニメーションを追加します。
• 手動で：HTML、PHP、JavaScript、その他のコーディング言語に慣れている場合にのみ、この方法をお勧めします。

結局のところ、WordPressにパーティクル背景を追加する最も簡単な方法は、SeedProdを使用することです。使い方は簡単で、コーディングは必要なく、数クリックで設定できるカスタマイズオプションがたくさんあります。

WordPressのパーティクル背景に関するFAQ

そうだ！

このガイドが、WordPressでパーティクル背景を作成する方法を学ぶのにお役に立てば幸いです。

また、新しいパーティクル背景を補完するのに最適なWordPressフォトギャラリープラグインについてのガイドもお勧めです。WordPressで雪のエフェクトを追加する方法はこちら。

お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。