Jimdoの裏技　Javascriptを使って時間帯によって画像を変える。

Jimdoを使っているとヘッダ画像が固定されてつまらないという話を聞く。

確かに、そうだけどぉおおおお！

 

スタイルシートを使えば、やり方次第で、
ページごとにヘッダ画像や、ヘッダのサイズを変えることだってできてしまいます。

余談ですが、いつの間にかナビゲーションメニューを画像にすることも出来るようになってました。

 

それは、次回のお楽しみにしていただくとして、今回は、JavaScriptとスタイルシートを使って、時間毎にヘッダ画像（ヘッダだけではないが） を切り替えるテクニックを書いて見ることにします。

 

凄くシンプルなコードなので、手順さえ間違えなければ、誰でも簡単に設置することが出来るはずです。今回は、『独自レイアウト』を利用している方に限るが、応用次第ではテンプレートを使って変更させることもできないわけではありません。

 

注意！！

ここから先は独自レイアウトを使っている人の手順です！

テンプレートを使用している場合は、この方法では出来ません。

 

 

『独自レイアウト』の『CSSメニュー（上画像）』にを次のように編集しておく。

 

#header
{

 /* 最低限この下は追加しておこう*/

    height:75px; /* ヘッダの高さ */
    width:940px;/* ヘッダの幅*/
    background:#000; /* ヘッダの色 */

 

/* これはあってもなくても良い（必要に応じて） */

    margin:0px; /*ヘッダのマージンをゼロにする */
    padding:0; /*ヘッダのパッディングをゼロにする */
    margin:0px auto; /* 中央合わせの指定 */

}

独自レイアウトのCSSを用意してファイルアップロードする。
非表示のメニューを作っておいて、そこに保存しておいても良い。

今回は上の２つの画像を用意してみた。

 

ファイルアップロードの画面で、アップロードした画像を右クリックしてプロパティーをみると、画像のURLが表示されるので、２枚の画像のそれぞれのURLをコピーしてメモ帳などに保存しておく。

 

 

<script type="text/javascript">
[

times1=7;
times2=19;

function time_image()
{
today=new Date();
time=today.getHours();
  if(time >= times1 && time < times2){
       document.getElementById("header").style.background="#fff url(画像のURL) no-repeat";
  }else{
        document.getElementById("header").style.background="#fff url(画像のURL2) no-repeat";
  }
}

window.onload = function () {      
    time_image();
}      
>
</script>

このソースコードに書かれている内容を知りたい方のために

 

【上記のソースコードの説明】

 

time1=7;

time2=19;

 

これはtime1とtime2という時間に時間を指定している。

ここでは、time1は7時、time２は19時を指定している。

どちらも半角数字で指定する。（全角ではエラーが出る）

 

today=new Date();

現在の時刻をtodayに保存する。

 

time=today.getHours();

todayに保存した現在時刻の中から時間をtimeという変数に読み込む
（現在は何時？という情報を読み込む）

 

if(time >= times1 && time < times2){

もしも、time（現在時刻）が、time1（７時に設定されている）よりも大きく

※現在時刻が７時台か、それ以上で

なおかつ(&&)　time（現在時刻）が、time2（19時に設定されている）未満

だった場合。

つまり７時以上、１９時未満だった場合

 

document.getElementById("header")

#headerで指定した

 

.style.background="#fff url(画像のURL) no-repeat";

スタイルシートの background：で指定した属性を、ダブルコーテーションで

囲った内容に変更して、バックグラウンド画像として、表示する。

 

else

それ以外だった時は

画像のURL２をバックグラウンド画像として表示する。

その結果

（１）AM７時からPM午７時前までは、画像の１

（２）PM７時以降、朝の７時前までは、画像の２を表示する。

 

とこんな感じなことが書かれている。

 

 

上記の『画像のURL』と『画像のURL２』と書かれているところを、

先程コピーしておいた画像の１と画像の２のURLにそれぞれ差し替える。

 

document.getElementById("header").style.background="#fff url(http://u.jimdo.com/www56/o/s5e5fa8b633296ca1/userlayout/img/header.png) no-repeat";

 

こんな感じに置き換える。

※このURLは、画像のURLが有効であればどこか他のサーバー上にある画像データでも可能。