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

snowfall

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」フォルダの中身を使用中のパーツスキンフォルダに入れると他のパーツと一緒に使えます。
※基本的に「スキン」「パーツスキン」は1つしか選択できません。
※もし現在使用中のスキンがある場合は上記の方法だと設定が変わってしまうのでご注意ください。(子テーマ使用でスキンを選択していない場合は問題ないと思います)

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

http://wp-simplicity.com/skin-parts/

まとめ

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

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

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

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

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

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