WordPressにアニメーション背景を追加するのは難しいと思っていませんか？ もう一度考えてみてください。
私たちも以前はそう思っていましたが、いくつかの実験の後、実際にはそれほど悪くないことがわかりました。
訪問者がサイトにアクセスした瞬間から、いかに感動させることが重要か、私たちは理解しています。アニメーション背景は、コンテンツを圧倒することなく、記憶に残る第一印象を作り出すための優れたWordPressデザイン要素です。
しかし、読み込み速度の遅さ、複雑なコーディング、高価なプラグインを心配しているなら、心配はいりません。particle.js を使用した簡単な解決策を見つけました。これは、サイトのパフォーマンスを損なうことなく、見事なアニメーション背景を作成する軽量 JavaScript ライブラリです。
このガイドでは、プラグインを使用する場合でも、少しコードを使用する場合でも、WordPressサイトに美しいパーティクルアニメーションを追加する方法を正確に説明します。あなたのウェブサイトを目立たせましょう！
WordPress にアニメーション背景を追加する理由
ウェブサイトの背景のカスタマイズは、最初は重要ではないように思えるかもしれません。しかし、WordPressとウェブデザインの世界で長年活動してきた経験から、アニメーション背景を丁寧にデザインしたサイトは、訪問者のエンゲージメントをより長く維持する傾向があることに気づきました。
アニメーション背景は、ウェブサイトの視覚的な魅力を高め、訪問者にとってよりインタラクティブで目を引くものにします。これにより、WordPress サイトが高品質で革新的なデザインを使用しているという印象を与えます。
多くのウェブサイトでは、特別な機会を祝いたいときに アニメーションエフェクト も使用しています。
例えば、eコマースストアでは、ホリデーシーズンのために祝祭的な雰囲気を作り出すために、ウェブページにアニメーションの雪の結晶や落ちるクリスマスツリーを追加することがあります。
一部のウェブサイトでは、プリローダーの背景アニメーションも使用しています。
これにより、訪問者はサイトが読み込まれていることを感じることができ、ウェブページ要素が表示されるのを辛抱強く待つ可能性が高まります。詳細については、プリローダー背景アニメーションを追加する方法に関する記事をご覧ください。
このガイドでは、particle.js を使用してアニメーション背景を追加する方法を説明します。それが何であるかを知りたい場合は、次のセクションに進んでください。
particle.js とは？
particle.js は、パーティクル（小さく、グラフィカルで、アニメーション化された要素）で素晴らしい視覚効果を作成できる JavaScript ライブラリです。
これらのパーティクルは、サイズ、色、形状、動きによってカスタマイズできます。また、マウスの動きやクリックなどのユーザーインタラクションに応答し、ウェブサイトにエンゲージメントの追加レイヤーを追加します。
particle.jsがどのようなものかお分かりになったところで、WordPressにアニメーション背景を追加するためにどのように使用できるかを見てみましょう。初心者向けの2つの方法があります。以下のクイックリンクからこのガイドをナビゲートできます。
方法1：ページビルダーでアニメーション背景を追加する方法（コード不要）
最初の方法は、市場で最高の WordPress ページビルダープラグインである SeedProd を使用することです。組み込みで高度にカスタマイズ可能なパーティクル背景機能を提供しています。
これにより、すでに利用可能なパーティクルアニメーションのいずれかを選択したり、カスタムアニメーションを追加したりできます。また、好みに合わせてパーティクルの数、アニメーションの動き、ホバーエフェクトを変更することも可能です。
SeedProd に関する詳細については、当社の詳細な SeedProd レビューをご覧ください。カスタマイズオプション、テンプレートとブロックの選択肢、サードパーティの統合など、すべてを網羅しています。
このガイドでは、パーティクル背景機能が利用可能な SeedProd のプレミアムバージョンを使用します。
SeedProd を使用するには、まずプラグインをインストールして有効化する必要があります。詳細については、WordPress プラグインのインストールに関する初心者向けガイドをご覧ください。
その後、ライセンスキーをプラグインにコピー＆ペーストするだけです。WordPress ダッシュボードに移動し、SeedProd » 設定に移動して、適切なフィールドにライセンスキーを挿入します。次に、「キーを確認」をクリックします。
WordPress にパーティクル背景を追加する前にテーマをカスタマイズしたい場合は、SeedProd でカスタムテーマを簡単に作成する方法に関するガイドに従ってください。
次に、パーティクル背景を挿入したいページのドラッグ＆ドロップビルダーを開く必要があります。SeedProd でテーマを作成した場合は、WordPress にいくつかのページが既に追加されているはずです。
次に、ページ » 全ページ に移動し、ホームページ、会社概要ページ、またはその他のページにカーソルを合わせます。次に、「SeedProd で編集」ボタンを選択します。
このオプションが表示されない場合は、心配しないでください。
「編集」ボタンをクリックし、ブロックエディターで「SeedProdで編集」ボタンをクリックしてください。
これで、SeedProd の ページビルダー 内に入ったはずです。
WordPressでパーティクル背景を追加したいページセクションにカーソルを合わせ、それを選択します。紫色の境界線とツールバーが表示されたら、セクションを選択したことになります。
セクションをクリックすると、左側のセクションサイドバーが表示されます。
あとは「詳細設定」タブに切り替えて、「パーティクル背景を有効にする」設定をオンにするだけです。
設定できるパーティクル背景設定はいくつかあります。
1つはスタイルで、Polygon、Space、Snow、Snowflakes、Christmas、Halloween、Custom の利用可能なアニメーション効果のいずれかを選択できます。
パーティクル背景アニメーションの追加については、記事の後半で詳しく説明します。
また、アニメーションの不透明度を制御する Opacity と、パーティクルが進む方向を設定する Flow Direction もあります。
一部のパーティクルスタイルでは、色をカスタマイズすることもできます。
ただし、クリスマスとハロウィーンでは、パーティクルが画像であるため、色設定はありません。
「カラー」の下に「高度な設定」があります。これを有効にすると、「パーティクルの数」、「パーティクルのサイズ」、「移動速度」、「ホバー効果の有効化」をカスタマイズできます。
最後の機能では、マウスの方向に合わせてパーティクルが移動します。ただし、ページビルダーエリアでWordPressウェブサイトを表示している場合や、セクション内のコンテンツがセクション全体を占めている場合は、この機能は機能しません。
これで完了です。
WordPressのパーティクル背景のカスタマイズが完了したら、右上にある「保存」ボタンをクリックして変更を公開できます。「プレビュー」ボタンを選択して、パーティクル背景がどのように見えるかを確認することもできます。
ウェブサイト用のカスタムパーティクル背景を作成する
利用可能なアニメーション効果がニーズに合わない場合は、カスタムで作成することもできます。パーティクル背景の設定で「カスタム」スタイルを選択します。
その後、「パーティクルの必要な属性を選択してください。こちら こちら をクリックしてリンクにアクセスしてください。」という行のリンクをクリックします。
このリンクは、パーティクルアニメーション用のJavaScriptライブラリを備えたVincent Garreauのウェブサイトに移動します。
このウェブサイトでは、希望するパーティクルのデザイン、インタラクティビティ、背景色をカスタマイズできます。
「パーティクル」設定内で、パーティクルの数、色、形状、サイズ、不透明度、パーティクルを繋ぐ線、および動きを調整できます。
その下には「インタラクティビティ」があります。
ここで、パーティクルにカーソルを合わせたときやクリックしたときの動作を調整できます。
最後に、「ページ背景（CSS）」があります。ここで、パーティクルアニメーションの背景色を変更し、サイズ、位置、繰り返しを調整できます。
必要に応じて、カスタム背景画像のURLをアップロードすることもできます。
完了したら、下部にある「現在の設定をダウンロード（json）」ボタンをクリックできます。
これにより、パーティクル背景の JSON コードファイルがダウンロードされます。このファイルはテキストエディタアプリを使用して開く必要があります。次のステップに進む間、テキストエディタウィンドウを開いたままにしておいてください。
さて、SeedProdページビルダーに戻りましょう。
再度、高度な設定内のパーティクル背景メニューに移動します。次に、JSONコードを適切なテキストボックスにコピーして貼り付けます。
プレビューセクションにパーティクル背景が表示されるはずです。
「プレビュー」をクリックして、フロントエンドでパーティクル背景がどのように見えるかを確認し、「保存」をクリックして変更を確定します。
パーティクル背景がどのように見えるかの例を以下に示します。
方法2：コードでアニメーション背景を追加する方法（無料）
ページビルダーを使用してアニメーション背景を挿入するのが大変だと感じる場合は、コードを使用して追加することもできます。コーディングの専門家でなくても心配いりません。このプロセスを安全かつ簡単にするために、WPCodeを使用します。
このチュートリアルでは、WPCodeの無料版または有料版のいずれかを使用できます。無料版でも問題なく動作しますが、有料版にはAIコード生成やテストモードなどの便利な機能が含まれています。
詳細については、WPCode のレビューをお読みください。
まず、WordPress 管理画面にプラグインをインストールしてください。
有効化後、ダッシュボードの Code Snippets » + Add Snippet に移動し、「Add Your Custom Code (New Snippet)」をクリックしてから「+ Add Custom Snippet」ボタンをクリックします。
次に、スニペットの種類を選択する必要があります。
HTML、JavaScript、CSS を組み合わせて作業するため、オプションから「HTML スニペット」を選択できます。
次に、スニペットに覚えやすい名前を付けます。
「Particle.js Background」のような簡単なものでも構いません。
さて、以下のコードを貼り付けてください。
このコードは、最初の方法で紹介された Vincent Garreau のウェブサイト から実際に適応されたものですが、コードだけでさらにカスタマイズする方法をご紹介します。
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Particles.js Background</title>
<!-- Include the particles.js library -->
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- Include your custom styles -->
<style>
/* Reset styles */
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
display: block;
vertical-align: bottom;
}
/* Particles.js container */
#particles-js {
position: fixed;
top: 0;
width: 100%;
height: 100%;
/* Background color; change this to any valid CSS color value */
background-color: #b61924; /* <-- Customize background color here */
/* Optional background image; add the URL inside the quotes */
background-image: url(""); /* <-- Add background image URL here */
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
z-index: -1; /* Ensure the particles are behind other content */
}
/* Optional stats styles */
.count-particles {
background: #000022;
position: absolute;
top: 48px;
left: 0;
width: 80px;
color: #13E8E9;
font-size: 0.8em;
text-align: left;
text-indent: 4px;
line-height: 14px;
padding-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
border-radius: 0 0 3px 3px;
-webkit-user-select: none;
margin-top: 5px;
margin-left: 5px;
}
.js-count-particles {
font-size: 1.1em;
}
</style>
</head>
<body>
<!-- Particles.js container -->
<div id="particles-js"></div>
<!-- Optional Stats Display -->
<div class="count-particles">
<span class="js-count-particles">--</span> particles
</div>
<!-- Initialize particles.js -->
<script>
/* Customize the particles.js parameters below */
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80, /* <-- Number of particles; adjust this value */
"density": {
"enable": true,
"value_area": 800 /* <-- Particle density area */
}
},
"color": {
"value": "#ffffff" /* <-- Particle color; change to any valid CSS color */
},
"shape": {
"type": "circle", /* <-- Particle shape: "circle", "edge", "triangle", etc. */
"stroke": {
"width": 0,
"color": "#000000" /* <-- Stroke color of particles */
},
"polygon": {
"nb_sides": 5 /* <-- Number of sides for polygon shape */
},
"image": {
"src": "img/github.svg", /* <-- URL of custom image for particles */
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5, /* <-- Opacity of particles */
"random": false, /* <-- Whether opacity is random */
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3, /* <-- Size of particles; adjust to change particle size */
"random": true, /* <-- Whether particle size is random */
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true, /* <-- Enable lines between particles */
"distance": 150, /* <-- Maximum distance for linking particles */
"color": "#ffffff", /* <-- Color of the lines */
"opacity": 0.4, /* <-- Opacity of the lines */
"width": 1 /* <-- Width of the lines */
},
"move": {
"enable": true, /* <-- Enable particle movement */
"speed": 6, /* <-- Speed of particle movement */
"direction": "none", /* <-- Direction of movement */
"random": false, /* <-- Randomize movement direction */
"straight": false, /* <-- Move in straight lines */
"out_mode": "out", /* <-- Action when particles go out of canvas */
"bounce": false, /* <-- Enable particles to bounce off edges */
"attract": {
"enable": false, /* <-- Attract particles toward mouse */
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas", /* <-- Interaction events occur on "canvas" or "window" */
"events": {
"onhover": {
"enable": true, /* <-- Enable interaction on hover */
"mode": "repulse" /* <-- Interaction mode on hover: "grab", "bubble", "repulse" */
},
"onclick": {
"enable": true, /* <-- Enable interaction on click */
"mode": "push" /* <-- Interaction mode on click: "push", "remove", "bubble", "repulse" */
},
"resize": true /* <-- Enable reactivity to window resize */
},
"modes": {
"grab": {
"distance": 400, /* <-- Distance for grab mode */
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400, /* <-- Distance for bubble mode */
"size": 40, /* <-- Size of particles in bubble mode */
"duration": 2, /* <-- Duration of bubble effect */
"opacity": 8, /* <-- Opacity of particles in bubble mode */
"speed": 3 /* <-- Speed of bubble effect */
},
"repulse": {
"distance": 200, /* <-- Distance for repulse mode */
"duration": 0.4 /* <-- Duration of repulse effect */
},
"push": {
"particles_nb": 4 /* <-- Number of particles added on click */
},
"remove": {
"particles_nb": 2 /* <-- Number of particles removed on click */
}
}
},
"retina_detect": true /* <-- Enable retina display support */
});
/* Optional: Variables for stats.js (if used) */
var count_particles, stats, update;
</script>
</body>
</html>
このコードはかなり長いため、カスタマイズできる部分を見てみましょう。
背景色を変更するには、#particles-js の下の background-color プロパティを変更します。#b61924 を、#FF0000（赤の場合）や rgb(255,0,0) のような有効な CSS カラー値、あるいは red のような色名に置き換えてください。
background-color: #b61924; /* <-- Customize background color here */
背景画像を追加するには、background-imageプロパティを、url("")の中に画像のURLを追加して設定します。
背景画像のパスまたは URL が正しいことを確認してください。
background-image: url("path/to/your/image.jpg"); /* <-- Add background image URL here */
パーティクルの数を変更するには、"number"の下にある"value"を調整してください。
値を増やすとパーティクルの数が増え、減らすと数が減ります。
"number": {
"value": 80, /* <-- Number of particles; adjust this value */
// ...
}
パーティクルのサイズを変更するには、"size" の下の "value" を変更できます。
数が多いほどパーティクルのサイズが大きくなり、その逆も同様です。
"size": {
"value": 3, /* <-- Size of particles; adjust to change particle size */
"random": true, /* <-- Set to false for uniform size */
// ...
}
パーティクルの色を変更するには、"color" の "value" を有効なCSSカラー値に置き換えてください。
"color": {
"value": "#ffffff" /* <-- Particle color; change to any valid CSS color */
},
パーティクルの形状を変更するには、"shape"の下の"type"を変更できます。
"circle"、"edge"、"triangle"、"polygon"、"star"などの形状を使用できます。
"shape": {
"type": "circle", /* <-- Particle shape: "circle", "edge", "triangle", etc. */
// ...
},
パーティクル間の線のプロパティを変更するには、"line_linked"の下のプロパティを調整できます。
例えば、"enable": true を "enable": false に変更すると、パーティクルを接続する線は表示されなくなります。
"line_linked": {
"enable": true, /* <-- Enable lines between particles */
// ...
},
線の色、不透明度、太さも変更できます。
"line_linked": {
"color": "#ffffff", /* <-- Line color */
"opacity": 0.4, /* <-- Line opacity */
"width": 1, /* <-- Line width */
// ...
},
後で変更が必要になった場合でも心配いりません。有効化後でもコードをいつでも変更できます。
コードをお好みに合わせてカスタマイズしたら、アニメーション背景を表示する場所とタイミングを設定します。
WPCodeスニペットの挿入セクションまでスクロールします。挿入方法として「自動挿入」を選択し、場所として「サイト全体フッター」を選択してください。
WPCodeは、無料版と有料版の両方で利用できる強力な機能である条件付きロジックも提供しています。この機能を使用すると、アニメーション背景がウェブサイトのどこに表示されるかを正確に制御できます。
この機能を使用するには、「スマート条件付きロジック」セクションを見つけ、「ロジックを有効にする」をオンに切り替えます。背景を表示するための特定の条件を設定するオプションが表示されます。
例えば、アニメーション背景をホームページにのみ表示したい場合は、条件ドロップダウンから「ページURL」を選択し、「次と等しい」を選択して、ホームページのURLを入力します。
「+ 新しいグループを追加」ボタンをクリックして、複数の条件グループを追加できます。
最後のステップは、スニペットをアクティブ化することです。ページ上部にある「非アクティブ」トグルを探し、クリックして「アクティブ」に変更します。変更を保存するために「スニペットを保存」をクリックすることを忘れないでください。
これで完了です！モバイルまたはデスクトップでウェブサイトにアクセスして、新しいアニメーション背景が機能していることを確認してください。テストサイトでは次のようになります。
アニメーション背景はウェブサイトの速度を低下させますか？
アニメーション背景は、正しく実装しないとウェブサイトの速度を低下させる可能性があります。しかし、これを回避する方法はあります。
パーティクル背景の場合、パーティクルの数や移動速度はページの読み込み速度に影響を与える可能性があります。パーティクルの数が多いほど、また移動速度が速いほど、より多くの処理能力が必要となり、動作が遅くなることがあります。
これを修正するには、パーティクルの密度と速度の設定を変更して、ウェブサイトに最適なものを見つけてください。このプロセス中に、WordPress の速度テストを実行して、その効果を確認できます。
アニメーション背景は、最も重要なページにのみ使用することをお勧めします。どこにでも必要というわけではなく、飽きてしまう可能性があります。
最後に、パーティクル背景を使用してウェブサイトを高速に保つために、ウェブサイトの速度に関するベストプラクティスに従ってください。WordPressを高速化するための究極のガイドで詳細を学ぶことができます。
この記事で、WordPressにアニメーションパーティクル背景を追加する方法を学べたことを願っています。また、WordPressでウェブサイトのデザインフィードバックを取得する方法に関するガイドや、専門家が選んだ最高のWordPressテーマビルダーもチェックしてみてください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
カルロス・ランゲル
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サポート
可能ではありますが、コーディングの知識が必要となり、初心者向けのタスクではないため、現在ではお勧めしていません。
管理者