京都・滋賀を拠点にWEB制作とWEBデザインに関する情報発信を手掛ける STAND4U

STAND BLOG

HOME > Javascriptで季節に応じて自動的にデザインを変える方法

Javascriptで季節に応じて自動的にデザインを変える方法

2016年3月9日

season

季節(四季)に応じて自動的に背景画像を変えたり、イラストを変えたりしたいという要望を受けたことありませんか?そんな時にコピペで使えるjavascriptをご紹介します。

季節の日付を考え、設定する。

まずは何日〜何日が春か夏か秋か冬かを考えます。今回の例では、以下のように設定します。

春:3月1日〜5月31日

夏:6月1日〜8月31日

秋:9月1日〜10月30日

冬:11月1日〜2月28日

もちろんこれは任意なので、好きな日にちを指定してください。

日付の設定の書き方 javascript

日付が決まったら、以下の例に添って日付を書き換えてください。

※ここで注意点ですが、冬だけは年をまたぐ部分の処理があるので、12月31日までと1月1日からは、例にならって分けて記述します。

季節ごとの処理

あとは、条件分岐を使ってbodyにクラスをつけたりして自由にデザインを変えてください。

簡単ですね、これで1年を通して季節毎に変わるサイトが簡単に作成できます。

もちろん応用すれば、毎月変わるデザインなんかも出来ますよね。

 

 


ABOUT

京都・滋賀・大阪を拠点にWEB制作とWEBに関する情報を中心に、その他ライフハックや思う事などを発信しています。
制作会社に所属しており、夜な夜な少しずづ書いております。その他、WEBデザイン、HTMLコーディング、jquery、wordpress、イラスト作成、写真撮影など。通勤時間を最大限に活かすのが目下の課題。

Twitter @stand_4u_

新着記事

カテゴリー