jquery The ランダム
今回は訳あって前フリが長いです・・・
いつもジャン・・なんて突っ込みはなしでお願いします
リク記事です
「ランダムでヘッドだけでなく背景も一緒にランダムで変更できたら」
うん・・ランダムでヘッド画像を変更する記事を書いてからすでに3年半近くたちます
この間にわたしも成長しました
jqueryなんて武器を多少は会得しました
「ランダム」で検索をしてこのブログにこられている方も多いです・・
なので今回はJavaScriptでもjquery化したのにチャレンジしました・・
ヘッド画像のランダムをjquery化はすんなりと出来ました
<script type="text/javascript">
<!--
var hi = new Array(
"画像のＵＲＬ1 ",
"画像のＵＲＬ2 ",
"画像のＵＲＬ3 ",
"画像のＵＲＬ4 "
);
var ran = Math.floor(hi.length*Math.random());
$("#header").css("backgroundImage","url("+ hi[ran] +")");
// -->
</script>
注意：
アメブロ以外でこの記事を参考にされている方・・
これはjqueryをすでに読み込んでいるという仮定で作っています
アメブロでは標準？で古いですけど読み込まれています
アメブロ以外で使う場合はhead内にこれより前に
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
これとかを入れてjqueryを読み込んでおいてから実行するようにしてください
さすがはjquery・・文字数もだいぶ減らすことが出来て満足満足・・・
ただ・・画像のURLが3年半の間にだいぶ無駄に長くされてしまっています
せっかくquery化で短くなっても意味がありません・・・逆に長くなってしまいます
3年半前の画像のURL
http://stat.ameba.jp/user_images/67/bb/10043037752.gif
現在の画像のURL
http://stat001.ameba.jp/user_images/20110412/21/how-to/27/8b/j/o0760025011162324490.jpg
だいぶ長くなっています
サムネイルの画像のURLで比べたら倍近く長くなっちゃっています・・
でも・・フリープラグインの文字数制限は3800文字と3年半前と変わっていません
これでは何枚もの画像を設定するわけにはいきません
まして・・背景画像もとなったらさらに倍の文字数が使われるわけで・・・
フリープラグイン3800文字の中では気軽に使うわけにはいかなくなっています
フリープラグイン文字数無制限化極秘計画書
とセットにしないと紹介できないような・・
それだとマニアックな方しか使っていただけない・・・
で・・・これを何とか短くしたいって
画像のURLを短く省いてかけないか・・とか
あれこれと頭を悩ませていたんです・・・
悩んでいると神様はおられるようで・・・
何か知らないけど教えてくれるんですね・・
何の気はなしにぼーっとソースを見ていたら・・・
だいぶ前から知ってはいましたがbodyにid="mainIndex"なんてidが付いているんですね・・
なぜか今回はそこで引っかかっちゃってなんでbodyにidなんか・・・・
jqueryを使ってCSSで背景画像をランダムに変更しようとして悩んでいたんですが・・
jqueryならaddclassって～新たにクラスを付け加えることが出来るジャン！
ランダムのクラス名をつければ長い画像のURLをフリープラグインからCSSに追い出せるジャン！
クラスなら背景画像だけじゃなくいろんな設定が可能ジャン！
おまけにその分フリープラグインは短くなるジャン！
CSSなら文字数は関係ないジャン！
簡単かつ良いことばっかしジャン！
シャンシャンシャン 
あまりのうれしさに・・ いつもはほとんど使わない絵文字も今回はいっぱい使ってみました 
しかしやってみると
あまりにも簡単すぎて「今までの時間を返して欲しい！」
やった～！ってより・・・腹が立ってくるくらいあっけなかったです・・
この怒りをどこに向けようか・・・
って～ことで
前フリを無駄に長くしてみなさまに意地悪をしています・・・ぅん？
あっ・・まっ・・・そんなんで・・・
これが訳あっての訳だったんです・・・・ m(_ _)m
で・・・
↑3パターンしか仕込んでありませんので更新しても同じって場合も1/3の確立であります
ブラウザーの更新またはブログのヘッド画像をクリックしてください
左サイド上の「スキンチェンジボタン？」をクリックしてもランダムで変わります
このボタンについては次回記事にします
お待たせしました・・・
ここから本文です
フリープラグインに・・・
<script type="text/javascript">
var mai = 3;
var ran = Math.floor(mai*Math.random());
$("body").addClass("add" + ran);
</script>
どんだけ～ これだけ～～ フリープラグインにコレだけ入れるだけです
maiの部分に枚数というか何パターンのランダムにするか入れます
3なら3パターンだし4なら4パターンでclass名をbodyにつけていきます
以下体力気力と暇な方はドンドン増やしてかまいません
ここでは数字だけですから増やしてもフリープラグインの文字数制限には関係ありません
フリープラグインの最初の方に書いてください
また・・サイドバーの上の方・・3カラムでしたら左の上の方が早く動作します
あとは全部ＣＳＳです・・・・
3パターンでしたら add0 add1 add2が
4パターンでしたら add0 add1 add2 add3 の4つのうち1つがclassとしてbodyにつけられます
※addに0からはじまる数字を順番にフリープラグインで設定した枚数分つけていきます
以下・・maiが3の3パターンの場合で説明します
背景をランダムにするのでしたら・・CSSの最後に
.add0{/*背景0*/
background-image:url(背景画像のURL0);
}
.add1{/*背景1*/
background-image:url(背景画像のURL1);
}
.add2{/*背景2*/
background-image:url(背景画像のURL2);
}
ランダムでこのうちのどれかが使われることのなります
基本はこうですが
.add0{/*背景0*/
background-image:url(画像のURL);
}
.add1{/*背景1*/
background-color:#ff00ff;
}
.add2{/*背景2*/
background-image:url(画像のURL);
}
このように1つは画像ではなくて背景色を設定したり・・・
3パターン全部画像は使わないで背景色を設定しても大丈夫です
たとえば・・・・
見本のブログ の場合は・・
マ●トリクスぽいのは
.add0{/*背景0*/
background-image:url(画像のURL);
}
普通に画像を全面に繰り返し並べています
※このときbodyにbackground-repeat:no-repeat;なんて設定があると繰り返してくれません
ター●ネーターのようなやつは
.bgi1{/*背景1*/
background-image:url(画像のURL);
background-position:left top;
background-repeat:repeat-y;
background-color:#171717;
}
背景画像を左端に縦にだけに繰り返して表示して残りは#171717色で塗りつぶします
ロボ●ップらしきのは
.bgi2{/*背景2*/
background-image:url(画像のURL);
background-position:right bottom;
background-repeat:no-repeat;
background-attachment: fixed;
background-color:#2A0B13;
}
背景画像を右下にスクロールしても動かないように1つだけ固定して
残りは#2A0B13色で塗りつぶします
このようにどのようにでも設定可能になります
※すでにbodyに背景とか設定している場合はその部分は削除してください
たとえばすでにこのようにbodyを設定していた場合
body{
margin:0;
padding:0;
text-align:center;
background-image:url(画像のURL);
background-position:left bottom;
background-repeat:no-repeat;
background-color:#ff00ff;
filter:alpha(opacity=90); /*IE*/
-moz-opacity:0.90; /*FF*/
opacity:0.90;
}
bodyの中の赤字部分がかち合っちゃいますから削除します
本当は背景画像と背景色は上書きされるので残っていてもいいんですが・・たぶん？
background-positionとかbackground-repeatとかbackground-attachmentは影響する場合があるので削除します
3つのうち1つででリピートさせたい場合があってもここでbackground-repeat:no-repeat;なんて設定してあるとリピートしてくれません・・
background-repeat:repeat;ってadd0の方で設定するのでしたら大丈夫なんですが面倒なのでbodyの方の設定を削除します
わからなければbodyはそのままさわらないでやってみてください
実際にやって影響が出なければさわらないでかまいません
表示がおかしかったら影響している部分だけ削除すれば良いだけです
もしすでに背景を設定していてランダムにしたときにも1つのパターンで使いたい場合は
上のbodyから赤字部分を削除してから
.add0{/*背景0*/
background-image:url(画像のURL);
background-position:left bottom;
background-repeat:no-repeat;
background-color:#ff00ff;
}
と・・.add0にそのまま設定します（.add1でも.add2でもランダムなんでどこでも良いです）
ヘッド画像をランダムで表示する場合・・・
画像のサイズは全部同じにして下さい
.add0 #header{/*ヘッド画像0*/
background-image:url(画像のURL0);
}
.add1 #header{/*ヘッド画像1*/
background-image:url(画像のURL1);
}
.add2 #header{/*ヘッド画像2*/
background-image:url(画像のURL2);
}
すでにヘッド画像を使っていてそれもランダムで使いたい場合は
これらのどれかに今まで使っていた画像のURLを入れてください
すでに入っているヘッド部分のＣＳＳは画像サイズさえ変らなければ変更しなくてそのままでかまいません
今までのＣＳＳ設定をそのまま使います
まだヘッド部分のカスタマイズをされていない方は
オリジナルスキンCSSの編集 ヘッド・タイトル3 こちらを参考にして
↓ここからはまだヘッド部分のＣＳＳがない方だけ参考にして下さい
#header{
height:420px;/*画像の縦*/
background-repeat:no-repeat;/*繰り返さない*/
background-position:center;/*中央に*/
}
#header h1,
#header h2{/*位置の初期化*/
margin:0;
padding:0;
}
#header h1 a{
width:760px;/*画像の横*/
height:420px;/*画像の縦*/
display:block;
position:absolute;
text-indent:-9000px;
text-decoration:none;
}
#header h2{
display:none;/*概要を非表示*/
}
↑ここまではまだヘッド部分のＣＳＳが設定していない方だけ参考に
と・・background-image: url(画像のURL); 以外のＣＳＳは設定しておきます
この部分が全部の共通のＣＳＳ設定になりますので
ランダム部分には画像のURLだけ設定すれば大丈夫なんです
赤字部分は記事を参考にして下さい
見本のブログはそれだけでなく・・・
.add0 #frame{ }
.add1 #frame{ }
.add2 #frame{ }
.add0 #wrap{ }
.add1 #wrap{ }
.add2 #wrap{ }
他にもメッセージボードの枠や
上の記事枠、中の記事枠、下の記事枠や
サイドバーのブックマークのタイトル画像などもランダムで変るようになっています
また・・ター●ネーターのようなやつが表示された場合はリンクの文字色も変るようにしています
最初に .add0 とか .add1 ってつけてＣＳＳを書けば良いだけです・・・
見本は手抜きで画像の色を変更しているだけですのでそれほど変っていないように見えますが
根気と気力と暇さえあればまるっきり変更させることも可能です
ブラウザーを更新するたびに・・
ページを移動するたびに・・
ヘッド画像をクリックするたびに・・ スキンがガラって変るって・・・
見に来てくれた方にとっては・・ 面倒なだけですよね・・ ぁれっ？
見本のブログ のように変身ボタンをつけるには
http://ameblo.jp/exlink/entry-10863034501.html