CSSでページに雪を降らせる【WordPressテーマSimplicity用スキンを作ってみた】

WPテーマ「Simplicity」はカスタマイズしやすい

現在このサイトでも使用中のWordpressテーマ「Simplicity」。
初心者からテーマをカスタマイズしたい上級者までとても使いやすいテーマなので私もお気に入りです。

WordPressのテーマをがっつりカスタマイズしようと思ったらPHPやCSSなどの知識が必要なんですが「Simplicity」には難しいことを考えなくても外観を簡単に変更できる「スキン」という便利機能があるんです！

Simplicityの便利機能【スキン】

「スキン」はスタイルシートのみで全体的な外観を変更する機能なので、デフォルトのテーマに変化をつけたい方にはおすすめです。

ちょっとだけ変えたいなーって人は「パーツスキン」がいいかも。
これは、「見出しの部分だけ」「ナビゲーションの部分だけ」というように部分的に着せ替えできる機能です。

「雪を降らせるパーツスキン」作ってみた

私は以前Simplicityのスキンを作ったことがあります。

WordPressテーマ「Simplicity」用のかわいいスキンを作ってみました

今回は「パーツスキン」を作ってみました！
今の季節にピッタリ！ページの背景に雪を降らせますよ！

※PC用なのでスマートフォンでは雪は降りません。
※IE9以下など一部動作しないブラウザもあります。

デモ

デモはこちら http://jsdo.it/aoix/WwVY

【参考サイト】 CSS Snow Effect｜Brad S. Knutson
http://bradsknutson.com/blog/css-snow-effect/

ダウンロード

Simplicity用パーツスキン「Snowfall」

パーツスキンの使い方

1. ダウンロードして解凍してできたフォルダの中の「_snowfall」フォルダごとテーマ内の「skins」フォルダに入れてください。
   ※テーマは子テーマ推奨。
2. 「外観→カスタマイズ→スキン」で[P] 雪(背景アニメーション)を選択。
   
3. 背景が白色の場合は雪が見えないので、背景色を設定してください。
4. もし、他のパーツスキンを使ってる場合は「_snowfall」フォルダの中身を使用中のパーツスキンフォルダに入れると他のパーツと一緒に使えます。

「スキン」については公式サイトで使い方などを参考にしてください。

Simplicitパーツデザインの着せ替えができる「パーツスキン」機能の使い方と仕様

Simplicity1.7.9でパーツスキン機能を実装しました。 以前にもスキン機能というのはありました。 パーツスキン機能も、スキン機能と大元は同じです。 ただ、パーツスキン機能は、いろいろなパーツのCSSファイルを組み合わせて、洋服

wp-simplicity.com

まとめ

寒い時期になるとページに雪が降っているサイトをチラホラと見かけますよね。
そんな季節限定のカスタマイズは「パーツスキン」の使い方としてもありかなーと思います。

Simplicityのスキン機能はCSSで外観を変更する仕様なのでjavascriptとか使えない分できることの制限はありますが、気軽に試せるのが良いところだと思います。

せっかくスキンという便利機能があるのに何かいい使い方ないかなーと思いついたのが今回の「雪を降らせるパーツスキン」。

これがパーツと言えるかどうかは疑問なのですが・・・。
「Simplicity」ユーザーさん、よければ使ってみてくださいね。

※通常のスキンより多少負荷がかかるようなので、場合によってはオフにしてください。

今回は雪の画像を使ってますが、春には桜の花びらにしてもいいかも！