背景画像をランダムに変える（方法編）
直リンクをお断りした代わりに、記事として公開しよう
と思ったわけではありませんが
やり方を知りたがっている人が多いようなので書いておきます
いえね、「背景画像をランダムに変える」というキーワード検索で
3年前に書いた記事がよくヒットするんですよ
ところがあの記事には「JavaScriptを使えば造作もないことです」としか書いてない
しかも、もともとエキサイトブログに書いた記事を転載しているから話がトンチンカン
エキサイトブログではJavaScriptを使えない
せっかく訪ねて来てくださった人に気の毒なので、いまさらですが公開します
ranimg = new Array();
ranimg[0]="001.jpg";
ranimg[1]="002.jpg";
ranimg[2]="003.jpg";
ranimg[3]="004.jpg";
ranimg[4]="005.jpg";
ranimg[5]="006.jpg";
ranimg[6]="007.jpg";
ranimg[7]="008.jpg";
ranimg[8]="009.jpg";
ranimg[9]="010.jpg";
xx = Math.floor(ranimg.length*Math.random());
ranimg = ranimg[Math.floor(xx)];
document.write ('＜style type="text/css"＞＜!--body {background-image: url("'+ ranimg +'");background-repeat: no-repeat;background-attachment: fixed;margin: 0;padding: 0;}--＞＜/style＞');
上記のスクリプトに、たとえば「change.js」という名前をつけ
背景にしたいjpeg画像10枚と同じディレクトリに入れておきます
あ、とりあえず10枚にしたけど、これは自分で増やしたり減らしたりできます
document.write 以下にある「no-repeat」「fixed」などは
「繰り返さない」「固定」という当ブログ用の指定ですので
小さい画像をタイルのように並べたい、とか、記事と一緒にスクロールさせたい人は
CSSリファレンスなどを見て、自分の好みに設定してください
ここまでできたら、次はブログ本体のHTMLで＜head＞～＜/head＞のどこかに
＜!-- 背景画像をランダムに変える --＞
＜Script Language="JavaScript" SRC="change.js"＞＜/Script＞
という文章を書いておきます
もちろん、ここに直接JavaScriptをベタッと書いてもいいんだけど
別ファイルにしたほうがメンテナンスしやすいし、使い回しがききますからね
特にブログはカテゴリ別とか月別、日別などいくつもテンプレート作るからね
…他人に使われやすいという欠点もありますが (^^ゞ
この例はすべてのファイルが同じディレクトリにあるという想定ですが
相対パスやURLパスを使えば画像倉庫やJavaScript置き場みたいなディレクトリを作って
そこにまとめて置いておくこともできるわけです
…で、そこにアクセス制限をかけちゃったわけですね
ということで、お役に立ちましたでしょうか
あ、書き忘れてたけど、念のための誤動作防止策として
スクリプト中の「＜」「＞」は全角にしてあります
コピーして使うときは半角に変換してくださいね
