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

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

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

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

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

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

指定した時刻の間だけページに適用するスタイルシートを切り替えます。
スタイルシート自体を切り替えるので、あらゆる装飾を一気に変化させられます。

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

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


▲スタイルシートを切り替えることでページ全体のデザインを変更

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

                                            1 / 2 / 3                              次へ>>>

ホームページ制作から独自ドメイン、高性能･大容量サーバーの全て揃ったお得なパッケージプランをご提案。