【デモページあり】ブログに雪を降らせる WordPress プラグイン 3 選

2024/09/11

クリスマスシーズンにブログに雪を降らせてみませんか？

本記事では以下の WordPress プラグインをご紹介しています。

WP Snow
Weather Effect
Christmasify!

番外編として、CSS のみで雪を演出するサンプルコードも載せています（本ページ上部で使っているコードです）。

雪を降らせる WordPress プラグイン

以下の環境で実際に検証しました。

WordPress 6.4.2
テーマ：Twenty Seventeen

各プラグインの動作デモページつきでご紹介します。

WP Snow

WP Snow – Best Snow Effect Plugin

「WP Snow」は、有効化しただけでサイト全体に雪を降らせてくれるシンプルなプラグイン。

［設定］>［WP Snow］で雪の大きさや色、適用したいページの指定ができます。

Font Awesome アイコンを使える機能もあるので、「雪以外」を降らせることも可能です（ページごとの変更はできず、一括指定となっています）。

WP Snow デモページ

Weather Effect

Weather Effect – Christmas, Santa, Snow Falling, Snowflake Effect

「Weather Effect」は、シーズンごとにエフェクトアイテムを変更できます。

12 月はクリスマス、2 月はバレンタイン… と、イベントを演出したいブログに向いていますね。

エフェクトは全ページに反映されてしまうので、ページごとに表示を切り替えたい場合は「Plugin Load Filter」との併用をおすすめします。

Weather Effect デモページ

Christmasify!

「Christmasify!」は、クリスマスに特化したプラグイン。

雪の演出ほか、サンタさんを横切らせたり曲を流すこともできます。期間指定できるので、クリスマスが終わったら自動的に終了させておくとよいですね。

このプラグインも演出が全ページに適用されてしまうので、ページを指定したい場合は「Plugin Load Filter」を併用してください。

Christmasify! デモページ（音が流れます！）

CSS で雪を降らせる方法

ページ全体ではなく一部の要素にのみ雪を降らせたいなら、CSS で調整するのがおすすめです。

雪の画像を 3 枚用意し、奥の雪は速く動かし、手前の雪は遅くすることで立体感を演出できます。

サンプルコードはこちら。

.snow_box {
	background-color: #000;
   	background-image: url(images/snow1.png), url(images/snow2.png), url(images/snow3.png);
	-webkit-animation: snow 20s linear infinite;
	animation: snow 20s linear infinite;
	width: auto;
	height: 300px;
	margin-bottom: 36px;
}

@-webkit-keyframes snow {
	0% { background-position: 0px 0px, 0px 0px, 0px 0px }
	50% { background-color: #b4cfe0 }
	100% {
		background-position: 500px 1000px, 400px 400px, 300px 300px;
		background-color: #6b92b9;
	}
}
@keyframes snow {
	0% { background-position: 0px 0px, 0px 0px, 0px 0px }
	50% { background-color: #b4cfe0 }
	100% {
		background-position: 500px 1000px, 400px 400px, 300px 300px;
		background-color: #6b92b9;
	}
}

実際に適用すると、このように演出してくれます。