要約：WordPressにパーティクル背景を追加する方法
SeedProdを使用すると、コーディング不要でWordPressの任意のセクションにパーティクル背景を追加できます。以下は、最初から最後までの一連の手順です。
- SeedProdをインストール：プラグインをWordPressサイトに追加して有効化します。
- テンプレートを選択：あらかじめ用意されたランディングページのデザインから開始します。
- エフェクトを有効化：セクションをクリックし、[高度な設定]タブを開いて、[パーティクル背景]をオンにします。
- カスタマイズ：スタイルを選択し、密度、色、速度を調整します。
- 公開：変更を保存して、ページを公開します。
ポートフォリオサイトやヒーローセクションが単調で、ページ全体を再構築せずに視覚的な深みを加えたいと考えているとします。パーティクル背景とは、コンテンツの後ろに表示されるゆっくり動くドットと接続線であり、それを実現する最も簡単な方法の1つです。
このガイドでは、プラグインを使用してWordPressにパーティクル背景を追加する方法を、コーディング不要で紹介します。また、独自のスタイルに合わせてパーティクルをカスタマイズし、サイトを高速でモバイルフレンドリーに保つ方法も説明します。
パーティクル背景とは？
パーティクル背景とは、ウェブサイトのコンテンツの後ろに表示される、動く要素のアニメーションセットです。これらのパーティクルは、移動したり、色を変更したり、ユーザーの操作に反応したりできます。
ほとんどのパーティクル背景は、軽量なJavaScriptライブラリであるparticle.jsによって駆動されています。これにより、メインコンテンツに影響を与えることなく、パーティクルの形状、色、サイズ、動きをカスタマイズできます。
知っておくべきことの1つ：元のparticle.jsライブラリはもはや積極的に開発されておらず、現在はtsParticlesとしてメンテナンスされています。SeedProdまたはParticle Background WPプラグインを使用している場合、統合によって処理されます。カスタム設定をゼロから構築したい場合は、アクティブなツールはtsparticles.js.orgにあります。
ここに、実際に動作しているパーティクル背景の例を示します：
WordPressでパーティクル背景を使用する理由
パーティクル背景は、サイトにダイナミックでインタラクティブな感触を加え、重要なセクションに注目を集めるのに役立ちます。重要なのは、エフェクトをサイトの種類に合わせることです。
パーティクル背景がその価値を発揮する4つのユースケースを次に示します。
- ポートフォリオサイト：ヒーローセクションの控えめなポリゴンアニメーションは、作品から注意をそらすことなく創造性を示します。
- テクノロジーおよびSaaSランディングページ：接続線パーティクルは、モダンでデータ中心のブランドを示します。
- 季節限定プロモーション：ホリデーセール用のスノーパーティクル、または春のローンチ用の浮遊形状。
- 近日公開ページ：コンテンツがまだ開発中であっても、パーティクルアニメーションによりページが視覚的に生き生きとします。
私がこのエフェクトを最もよく使うのは、最後のケースです。近日公開ページはSeedProdの無料プランで最も強力な機能であり、パーティクル背景は、それ以外は空のプレースホルダーページに何か見どころを与えます。
WordPressサイトにパーティクル.js背景を追加する方法は？
初心者でも、WordPressサイトにパーティクル背景を追加する方法はいくつかあります。
まず、WordPressのparticle.jsプラグインまたは組み込みのパーティクルエフェクト機能を備えたWordPressページビルダーを使用できます。通常、コーディングの知識や技術スキルが全く必要ないため、初心者にはこのオプションをお勧めします。
別の方法として、particle.jsを含むWordPressテーマを使用する方法があります。新しいサイトを立ち上げる場合や、まだテーマが必要な場合には便利です。
最後のオプションは、カスタムコードを使用してパーティクルエフェクトを手動で追加することです。コーディングに慣れている場合にのみ、これをお勧めします。
このガイドでは、最も簡単なオプションであるWordPressプラグインの使用に絞ります。早速始めましょう。
SeedProdでWordPressにパーティクル背景を追加する方法
SeedProdは、エディターに組み込まれたパーティクル背景を備えたドラッグ＆ドロップのウェブサイトビルダーです。個別のプラグインやカスタムコードは必要なく、エフェクトはトグルで有効になります。
70万以上のWordPressサイトがSeedProdを使用して、コードに触れることなくページやテーマを構築しています。これを使用して、カスタムWordPressテーマ、ランディングページ、および必要なほぼすべてのレイアウトを作成できます。
何百もの既製のページテンプレートと組み込みのパーティクル背景により、パーティクル背景WordPressエフェクトの設定はわずか数分で完了します。サイトに追加するには、以下の手順に従ってください。
ステップ1. SeedProdのインストールと有効化
まず、SeedProdを開始し、プラグインをダウンロードします。次に、WordPressウェブサイトにインストールしてアクティブ化します。
これについてヘルプが必要な場合は、SeedProdのインストールドキュメントを確認してください。インストールプロセスとプラグインライセンスキーのアクティブ化方法について説明しています。
ステップ2. 事前作成済みテンプレートの選択
次のステップは、既製のテンプレートを選択することです。選択するタイプは、WordPressテーマを作成したいか、ランディングページを作成したいかによって異なります。
SeedProdのテーマビルダーを使用すると、ゼロから完全なWordPressテーマを構築できます。このオプションを選択すると、既存のウェブサイトデザインが上書きされます。
ランディングページビルダーを使用すると、既存のテーマに触れることなく任意のページを作成できます。このガイドでは、このオプションを選択します。
WordPress管理ダッシュボードから、SeedProd » Landing Pagesに移動します。上部にさまざまなページモードと、独自のカスタムページを作成するオプションが表示されます。
Add New Landing Pageボタンをクリックします。ここでは、何百もの既製のランディングページテンプレートから選択できます。
上部のタブを使用して、テンプレートをタイプ別にフィルタリングできます。これには以下が含まれます：
テンプレートデザインを選択するには、オレンジ色のチェックマークアイコンをクリックします。
これによりポップアップが表示され、ランディングページ名を入力できます。SeedProdはページのスラッグを生成しますが、必要に応じて変更できます。
これらの詳細で問題がなければ、Save and Start Editing the Pageボタンをクリックします。テンプレートがエディターで開いたら、パーティクルエフェクトを有効にする準備ができました。
ステップ3. パーティクル背景の有効化とカスタマイズ
SeedProdにはエディターにparticle.jsが組み込まれており、任意のページセクションで使用できます。セクションをクリックして紫色の境界線が表示されたら、Advancedタブを選択します。
Particle Backgroundの見出しを見つけて展開し、Enable Particle Backgroundトグルをオンにします。セクションの背景にポリゴンアニメーション効果がすぐに表示されます。
Styleドロップダウンをクリックして、組み込みオプションのいずれかにパーティクルを変更します。
- スペース
- スノー
- スノーフレーク
- クリスマス
- ハロウィン
- カスタム
スタイルを選択した後、パーティクルの不透明度、流れの方向、色を設定できます。さらに制御するには、Advanced Settingsトグルを有効にします。
ここで、パーティクルの数、パーティクルのサイズ、移動速度を調整できます。
モバイルでパーティクル背景を高速に保つ
パーティクルの密度は、パフォーマンスに最も影響を与える設定です。レンダリングするパーティクルが多いほど、ブラウザは各フレームでより多くの作業を行います。
スムーズに保つために私が従っているいくつかのガイドライン：
- 密度を制限する：デスクトップのヒーローセクションではパーティクルを約60未満、モバイルでは約30未満に保ちます。
- モバイルでのホバー効果をテストする：ホバーインタラクションは追加のJavaScriptを追加するため、公開する前に電話でどのように機能するかを確認してください。
- モバイルプレビューを使用する：SeedProdの組み込みモバイルプレビューを使用すると、ページが公開される前にレンダリングパフォーマンスを確認できます。
SeedProdには、同じパネルにホバー効果オプションもあります。それを有効にすると、カーソルからパーティクルが散らばり、セクションを移動するとドリフトバックします。
注意点：ホバー効果は、エディタ内ではなく、エディタ外でページをプレビューするときにのみ表示されます。
カスタムパーティクル背景の追加
カスタムパーティクル効果を追加するには、StyleドロップダウンからCustomオプションを選択します。指示には、カスタムJSON構成ファイルを追加する必要があると記載されています。
指示には、vincentgarreau.com/particles.jsへのリンクが含まれています。これは、ポイントアンドクリックでカスタム属性を設定できるツールです。同じJSON構成形式は現在のtsParticlesライブラリでも機能するため、そこで作成した構成はSeedProdで実行されます。
構成パネルでは、カスタム形状、密度、サイズ、速度、色を選択できます。独自のロゴや画像をパーティクル形状自体として使用したい場合は、カスタムJSONアプローチが最適です。形状構成をカスタム画像URLに向けます。
設定に満足したら、Download current configの見出しをクリックして、構成ファイルをコンピューターに保存します。
次にファイルを開き、コードをコピーして、エディタの空のボックスに貼り付けます。
カスタムパーティクル背景がすぐに表示されます。そこから、ランディングページが希望どおりの外観になるまでカスタマイズを続け、Saveをクリックして変更を保存します。
ステップ4.変更を公開する
ランディングページに満足したら、公開する準備ができました。Saveドロップダウン矢印をクリックし、次にPublishをクリックします。
次にランディングページにアクセスして、パーティクル背景が機能していることを確認してください。
完了する前に、SeedProdのモバイルプレビューを使用してスマートフォンでページを開き、小さい画面でエフェクトが正しく表示されることを確認してください。また、ライブページをGoogle PageSpeed Insightsで実行して、パーティクル背景が読み込み時間を遅くしていないか確認する価値があります。
パーティクル背景WPプラグインの使用
WordPressサイトにパーティクル背景を追加する別の方法は、Particle Background WPプラグインを使用することです。
価格: 無料
無料プラン/トライアル: はい
注目の機能: 基本的なパーティクルエフェクト、ショートコードサポート、シンプルな設定
評価: B
最適なユーザー: 無料で軽量なオプションを求めるユーザー
これは無料のWordPress particle.jsプラグインです。カスタマイズオプションは、SeedProdほど簡単または包括的ではありません。
まず、サイトにParticle Background WPをインストールして有効化します。次に、WordPress管理パネルのParticle Backgroundメニュー項目をクリックします。
最初のパネルでは、フロントページとブログページ、またはショートコードでパーティクル背景バナーを表示できます。ここでは、ブログページにバナーを有効にしました。
その下には、エディタでカスタマイズできるコンテンツエリアがあります。ここに、バナーの見出し、説明、および行動喚起を入力できます。
次のパネルには、密度、色、背景色などのパーティクルカスタマイズオプションが含まれています。カスタムCSSを入力することもできます。
変更を保存した後、ブログページにアクセスして、パーティクル背景付きのバナーが表示されていることを確認してください。
ショートコードを使用して、同じバナーを任意のページまたは投稿に追加することもできます。注意点として、SeedProdとは異なり、バナーはコンテンツの上に表示され、後ろには表示されません。
WordPressにParticle.jsを追加するその他の方法
別のページビルダーを使用している場合、いくつかの追加機能で既存のセットアップにパーティクルエフェクトを追加できます。
- Ultimate Addons for Elementor: Elementorページビルダープラグインで作成されたページにパーティクルエフェクトを追加します。
- Ultimate Addons for Beaver Builder: Beaver Builderプラグインで作成されたページにパーティクルアニメーションを追加します。
- 手動: このアプローチは、HTML、PHP、JavaScript、その他のコーディング言語に慣れている場合にのみお勧めします。
WordPressにパーティクル背景を追加する最も簡単な方法は、SeedProdを使用することです。コーディングは一切不要で、数回のクリックで設定できるカスタマイズオプションが提供されます。
WordPressパーティクル背景に関するFAQ
パーティクル背景を追加すると、WordPressサイトが遅くなりますか？
遅くなる可能性があります。particle.jsは、ブラウザが各フレームで処理する追加のJavaScriptを実行するためです。影響は、レンダリングするパーティクルの数によって異なります。
密度を低く保ち、エフェクトを1つの主要セクションに限定し、モバイルでテストしてください。ヒーローセクションの軽いパーティクル背景は、顕著な遅延を引き起こすことはめったにありません。
WordPressページの任意のセクションにパーティクル背景を使用できますか？
SeedProdを使用すれば可能です。パーティクル背景はページの任意のセクションで機能するため、ヒーローブロック、行動喚起バンド、またはフッターにエフェクトを適用でき、ページの他の部分に影響を与えません。
SeedProdはどのようなパーティクルスタイルをサポートしていますか？
SeedProdには、Polygon（デフォルト）、Space、Snow、Snowflakes、Christmas、Halloweenの6つの組み込みスタイルがあります。また、独自のparticle.js JSON設定を読み込んで、形状、密度、動きを完全に制御できるカスタムオプションもあります。
WordPressで無料のパーティクル背景プラグインはありますか？
はい。Particle Background WPは、ショートコードまたはフロントページ設定を使用してパーティクルバナーを追加する無料プラグインです。SeedProdよりも機能が限定されており、バナーはコンテンツの後ろではなく、コンテンツの上に配置されます。
パーティクル背景はモバイルデバイスで機能しますか？
最適化されていれば機能します。モバイルの場合はパーティクルの密度を下げ、約30個のパーティクルを安全なターゲットとして、実際のデバイスで効果をテストしてください。
SeedProdの組み込みモバイルプレビューを使用すると、公開前に背景が小さい画面でどのようにレンダリングされるかを確認できます。
今日からパーティクル背景を追加しましょう
ポートフォリオの作品やヒーローセクションを思いついたら、パーティクル背景はフラットなレイアウトに数回のクリックで深みを与えます。SeedProdを使用すると、コードを一行も書かずに構築、カスタマイズ、公開できます。
新しいパーティクル背景を補完するために、最高のWordPressフォトギャラリープラグインに関するガイドも役立つかもしれません。または、WordPressに雪の効果を追加する方法をご覧ください。
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
