2010年02月26日

2010 02.26 Fri


複数個所の背景をアクセス毎にランダム変更表示する方法です。
スクリプトを使ってスタイルシートを書き換えます。

以下、スクリプト設置方法です。
まず、CSSの下記部分を削除してください。
/* 左の色 */
.leftcolor {
background: #78A8EE;
}

/* 右の色 */
.rightcolor {
background: #F22E83;
}


次に、下記のスクリプトを</head>のすぐ上にコピー&ペーストしてください。
<script type="text/javascript">
<!--
// テンプレート:複数個所の背景をランダム変更
function setRandom2Colors() {
// 指定する色は複数可能
// 例['左の色', '右の色', '背景']

var colors = [
['#CC9933','#993300'],
['#99FF33','#66FF66'],
['#FFCC99','#FF3333'],
['#999966','#333300'],
['#669966','#003300']
];

// **** 設定ここまで ****

var colorId = 0;
colorId = Math.floor(Math.random() * colors.length);

document.write('<style>');
document.write('<!--');
document.write('.leftcolor { background: '+ colors[colorId][0] +';}');
document.write('.rightcolor { background: '+ colors[colorId][1] +';}');
document.write('-->');
document.write('</style>');
}
setRandom2Colors();
//-->
</script>
<noscript>
<style>
<!--
/* JavaScriptが無効の場合の左の色 */
.leftcolor {
background: #78A8EE;
}

/* JavaScriptが無効の場合の右の色 */
.rightcolor {
background: #F22E83;
}
-->
</style>
</noscript>


noscriptタグ中のCSS部分には、JavaScriptが無効に設定されている場合に表示する色を設定してください。

更に改造すれば画像指定もできそうですね。

お疲れさまでした。
参考になりましたらソーシャルメディアで共有してくださいませ。
posted by こさめ
edit  re
この記事へのコメント

■ この記事へのトラックバック
カテゴリ
インターネット>ブラウザ・WEBメール(24)
インターネット>Firefoxアドオン、設定(15)
インターネット>Proxomitronフィルター(32)
インターネット>ブログ、WEBサービス(53)
インターネット>アフィリエイト・ポイントサイト(27)
インターネット>楽天、ポイントあれこれ(5)
インターネット>Windows最適設定(32)
インターネット>インターネット設定(17)
インターネット>デスクトップ改造・拡張(7)
インターネット>セキュリティソフト(6)
ブログカスタマイズ>カテゴリー、記事一覧系(38)
ブログカスタマイズ>jQuery(Script)文字系(23)
ブログカスタマイズ>CSS(Script)デザイン(28)
ブログカスタマイズ>ブログパーツ(7)
ブログカスタマイズ>携帯モバイル系(3)
ブログカスタマイズ>SEO・アクセスアップ(31)
マルチメディア>Brackets(5)
マルチメディア>画像系ソフト(6)
マルチメディア>DVD・動画プレイヤー(15)
マルチメディア>動画編集ソフト(6)
マルチメディア>音楽再生プレイヤー(16)
マルチメディア>ネットラジオ配信・編集(3)
マルチメディア>P2Pテレビソフト(4)
マルチメディア>おもしろ動画・感動動画(25)
デザイン>フリー素材 画像(5)
デザイン>HP・ブログ フリー素材(6)
デザイン>イラスト(非素材)(8)
デザイン>作詞作曲編曲MP3(5)
雑記>PC部品・音楽機材(7)
雑記>映画・アニメ・漫画・芸能(14)
雑記>どうでもいい雑学知識(6)
雑記>ゲーム(6)
雑記>スマホ・携帯電話(6)
雑記>カーナビ・ETC(3)
雑記>ネット銀行とか(2)
雑記>18禁?ちょいエロネタ(3)

 (C) 2006 - kosame All rights.