ランダムにいろいろやってみます
もちろんみなさまがやりたがっているランダムヘッダーだけでなく・・
背景だってボタンたって何でもランダムで表示しちゃいます
やり方は jquery The ランダム
こちらと同じです
フリープラグインにおまじないが入っているか確認します
新デザインではjqueryが標準で読み込まれていませんので入れないと動作しません
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
または（ ↑↓どちらか1つが入っていれば大丈夫です ）
<script type="text/javascript" src="http://stat.ameba.jp/common_style/js/library/jquery/jquery-1.6.2.min.js"></script>
上のどちらかが入っているか確認して
なければどちらかをフリープラグインの一番最初にコピペします
フリープラグインに・・・たとえば3パターンでしたら
<script type="text/javascript">
var mai = 3;
var ran = Math.floor(mai*Math.random());
$("body").addClass("add" + ran);
</script>
これだけです・・・
後は全部CSSでやっちゃいます
<body class="add0"><body class="add1"><body class="add2">・・・と
bodyに設定した数だけランダムで class がつきます（0から始まります）
3パターンで例をやって見ます(.add0 .add1 .add2 ができます)
CSS ヘッダー でヘッダー画像をランダムにしてみます
/*ヘッダー*/
.skinHeaderArea{
width:980px;/*画像の横*/
}
.skinTitleArea a{
background-image:url(画像1のＵＲＬ);
width:980px;/*画像の横*/
height:200px;/*画像の縦*/
background-repeat:no-repeat;/*繰り返さない*/
background-position: center top;/*中央上に*/
display:block;
text-indent:-9999px;
text-decoration:none;
overflow:hidden;
outline:none;
}
.skinHeaderArea h2{
display:none;/*概要を非表示*/
}
.add1 .skinTitleArea a{
background-image:url(画像2のＵＲＬ);
}
.add2 .skinTitleArea a{
background-image:url(画像3のＵＲＬ);
}
これで3パターンのヘッダー画像のランダムが完成です
・・・.add0 は？
それは最初に設定してあるCSSがそれに当たります
最初にヘッダー画像1をCSSで設定して表示します
もし・・ .add1なら画像2に変えます
もし・・ .add2なら画像3に変えます
つまり・・ .add0の場合は最初の画像って～わけ
※新しいデザインは先に記事を読み込みます
フリープラグインに書かれているランダムが発生するのにタイムラグが生じます
そのため最初に表示されたヘッダー画像が時間をおいて別の画像に変わります
それが嫌だって場合は・・・
background-image:url(画像のＵＲＬ);を削除して
.add0 .skinTitleArea a{
background-image:url(画像のＵＲＬ);
}
これを加えます
ただし・・そうすると最初ヘッダー画像が表示されなくて少ししてから3枚のうちのどれかが表示されることになります
このブログは8パターンのランダムが設定してあります
.add0 から .add7 まで8通りがランダムでつくことになります
body{
background-color:#c8a77e;背景に茶色の背景色を設定
}
これは上でも書いていますが最初に表示された画像が少しして変わるのが嫌だったので最初は他の画像に合わせた背景色を表示するようにしています
body.add0,body.add3{
background-image:url(背景画像のURL1);
}
.add0 と .add3 のときに表示される背景画像です
body.add1,body.add4{
background-image:url(背景画像のURL2);
}
.add1 と .add4 のときに表示される背景画像です
body.add2,body.add5{
background-image:url(背景画像のURL3);
}
.add2 と .add5 のときに表示される背景画像です
body.add6,body.add7{
background-image:url(背景画像のURL4);
}
.add6 と .add7 のときに表示される背景画像です
※ランダムですから別に0～順番に設定する必要はありません
だからといってわざとこんな風にする必要もないのですが・・・
それに2つずつにする必要もないですよ・・
.add0 .skinBody,.add1 .skinBody,.add2 .skinBody{
background-image:url(ヘッダー画像のURL2);
}
.add0 と .add1 と .add2 のときに表示されるヘッダー画像です
.add3 .skinBody{
background-image:url(ヘッダー画像のURL3);
}
.add3 のときに表示されるヘッダー画像です
※.add4 と .add5 と .add6 と .add7 のときは最初に表示されたヘッダー画像のままです（CSS ヘッダー
でヘッダー画像を設定済みです）
ヘッダー画像1（最初に表示された画像請求書封筒）の表示される確立は 4/8 つまり 1/2・・半分です
ヘッダー画像2（黒板）の表示される確立は3/8
ヘッダー画像3（宅配伝票）の表示される確立は1/8
表示確率を変えておみくじヘッダー画像なんて作っても面白いかも・・・
コメントボタンの場合は8通り全部を設定しています（だから8必要だったんです）
.add0 .commentBtn{
background-image:url(コメントボタン画像のURL1);
}
.add1 .commentBtn{
background-image:url(コメントボタン画像のURL2);
}
.add2 .commentBtn{
background-image:url(コメントボタン画像のURL3);
}
.add3 .commentBtn{
background-image:url(コメントボタン画像のURL4);
}
.add4 .commentBtn{
background-image:url(コメントボタン画像のURL5);
}
.add5 .commentBtn{
background-image:url(コメントボタン画像のURL6);
}
.add6 .commentBtn{
background-image:url(コメントボタン画像のURL7);
}
.add7 .commentBtn{
background-image:url(コメントボタン画像のURL8);
}
これがいままでわたしがこのブログで設定しているCSSです
まだ記事枠（まだ記事にしていませんので未設定）とかなんでも可能です
たったあれだけのことでなんでもランダムにできちゃうんです
いろいろ考えたら面白いですよ・・・
上で書いていますが表示確率を変えておみくじヘッダーとか・・
たとえばランダムを100にして
/*ヘッダー*/
.skinHeaderArea{
width:980px;/*画像の横*/
}
.skinTitleArea a{
background-image:url(ヘッダー画像のＵＲＬ);
width:980px;/*画像の横*/
height:200px;/*画像の縦*/
background-repeat:no-repeat;/*繰り返さない*/
background-position: center top;/*中央上に*/
display:block;
text-indent:-9999px;
text-decoration:none;
overflow:hidden;
outline:none;
}
.skinHeaderArea h2{
display:none;/*概要を非表示*/
}
.add99 .skinTitleArea a{
background-image:url(ヘッダー画像のＵＲＬ);
}
こうすると・・・.add0から.add98までは最初に表示されたヘッダー画像のままで・・
.add99のときだけヘッダー画像が変化するということもできます
変化するヘッダー画像を見れるのは1/100の確立・・ラッキーヘッダーとか何とかいって？
あまり多くして1/1000なんてほとんど見られない設定はみなさまに馬鹿にされるからやめましょう・・・
アクセス数稼ぎに利用することはダメですよ・・・
※1/100ともなると動作確認が大変です・・最初にフリープラグインのランダム設定を2にして1/2の確立で変化することと表示がきちんとできることを確かめてからランダム設定を100にすればOKです
新しいデザインではフリープラグインを1番最初に読み込むことはできなくなりましたので
どうしてもランダム発生から表示を変えるまでに時間がかかってしまいます
少しでも早く表示を帰るためにはサイドンバーの配置でフリープラグインをサイドバーの一番上に配置するとか・・
フリープラグインの中でもはじめのほうにスプリクトを書くとか（一番最初はおまじないですよ）してください
あとはみなさまのアイデアしだいです