WordPressウェブサイトにパーティクル背景を追加したいですか？
アニメーション化されたparticle.jsエフェクトは、サイトをよりインタラクティブに感じさせ、重要なコンテンツを際立たせるのに役立ちます。このガイドでは、コーディング不要で、プラグインまたはページビルダーを使用してWordPressにパーティクル背景を追加する方法を段階的に説明します。
また、独自のスタイルに合わせてパーティクルをカスタマイズし、サイトを高速でモバイルフレンドリーに保つ方法も紹介します。
WordPressにパーティクル背景を追加するためのクイックステップ：
パーティクル背景とは？
パーティクル背景とは、ウェブサイトのコンテンツの後ろに表示される、動く要素（パーティクル）のアニメーションセットです。これらのパーティクルは移動したり、色が変わったり、ユーザーの操作に反応したりすることができます。
ほとんどのパーティクル背景は、軽量なJavaScriptライブラリであるparticle.jsによって駆動されています。これにより、メインコンテンツに影響を与えることなく、パーティクルの形状、色、サイズ、動きをカスタマイズできます。
ここに、実際に動作しているパーティクル背景の例を示します：
WordPressでパーティクル背景を使用する理由
パーティクル背景は、サイトにダイナミックでインタラクティブな雰囲気をもたらすことができます。これにより、重要なセクションに注目を集め、訪問者をより長く引き付けることができます。
- 重要なコンテンツを強調する：ヒーローセクションや行動喚起の背後に、控えめなパーティクル背景を使用します。
- 創造性を披露する：ポートフォリオ、クリエイティブエージェンシー、またはデザイン重視のウェブサイトに最適です。
- 知覚される読み込み時間を改善する：重いメディアがバックグラウンドで読み込まれている間に、読み込みアニメーションとしてparticle.jsエフェクトを使用することもできます。
例：デザインポートフォリオサイトでは、ヘッダーにソフトなパーティクルアニメーションを追加して、表示されている作品から注意をそらすことなく創造性をアピールできます。
WordPressサイトにパーティクル.js背景を追加する方法は？
初心者でも、WordPressサイトにパーティクル背景を追加する方法はいくつかあります。
まず、パーティクル.jsライブラリが組み込まれたWordPressパーティクル.jsプラグインまたはWordPressページビルダーを使用できます。これは通常、コーディング知識や技術スキルが一切不要なため、初心者におすすめのオプションです。
サイトにパーティクルエフェクトを追加するもう1つの方法は、particle.jsを含むWordPressテーマを使用することです。これは、新しいサイトを開始し、まだWordPressテーマが必要な場合に便利です。
最後のオプションは、カスタムコードを使用して、ウェブサイトにパーティクルエフェクトを手動で追加することです。コーディングに慣れている場合のみ、このオプションをお勧めします。
このガイドでは、最も簡単なオプションであるWordPressプラグインの使用に焦点を当てます。始めましょう！
SeedProdを使用してWordPressセクションにパーティクル背景を追加する
まず、機能にparticles.jsライブラリが組み込まれたWordPressページビルダープラグインであるSeedProdを使用します。
SeedProdは、100万人以上のユーザーを持つWordPress向けの最高のウェブサイトおよびページビルダーです。ドラッグアンドドロップビルダーを使用して、カスタムWordPressテーマ、ランディングページ、WooCommerceウェブサイト、その他のレイアウトをコードを書かずに作成できます。
何百もの既製のページテンプレート、デザイン要素、および組み込みのパーティクル背景により、見事なパーティクルアニメーションの作成はわずか数分で完了します。
SeedProdでサイトにパーティクル背景を追加するには、以下の手順に従ってください。
ステップ1. SeedProdのインストールと有効化
まず、ここをクリックしてSeedProdを使い始めるとプラグインをダウンロードしてください。次に、WordPressウェブサイトにプラグインをインストールして有効化します。
これについてヘルプが必要な場合は、SeedProdのインストールに関するドキュメントを参照してください。インストールプロセスとプラグインライセンスキーの検索と有効化について説明しています。
ステップ2. 事前作成済みテンプレートの選択
次のステップは、事前作成済みのテンプレートを選択することです。選択するテンプレートの種類は、WordPressテーマを作成したいか、ランディングページを作成したいかによって異なります。
SeedProdのテーマビルダーを使用すると、ゼロから完全なWordPressテーマを構築できます。ただし、このオプションを選択すると、既存のウェブサイトのデザインが上書きされます。
または、ランディングページビルダーを使用すると、既存のテーマに触れることなく任意のページを作成できます。このガイドでは、このオプションを選択します。
WordPress管理ダッシュボードから、SeedProd » ランディングページに移動します。このページの上部にはさまざまなページモードが表示され、独自のカスタムページを作成するオプションがあります。
次に、新しいランディングページを追加ボタンをクリックします。
ここでは、何百もの事前作成済みランディングページテンプレートから選択できます。
上部のタブをクリックして、タイプ別にフィルタリングできます。これには以下が含まれます：
テンプレートデザインを選択するには、オレンジ色のチェックマークアイコンをクリックします。
これによりポップアップウィンドウが開き、ランディングページ名を入力できます。SeedProdはランディングページのスラッグ（URL）を自動的に生成しますが、必要に応じて変更することもできます。
これらの詳細に満足したら、保存してページ編集を開始ボタンをクリックします。
ページビルダーの操作
テンプレートがSeedProdのドラッグアンドドロップビジュアルエディターで開かれます。左側のパネルにはブロック、セクション、設定が表示され、右側にはライブプレビューが表示されます。
プレビューのどこかをクリックすると、その要素の設定を表示およびカスタマイズし、変更をリアルタイムで確認できます。
たとえば、メインヘッダーセクションをクリックすると、左側のパネルに設定が開きます。そこから、新しい背景画像を選択したり、別の背景位置を選択したり、カラーオーバーレイで背景を暗くしたりできます。
さらに、左側のブロックパネルから要素をドラッグして配置にドロップすることで、テンプレートに新しい要素を追加できます。
ステップ3. パーティクル背景の有効化とカスタマイズ
前述の通り、SeedProd にはページビルダー設定に particle.js が組み込まれています。現在、この機能はどのページセクションでも使用できます。
これを行うには、紫色の境界線が表示されるまでいずれかのセクションをクリックし、次に 詳細 タブを選択します。
次に、 パーティクル背景 の見出しを見つけて展開し、 パーティクル背景を有効にする トグルをオンの位置に切り替えます。
すぐに、セクションの背景にポリゴンアニメーション効果が表示されます。
「スタイル」ドロップダウンメニューをクリックすると、パーティクルを次のいずれかに変更できます。
- スペース
- スノー
- スノーフレーク
- クリスマス
- ハロウィン
- カスタム
パーティクルスタイルを選択した後、パーティクルの不透明度、流れの方向、色を設定できます。
パーティクルのカスタマイズをより細かく制御したい場合は、 詳細設定 トグルを有効にします。
ここでは、パーティクルの数を増やしたり、パーティクルのサイズを変更したり、セレクターを使用してパーティクルの移動速度を調整したりできます。
注意: パーティクルの数を増やすと、ページの読み込み速度に影響を与える可能性があります。パフォーマンスを最大限に高めるには、この設定を可能な限り低く保つことをお勧めします。
同じパネルには、パーティクルのホバー効果を有効にするオプションがあります。これを有効にすると、カーソルを上に移動したときにパーティクルが散らばります。ただし、この効果はページビルダーの外でプレビューするときにのみ表示されます。
カスタムパーティクル背景の追加
カスタムパーティクル効果を追加したい場合は、スタイルドロップダウンメニューから カスタム オプションを選択するだけです。ご覧のとおり、カスタムJSONファイルを追加する必要があることが指示で示されています。
幸いなことに、指示には vincentgarreau.com/particle.js へのリンクが含まれています。これは、ポイントアンドクリックでパーティクル背景のカスタム属性を設定できるJavaScriptライブラリです。
パーティクルJSON設定パネルでは、カスタムシェイプ、密度、サイズ、速度、色などを選択できます。背景のカスタムCSSを設定したり、移動効果を有効にしたりすることもできます。
パーティクル設定に満足したら、「現在の設定をダウンロード」の見出しをクリックします。これにより、設定ファイルがコンピューターにダウンロードされます。
次に、ファイルからコードを開いてコピーし、ページビルダーの空のボックスに貼り付けます。
カスタムパーティクル背景がすぐに表示されます！
そこから、ランディングページが希望どおりの外観になるまでカスタマイズを続けます。変更を保存するには、 保存 をクリックすることを忘れないでください。
ステップ4.変更を公開する
ランディングページのカスタマイズに満足したら、公開する準備が整いました。
これを行うには、保存ドロップダウン矢印をクリックし、 公開 をクリックします。
これで、ランディングページにアクセスして、パーティクル背景が機能しているのを確認できます。
パーティクル背景WPプラグインの使用
WordPressサイトにパーティクル背景を追加するもう1つの方法は、Particle Background WPプラグインを使用することです。
| 価格: 無料 |
| 無料プラン / トライアル：あり |
| 注目の機能: 🔹 基本的なパーティクル効果 🔹 ショートコードサポート 🔹 シンプルな設定 |
| 評価: B |
| 対象者: 無料で軽量なオプションを求めるユーザー |
これは無料のWordPress particle.jsプラグインです。ただし、カスタマイズオプションはSeedProdほど簡単または包括的ではありません。
まず、WordPressウェブサイトにParticle Background WPをインストールして有効にする必要があります。次に、WordPress管理パネルのParticle Backgroundメニュー項目をクリックします。
最初のパネルでは、フロントページとブログページ、またはショートコードでパーティクル背景バナーを表示できます。ここではブログページでバナーを有効にしました。
その下には、WYSIWYGエディターでカスタマイズできるコンテンツエリアがあります。ここにバナーの見出し、説明、およびコールトゥアクションを入力できます。
次のパネルには、密度、色、背景色などのパーティクルカスタマイズオプションが含まれています。カスタムCSSを入力することもできます。
変更を保存した後、ブログページにアクセスすると、パーティクル背景付きのバナーが表示されます。
ショートコードを使用して、同じバナーを任意のページまたは投稿に追加することもできます。ただし、SeedProdとは異なり、バナーはコンテンツの後ろではなく、上に表示されることに注意してください。
WordPressにParticle.jsを追加するその他の方法
WordPressサイトにparticle.jsを追加する他の方法を探している場合は、次のツールが役立つかもしれません。
- Ultimate Addons for Elementor: このアドオンを使用すると、Elementorページビルダープラグインを使用して作成したページにパーティクル効果を追加できます。
- Ultimate Addons for Beaver Builder: Beaver Builderプラグインを使用して作成したページにパーティクルアニメーションを追加します。
- 手動で: このアプローチは、HTML、PHP、JavaScript、およびその他のコーディング言語に慣れている場合にのみ推奨します。
結局のところ、WordPressにパーティクル背景を追加する最も簡単な方法はSeedProdを使用することです。使いやすく、コーディングは不要で、数回のクリックで設定できる豊富なカスタマイズオプションがあります。
WordPressパーティクル背景に関するFAQ
いいえ、WordPressにパーティクル背景を追加するためにコーディング経験は必要ありません。SeedProdにはコード不要のインターフェイスがあり、コードなしで簡単にサイトにエフェクトを追加できます。
パーティクル.jsの背景は視覚的に魅力的ですが、追加のJavaScriptが必要であり、ウェブサイトの読み込み時間が遅くなる可能性があります。サイトが迅速に読み込まれ、ユーザーエクスペリエンスに悪影響を与えないように、サイトを最適化することが重要です。
サイトの最も重要な領域にのみ、低密度のパーティクル背景を使用することをお勧めします。
はい！SeedProdを使用すると、パーティクルの色、形状、密度、その他のパラメータをカスタマイズして、ウェブサイトにユニークで視覚的に魅力的なエフェクトを作成できます。
はい、パーティクル.jsの背景は適切に最適化されていればモバイルフレンドリーにすることができます。ただし、異なるデバイスや画面サイズでパーティクル背景をテストして、ユーザーエクスペリエンスに悪影響を与えないようにすることが不可欠です。SeedProdの組み込みモバイルプレビュー機能を使用してこれを行うことができます。
はい、particle.jsコードを手動でWordPressテーマに追加することは可能ですが、テンプレートファイルを編集する必要があり、メンテナンスが難しくなる可能性があります。
以上です！
このガイドがWordPressでパーティクル背景を作成する方法を学ぶのに役立ったことを願っています。
新しいパーティクル背景を補完するために、最高のWordPressギャラリープラグインに関するこのガイドも気に入るかもしれません。または、WordPressに雪の効果を追加する方法に関するこのガイドもご覧ください。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
