2010.01.04

更新情報 : ブログの背景がランダムで変わるようにしてみた

読み込み毎にブログの背景がランダムで変わるようにしてみた。天文系、猫、魚など、現在6種類 現在10種類。気まぐれに増やして行きたいと思います。

こんな感じの JavaScript でやってます:

// RANDOM SELECTION OF BACKGROUND IMAGE
function ChangeBackground() {
    var BGImgs = new Array();
    var BGClrs = new Array();
    var BGRpts = new Array();
    var BGPos = new Array();
    BGImgs[0] = "url(画像ファイル名1)";
    BGClrs[0] = "#000000";
    BGRpts[0] = "repeat"
    BGPos[0] = "top left";
    BGImgs[1] = "url(画像ファイル名2)";
    BGClrs[1] = "#b8b59e";
    BGRpts[1] = "no-repeat"
    BGPos[1] = "top left";
    BGImgs[2] = "url(画像ファイル名3)";
    BGClrs[2] = "#4c5f65";
    BGRpts[2] = "no-repeat"
    BGPos[2] = "top right";

    var MaxImg = 3;
    var ImgNo = Math.floor( Math.random() * MaxImg );

    document.body.style.backgroundImage = BGImgs[ImgNo];
    document.body.style.backgroundColor = BGClrs[ImgNo];
    document.body.style.backgroundRepeat = BGRpts[ImgNo];
    document.body.style.backgroundPosition = BGPos[ImgNo];
}

上記関数を外部の js ファイル、head タグ内等に記述しておき、body の開始タグ直後で ChangeBackground() を呼んでやって下さい。

背景画像の他に背景色や繰り返し、表示位置の指定も個々に設定できるようになってるのがポイントかな。

Categories: Movable Type / 更新情報

Category: 更新情報

Trackbacks

Trackback URL: