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

昼間と夜とで違うヘッダ画像を表示させる。

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

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

 

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

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

 

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

 

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

 

注意!!

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

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

 

 

HTMLの編集

右の『管理メニュー(画像左)』から
独自レイアウト(上画像)』を開き


HTMLメニュー(画像下)』に


<header>

</header>


が追加されていることを確認する。

追加されていない場合は、追加しておく。

ここに<img src="" />が追加されていたら、削除しておく。

 


スタイルシートの編集

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

 

#header
{

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

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

 

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

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

}

画像の1と2を用意する。

header.png
header.png
header2.png
header2.png

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

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

 

画像のURLをコピーしておく

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

 

 

下のjavascriptのソースをコピーしてメモ帳などに保存する

<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時、time2は19時を指定している。

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

 

today=new Date();

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

 

time=today.getHours();

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

 

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

もしも、time(現在時刻)が、time1(7時に設定されている)よりも大きく

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

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

だった場合。

つまり7時以上、19時未満だった場合

 

document.getElementById("header")

#headerで指定した

 

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

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

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

 

else

それ以外だった時は

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


その結果

(1)AM7時からPM午7時前までは、画像の1

(2)PM7時以降、朝の7時前までは、画像の2を表示する。

 

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

 

 

プログラムの画像のURLを書き換える

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

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

 

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

 

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

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

 

設定からヘッダの編集を選択する

右側の設定からヘッダ部分の編集メニューを選択して、そこに完成した上記のソースコードを貼り付ける。 

 

これで、夜7時になれば、夜用の画像の2に切り替わり、朝の7時になれば昼間用の画像に切り替えることが出来る。

 

 


株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422