おいもさんち

おいもさんち

あなたの知らない課外授業

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

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

 

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

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

 

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

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

f:id:oimotoimoco:20161224094937j:plain

 

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

f:id:oimotoimoco:20161224094457j:plain

 

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

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に貼り付けてください。

 

デザイン↓

f:id:oimotoimoco:20161224100612j:plain

 

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

f:id:oimotoimoco:20161224100626j:plain

 

参考にしたサイト

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

bradsknutson.com

 

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

design.syofuso.com

 

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

naifix.com

 

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

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