時間帯で背景画像変更
訪問者のPCに設定されている時間帯によって、背景画像が変化するようにしてみた。
時間帯は
5:00~ 8:00
8:00~12:00
12:00~15:00
15:00~18:00
18:00~21:00
21:00~ 5:00
の6種類。
それぞれの背景用にスタイルシートを6つ作り、background-imageと背景色を指定。
さらに各テンプレートに以下を記述。
<SCRIPT LANGUAGE="JavaScript"><!-- Begin
function getCSS()
{
datetoday = new Date();
timenow=datetoday.getTime();
datetoday.setTime(timenow);
thehour = datetoday.getHours();if (thehour > 20)
display = "styles-site*.css";
else if (thehour > 17)
display = "styles-site*.css";
else if (thehour > 14)
display = "styles-site*.css";
else if (thehour > 11)
display = "styles-site*.css";
else if (thehour > 7)
display = "styles-site*.css";
else if (thehour > 4)
display = "styles-site*.css";
else if (thehour > 1)
display = "styles-site*.css";
else
display = "styles-site*.css";var css = '<'; css+='link rel="stylesheet" href=' + display + ' ¥/'; css+='>';
document.write(css);
// End -->
}</script>
<script language="javascript">getCSS();</script>
<noscript>
<link rel="stylesheet" href="styles-site.css" type="text/css">
</noscript>赤字は背景画像を変更した任意のスタイルシート名(それぞれ別の名前)
まだ15時以降の画像が表示されたことがないので正常に動くか不安だし、スタイルシートを1つで表示できないか模索中だけど、とりあえず様子見…
追記
ただでさえ重いこのブログが更に重くなってしまったので、現在はプロフィールページのみCSSを適用中です。