「Particleground」を使って、WordPress背景に3Dパーティクルを表示させる方法

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

以前に、NibblerというSEOチェックツールを紹介しました。

これが無料!?SEO・マーケティング分析ツールの「Nibbler」がスゴい
先日、Nibbler(ニブラー)という、SEOとWEBマーケティング分析サービスを見つけました。 これを使ってみたら、無料ながら、かな...

このNibblerの背景では、以下のような3Dパーティクルが利用されています。

Nibblerのトップページ

以前から、「Nibblerで使われている3Dを用いた背景は、どうやっているんだろう?」とちょっと気になっていました。

で先日、Nibblerほど凝ったものではないけど、3Dパーティクルを背景に表示させることができるParticlegroundというスクリプトを知りました。それで、このParticlegroundをWordpressで使えないか試してみたら、何とかできたので、その方法の紹介です。

スポンサーリンク
レクタングル(大)広告

Particlegroundとは

Particlegroundデモ

Particlegroundとは、背景に動的に動く3Dパーティクルを表示させるためのJavaScriptプラグインです。

HTML5キャンバスをサポートするブラウザなら、どんなブラウザでも動作します。

基本的にJavaScriptだけで動作します。jQueryライブラリを呼び出して、実行コードをjQueryで書けばjQueryでも動作します。

詳しい仕様は以下です。

jnicol/particleground · GitHub

主な手順

WordPressテーマから利用する主な手順は以下です。

  1. Particlegroundをダウンロード&設置
  2. Particlegroundライブラリの呼び出し&実行コードを書く
  3. Particlegroundが作成するcanvas用にスタイルを書く

WordPressから利用するには、Particlegroundデモの方法とは、ちょっと違います。けれど、コードの仕組みとか関係なく、編集動作だけで見れば、コードコピペ2回でできるのでそれほど難しくはないと思います。

ダウンロード&設置

まずは、Particlegroundからスクリプトをダウンロードします。

Particlegroundのダウンロード

「particleground-master.zip」というファイルがダウンロードされるので解凍します。

中にあるファイルで利用するのは以下のJavaScriptファイルだけです。

  1. jquery.particleground.min.js

このJavaScriptファイルを、Wordpressテーマ内に、以下のように設置します。

  1. テーマディレクトリのパス/js/jquery.particleground.min.js

ライブラリの呼び出し&実行コードを書く

次に、header.phpの<head></head>内か、footer.phpの</body>手前に以下のコードを書きます。

WordPressテーマが、jQueryを利用していない場合は、jQueryライブラリ部分をコメントアウトしてください。

「JavaScriptでの記述」と書かれた部分にのようなコードを書くことで、jQueryを使わずに実装することもできます。

「#container」の要素指定部分は、使用しているテーマの環境に合わせて変更してください。

また、色指定も好みに合わせて変更してください。

canvas用にスタイルを書く

上記までの設定で、当サイトで使用しているテーマの大外枠である「#container」に、Particlegroundが作成するCanvasが挿入されます。

ただ、そのままでは、本文の上に挿入されるだけになるので、Canvas部分を背景に設定するCSSをstyle.cssあたりに記入します。

この背景スタイル指定は、背景を動画にしたときの指定とほぼ同じです。

Wordpressテーマの背景を動画にするカスタマイズ方法
Wordpressテーマの背景に動画を利用する方法の紹介です。 編集する前は、「結構大変なんだろうな」と思っていたのですが、動画用のタ...

これで設定は終わりです。

動作確認

動作確認すると、以下のように表示されます。

Particlegroundの動作確認

実際に、このページにも実装していたのですが、処理が重たいので取り外しました。

ローカルテスト環境のWordpressでは、処理も重くならずに動作していました。

local

全く同じテーマでテストしているので、大きな違いと言ったら、インストールしているプラグインの違いとサーバーの違いくらいしかありません。

インストールしているプラグインによっては、干渉するようなものもあるのかもしれません

まとめ

パーティクルの背景は、正直Wordpressと相性がいいとは思いません。

ただ、通常サイトやWEBサービスで、「目を引く背景を」とか「背景で技術感を出したい」とかにはいいかもしれません。

『「Particleground」を使って、WordPress背景に3Dパーティクルを表示させる方法』へのコメント

  1. 名前:長島 投稿日:2015/06/21(日) 16:14:07 ID:095bd5f1a

    ものすごく参考になりました!
    ありがとうございます。

    質問なのですが、Particlegroundをヘッダーのみにする事は可能でしょうか?

  2. わいひら 名前:わいひら 投稿日:2015/06/21(日) 18:19:31 ID:74d37d162

    可能だと思います。
    というか、そっちの方が簡単かもしれません。
    実行コードをヘッダー部分に持ってきて、スタイルをposition: fixed;とかにしないで、あとはサイズを整えればいけるかと思います。

  3. 名前:長島 投稿日:2015/06/22(月) 10:49:55 ID:7cd4a089e

    お返事ありがとうございます。

    position: fixed; を position: absolute;に変更して、ヘッダー部分に実行コードをもっていったら、できました。

    ありがとうございました。