xhml・html

月ごとに自動で変化するWeb画面

2008年04月01日
今日から本当に派遣先から無罪放免です。さて、新しい世界に踏み出しましょう。ちょうど4月だし。

手始めに(?)、サイトの画像と配色を月ごとに自動で変更するソースを作ってみました。
できることから コツコツと


月ごとの画像を用意します。
top01.jpg
top02.jpg
 ・
 ・
 ・


月ごとに配色と配置も変わるので、それぞれのスタイルシートを用意します。共通の部分はstyle.cssに残し、月ごとに変わる部分をそれぞれのスタイルシートに移します。
style01.css
style02.css
 ・
 ・
 ・


このスタイルシートに、配色と配置、表示する画像を設定します。


アクセスがあったとき表示するファイル(例えばindex.phpなど)では、月を読み取り適用するスタイルシートを決めます。
1月ならstyle.cssとstyle01.css、2月ならstyle.cssとstyle02.css ・・・ です。


スタイルシートは複数設定できます。htmlのヘッダに、
<link href="style/style.css" type="text/css" rel="stylesheet" />
<link href="style/style01.css" type="text/css" rel="stylesheet" />
とします。

あるいは、
style-all.css ファイルには、
@import url(style/style.css);
@import url(style/style01.css);
のように、設定するスタイルシートを列挙し、
本体のhtmlのヘッダには、style-all.cssを設定します。
<link href="style-all.css" type="text/css" rel="stylesheet" />


これで月ごとに別々の画像とスタイルを表示できます。