コピペで簡単！ブログの背景に雪を降らす方法

こんにちは、クリスマスはいかがお過ごしでしょうか？

ぼくは24日、25日はすっぽり予定が空いてしまったのでPCたたいています。暇なのです。

せっかくなのでブログだけでもクリスマス仕様にアレンジしたいと思います。

ブログに雪を降らせてみた

こちらは静止画ですが、ブログ画面ではひたすら雪が降ってきます。

背景の色も少しずつ変わっていくようになっています。

コピペで簡単！雪を降らそう♪

CSSのとこに以下のコードを貼りつけたら完成です。

/* 雪降らし */
@-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;

}
}
@-moz-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;
}
}
@-ms-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;
}
}

body {
background-color: #f0f8ff;
background-image: url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png');
animation: snow 20s linear infinite;
}

はてなブログの方は、デザイン→カスタマイズ→デザインCSSに貼り付けてください。

デザイン↓

カスタマイズのデザインCSS↓

参考にしたサイト

こちらのBrad S. Knutsonさんの記事で公開されているコードで雪を降らすことができますが、なんといっても英語で書かれているので解読できるか心配です。

bradsknutson.com

なのでBrad S. Knutsonのコードを利用して雪を降らしたぜ！と語っているMinimal Greenさんのサイトを参考にしました。こちらは日本語で書かれていましたよ。

design.syofuso.com

こちらでは雪を降らすパターンがたくさん紹介されてますよ！

naifix.com

期間限定でブログを装飾してみてはいかがですか？

それでは、良いクリスマスを！