ランダムでトップ画面が変わる
これをやるなら、先にコッチ をやってください。
トップの画像を貼る方法を前回説明しました。
今回は、その画像をアクセスするたびに、
自動的に変える方法を説明します。
下記の文章をメモ帳等で準備してください。
<script type="text/javascript">
<!--
var headimg;
var sizeh;
var sizew;
var cnt = Math.floor(画像の枚数*Math.random());
if (cnt == 0) {
headimg = "画像1URL";
sizeh = 画像1高さ;
sizew = 画像1幅;
}else if (cnt == 1) {
headimg = "画像2URL";
sizeh = 画像2高さ;
sizew = 画像2幅;
}else {/* それ以外 */
headimg = "画像3URL";
sizeh = 画像3高さ;
sizew = 画像3幅;
}
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'#header{height:' + sizeh + 'px; background-image: url(' + headimg +');}'+"\n"+'-->'+"\n"+'</style>');
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'#header h1 a{width:' + sizew +'px; height:' + sizeh + 'px;}'+"\n"+'-->'+"\n"+'</style>');
// -->
</script>
赤・緑・青の部分を、ケースバイケースで変更してください。
条件を増やしたい場合は、緑の部分をコピーして増やしてください。
cnt == 0 , cnt == 1 , cnt == 2 という感じで件数を増やしていってください。
サイズが全部一緒の場合は、sizeh/sizewが必要ありません。関連する部分は削除してＯＫです。
（紫の部分もいりません）
これを下記の場所に保存してください。
「ブログを書く」
↓
「サイドバーの設定」
↓
「プラグインの追加」
↓
「フリープラグイン」
ここに貼り付けて保存。
その後、画面に表示されるように、サイドバーに「フリープラグイン」を配置してください。
例１：画像が２種類の場合
<script type="text/javascript">
<!--
var headimg;
var sizeh;
var sizew;
var cnt = Math.floor(2*Math.random());
if (cnt == 0) {
headimg = "画像1URL";
sizeh = 画像1高さ;
sizew = 画像1幅;
}else {/* それ以外 */
headimg = "画像2URL";
sizeh = 画像2高さ;
sizew = 画像2幅;
}
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'#header{height:' + sizeh + 'px; background-image: url(' + headimg +');}'+"\n"+'-->'+"\n"+'</style>');
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'#header h1 a{width:' + sizew +'px; height:' + sizeh + 'px;}'+"\n"+'-->'+"\n"+'</style>');
// -->
</script>
例２：画像が３種類の場合
<script type="text/javascript">
<!--
var headimg;
var sizeh;
var sizew;
var cnt = Math.floor(3*Math.random());
if (cnt == 0) {
headimg == "画像1URL";
sizeh = 画像1高さ;
sizew = 画像1幅;
} else if (cnt == 1) {
headimg = "画像2URL";
sizeh = 画像2高さ;
sizew = 画像2幅;
}else {/* それ以外 */
headimg = "画像3URL";
sizeh = 画像3高さ;
sizew = 画像3幅;
}
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'#header{height:' + sizeh + 'px; background-image: url(' + headimg +');}'+"\n"+'-->'+"\n"+'</style>');
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'#header h1 a{width:' + sizew +'px; height:' + sizeh + 'px;}'+"\n"+'-->'+"\n"+'</style>');
// -->
</script>
例３：画像が４種類の場合
<script type="text/javascript">
<!--
var headimg;
var sizeh;
var sizew;
var cnt = Math.floor(4*Math.random());
if (cnt == 0) {
headimg = "画像1URL";
sizeh = 画像1高さ;
sizew = 画像1幅;
} else if (cnt == 1) {
headimg = "画像2URL";
sizeh = 画像2高さ;
sizew = 画像2幅;
} else if (cnt == 2) {
headimg = "画像3URL";
sizeh = 画像3高さ;
sizew = 画像3幅;
}else {/* それ以外 */
headimg = "画像4URL";
sizeh = 画像4高さ;
sizew = 画像4幅;
}
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'#header{height:' + sizeh + 'px; background-image: url(' + headimg +');}'+"\n"+'-->'+"\n"+'</style>');
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'#header h1 a{width:' + sizew +'px; height:' + sizeh + 'px;}'+"\n"+'-->'+"\n"+'</style>');
// -->
</script>