ヘッダー画像・全体背景画像のランダム表示

★　ヘッダー画像・全体背景画像のランダム表示します。

ブログを開いたときや、更新キー（Ｆ５）を押した場合、
その都度、画像がランダムに変化します。


◆　ヘッダー画像をランダム表示する


①　フリープラグインへ追記する

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript'>
image = new Array();
image[0]='画像ＵＲＬ１';
image[1]='画像ＵＲＬ２';
image[2]='画像ＵＲＬ３';
image[3]='画像ＵＲＬ４';
image[4]='画像ＵＲＬ５';
image[5]='画像ＵＲＬ６';
image[6]='画像ＵＲＬ７';
image[7]='画像ＵＲＬ８';
image[8]='画像ＵＲＬ９';
image[9]='画像ＵＲＬ１０';
x=Math.floor(Math.random()*image.length);
$('.skinHeaderArea').css("background-image","url("+image[x]+")");
</script>

②　ＣＳＳへ下記を追記します。
　　高さなどは、画像に合わせて指定してください。
　　下記の様に、ヘッダー画像はＣＳＳでは指定しない方が
　　きれいに表示されます。
　　（ＣＳＳにヘッダー画像を指定すると、ＣＳＳに指定した物が
　　先に表示されてしまいます）

/* ------------------------------------------------------- */
/* ヘッダー（スキン）画像を設定　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.skinHeaderArea{
background-image:none;/* ヘッダー画像 */
background-repeat:no-repeat;/* 繰り返ししない */
background-position:center top;/* 位置 */
height:300px;/* 高さ */
margin-bottom:30px;/* ヘッダーと記事部分の隙間 */
}

◆　全体背景画像をランダムに表示させる



①　フリープラグインへ追記する

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript'>
image = new Array();
image[0]='画像ＵＲＬ１';
image[1]='画像ＵＲＬ２';
image[2]='画像ＵＲＬ３';
image[3]='画像ＵＲＬ４';
image[4]='画像ＵＲＬ５';
image[5]='画像ＵＲＬ６';
image[6]='画像ＵＲＬ７';
image[7]='画像ＵＲＬ８';
image[8]='画像ＵＲＬ９';
image[9]='画像ＵＲＬ１０';
x=Math.floor(Math.random()*image.length);
$('body').css("background-image","url("+image[x]+")");
</script>

②　ＣＳＳへ下記を追記します。
　　下記の様に、全体背景画像はＣＳＳでは指定しない方が
　　きれいに表示されます。
　　（ＣＳＳにヘッダー画像を指定すると、ＣＳＳに指定した物が
　　先に表示されてしまいます）

/* ------------------------------------------------------- */
/* 全体背景画像を設定　　　　　　　　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
body{
background-image:none;/* ヘッダー画像 */
background-repeat:repeat;/* 繰り返しする */
background-position:left top;/* 位置 */
background-attachment:fixed;/* スクロールしてもついてこない */
}

注意

◆　下記はフリープラグインの最初に１つあればＯＫです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>


◆　画像のＵＲＬ１～画像のＵＲＬ１０　で、画像のＵＲＬを指定しなかった行は
　　削除してからフリープラグインにセットしてください。





●　追記 2012.09.30
　　フリープラグインの文字数制限対応

①　フリープラグインへ追記する

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type='text/javascript'>
image = new Array();
image[0]='画像ＵＲＬ１';
image[1]='画像ＵＲＬ２';
image[2]='画像ＵＲＬ３';
image[3]='画像ＵＲＬ４';
image[4]='画像ＵＲＬ５';
image[5]='画像ＵＲＬ６';
image[6]='画像ＵＲＬ７';
image[7]='画像ＵＲＬ８';
image[8]='画像ＵＲＬ９';
image[9]='画像ＵＲＬ１０';
rand_back_imge(".skinHeaderArea");
</script>

◆　説明

・　下記は既にフリープラグインにあれば不要です。

<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>


・　.skinHeaderArea　は、場所を表します。

.skinHeaderArea ・・・ ヘッダーの背景画像
.skinFrame2 ・・・　フレームの背景画像
body ・・・　全体の背景画像
.skinContentsArea ・・・　コンテンツ全体の背景画像


・　画像URLを指定していない行は削除すること。



◆　スクリプトの内容

function rand_back_imge(back_sel){ //ランダムに背景画像を変える
x=Math.floor(Math.random()*image.length);
$(back_sel).css("background-image","url("+image[x]+")");
}