夜の間だけハロウィン仕様に変化させる

10月31日はハロウィンですね。 ハロウィンは夜のお祭りですし、夜の間だけウェブサイトをハロウィン仕様のデザインに自動的に変化させる仕組みを作ってみるのはいかがでしょうか。

以下の枠内には、ハロウィンの説明文が書かれています。 この記事を、夜8時～深夜4時の間に見ると、（以下の枠内だけ）ハロウィン仕様のデザインで表示されます。 それ以外の時間帯だと普通のデザインで表示されます。

時刻に関係なく強制的にデザインを変更させてみたい場合は以下のボタンをクリックして下さい。

※ページ全体を使ったもっと大きなサンプルはこちら。（別ウインドウで開きます）

上記は、JavaScriptを使って、適用するスタイルシートファイルを切り替えることで実現しています。
外部に2つのスタイルシートファイルを用意し、 通常は normal.css を適用しておき、 指定時間内だけ（ハロウィン仕様のデザインを記述した） halloween.css が適用されるようにしています。

指定した時刻だけスタイルを切り替える方法

指定した時刻の間だけページに適用するスタイルシートを切り替えるには、過去にご紹介した以下の記事2つの内容を合わせて使います。

●「時刻によって挨拶文を変化させる」
●「スタイルシートを切り替えられる機能を作る」

スタイルシート自体を切り替えるので、あらゆる装飾を一気に変化させられます。

ハロウィン画像を重ねて表示する方法

ページをハロウィン仕様にする装飾はいろいろ自由に考えて頂ければ良いのですが、ここではサンプルとして、
(1) ページの右上にハロウィンのイラストが付いたリボンを掛け、
(2) リストの先頭記号をカボチャにし、
(3) 各見出しをハロウィンっぽくオレンジ色と緑色に
しています。

ページにリボンを掛ける方法は、過去にご紹介した以下の記事の内容を使っています。

●「ページの左上や右上に「リボン」を掛ける」

今回は、上記の方法を使って、夜の間だけウェブサイトをハロウィン仕様のデザインに自動的に変化させる方法をご紹介いたします。