JavaScript 背景画像をランダムで
2011年4月
もっと簡単に何でも出来ちゃう方法を記事にしましたのでそちらを参考にしてください
＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
暑い・・・
PCのある部屋・・・・
エアコンが・・・・
もう何年も壊れたままですが
今年は暑すぎです・・・
PCの前に座っても何もする気が起きません
にしても・・・暑すぎです
扇風機が大きなドライヤー状態です・・・・
前にアップしました
の、使い回しです・・・・
ほとんど変わりません・・・・
と、いうことはカンタン！
何枚か背景画像を作って画像フォルダーにアップします
画像のＵＲＬで http://stat.ameba.jp/user_images/ から後ろの部分を
ranimg[0] ～ ranimg[2] に記入
（３枚をランダム表示にする場合です、以後ranimg[3]と増やしてください）
※文字数節約のためこんな書き方をしています
記事につけた背景画像をランダムに表示する場合
http://ameblo.jp/exlink/entry-10095202209.html
コレを参考にＣＳＳの最後に
.entry .contents{
background-image: url(画像のURL);
background-repeat: no-repeat;
background-position:80% 80%;
}
.contents #advertising2{
background:none !important;
}
※ここの画像のURLはhttp://から始まるURLです
画像は上でアップした画像のどれでもかまいません
できましたらフリープラグインに貼り付けてください
<script type="text/javascript">
<!--
var ranimg = new Array();
ranimg[0]="63/0d/143886433.jpg";
ranimg[1]="f6/d0/143886434.jpg";
ranimg[2]="cc/58/143886436.jpg";
var mai = Math.floor(ranimg.length*Math.random());
ranimg = ranimg[Math.floor(mai)];
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'.entry .contents{background:url("http://stat.ameba.jp/user_images/'+ ranimg +'") no-repeat;}'+"\n"+'-->'+"\n"+'</style>');
// -->
</script>
このサイトのように記事下foot部分に背景画像をおく場合
CSSの最後に
.entry .foot{
padding-bottom:90px;/*foot下にスキマ*/
background: url(画像のURL) ;
background-repeat : no-repeat;
background-position:10% 100%;/*画像の位置 横 縦*/
font-size:10px;
text-align: right;/*記事URL|コメント|トラバ の位置 left-左寄せ center-中央寄せ*/
}
できましたらフリープラグインに貼り付けてください
<script type="text/javascript">
<!--
var ranimg = new Array();
ranimg[0]="63/0d/143886433.jpg";
ranimg[1]="f6/d0/143886434.jpg";
ranimg[2]="cc/58/143886436.jpg";
var mai = Math.floor(ranimg.length*Math.random());
ranimg = ranimg[Math.floor(mai)];
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'.entry .foot{background:url("http://stat.ameba.jp/user_images/'+ ranimg +'") no-repeat;}'+"\n"+'-->'+"\n"+'</style>');
// -->
</script>
ブログの背景画像をランダムにする場合
ＣＳＳはさわる必要はありませんフリープラグインに貼り付けてください
<script type="text/javascript">
<!--
var ranimg = new Array();
ranimg[0]="63/0d/143886433.jpg";
ranimg[1]="f6/d0/143886434.jpg";
ranimg[2]="cc/58/143886436.jpg";
var mai = Math.floor(ranimg.length*Math.random());
ranimg = ranimg[Math.floor(mai)];
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'body{background:url("http://stat.ameba.jp/user_images/'+ ranimg +'") ;}'+"\n"+'-->'+"\n"+'</style>');
// -->
</script>
※ブログの背景は繰り返しますのでno-repeatは入れません