2009年02月22日
★ブログ画像のランダム表示をHack する！-Case.1-
【第 133 話】 いつ見てもブログにSEXY な画像がいっぱい！- JavaScript 応用 編 -
The story [133] What a hell of being too many sexy pics! - Continued JavaScript Chapter -
★ある方のブログでオレのブログのTips.が紹介された。
・・・ブログの背景画像がスクリーンセーバーしてくれる例のヤツだが、ソラマメの住人にとってはもっと敷居の低いヤツでいいハズ。
・・・日曜日の午後、ぼちぼちソラマメブログのデザインでもいじってみようかなと思ってるキミ。
たとえば、これなんかがオススメだ。 - by Lovely Wolf -
★以前、【第 70 話】【第 71 話】で紹介した、「Cool な背景に変えてみる！- JavaScript 編 -」をしばらく連載するつもりだったのだが、RL が忙しくてそんなのカンペキ忘れていた。
・・・して本日は、とにかくSEXY な画像をたくさんお持ちの読者のみなさんのために応用編でもやりますか。
【Cool な背景に変えてみる！- JavaScript 編 - 関連記事】
# Case 1.<Web URL> http://lovelywolf.slmame.com/e374231.html
# Case 2.<Web URL> http://lovelywolf.slmame.com/e374675.html
・・・前回にひきつづき、ある時間になったら背景画像を入れ替えるっていうのをやってみる。
さっきセットしたばかりだが、今日からオレのブログは毎日ある時間になると背景画像が入れ替わる。
# 07:00am～17:00pm
# 17:00pm～21:00pm
# 21:00pm～24:00pm
# 00:00pm～07:00pm
★【第 70 話】【第 71 話】で紹介したJavaScript の書き方のほうは、クリアしているということで続けることにする。
・・・スタイルシートのカスタマイズではなく、HTML （トップページ、個別記事、アーカイブ）のカスタマイズなので、意味がわからない方はこのブログのバックナンバーをどうぞ。
・・・赤字部分が時間の指定をしているトコロだ。コピペして使う場合は、著作権情報を載せてください。
初心者のそこのキミ、<head> タグ、</head> タグはコピペする必要はありません。ソラマメにすでに入ってますから。
★おしらせ
以下のバーション 1.0.5 は別に問題はないけど、【第 134 話】 で修正を加え、バーション 1.0.6 になりました。
# 【第 134 話】
<WEB URL> http://lovelywolf.slmame.com/e536686.html
<head>
<script language="JavaScript">
/*--------------------------------------------------------------------------
* Blog Screen Saver, version 1.0.5
* Copyright(C)2009/* Lovely Wolf Report in SLMaMe * ALL Rights Reserved
* For details, please check the website : http://lovelywolf.slmame.com/
*--------------------------------------------------------------------------*/
function setFixImage(){
var h = (new Date()).getHours();
if((h >= 7) && (h < 17)){
var imglist = new Array("//img01.tec29.com/usr/lovelywolf/slmame-banner-88.jpg");
}
else if((h >= 17) && (h < 21)){
var imglist = new Array("//img01.tec29.com/usr/lovelywolf/slmame-banner-87.jpg");
}
else if((h >= 21) && (h < 24)){
var imglist = new Array("//img01.tec29.com/usr/lovelywolf/slmame-banner-89.jpg");
}
else{
var imglist = new Array("//img01.tec29.com/usr/lovelywolf/slmame-banner-90.jpg");
}
var num = Math.floor((Math.random() * 100)) % imglist.length;
document.body.style.backgroundImage='url("'+imglist[num]+'")';
}
</script>
</head>
★さらに、<body> タグにJavaScript を起動する部分を入れる。
・・・たったコレだけで、指定した時間になると自動的に背景画像が入れ替わる。もちろん、ご自分の画像を使ってやってください。
<head>
HTMLヘッダ部分
</head>
<body onLoad="setFixImage();" >
HTMLボディ部分
</body>
Tips 1. たくさん指定した画像の中からランダムに表示させる方法
上記のスクリプトは、各時間帯で1個の画像しか設定してないので同じ画像しか表示されない。
・・・だが、半角カンマを付けて画像を追加すると、いくつかの画像の中からランダムに表示されるようになる。
赤字部分がカンマ付きで追加した画像である。画像の前後には、半角ダブルクォーテーション（"）が必要。
if((h >= 7) && (h < 17)){
var imglist = new Array("//img01.tec29.com/usr/lovelywolf/slmame-banner-88.jpg","//img01.tec29.com/usr/lovelywolf/slmame-banner-89.jpg")';
}
★ここで紹介したスクリプトは、<body>タグに指定された背景画像の切り替え専用です。
・・・ソラマメのオリジナルテンプレートにあるような上部メイン画像（領域名：banner）の自動切換え表示をしたいのであれば、次に示す赤字部分のトコロだけを書き換えてみてくれ。
・・・バックアップをとってから作業したほうがよいのは、言うまでもないが。
うまくいったら何かコメントでも入れといてください。
<body> タグの背景画像の指定方法
document.body.style.backgroundImage = 'url("'+画像のURL+'")';
<div id="banner"> タグ（領域名：banner）の背景画像の指定方法
document.getElementById('banner').style.backgroundImage = 'url("'+画像のURL+'")';
<head>
<script language="JavaScript">
・・・
var num = Math.floor((Math.random() * 100)) % imglist.length;
document.getElementById('banner').style.backgroundImage='url("'+imglist[num]+'")';
}
</script>
</head>
Posted by Lovely Wolf at 14:07│Comments(0)
│【SEXY デザインTips】
