CSS（スタイルシート）ごとランダムに読み込む

admin — Thu, 21 Dec 2006 18:36:46 +0000

先日ご紹介しました、「CSSのバックグラウンド画像をランダムに表示してみる」では、個々のスタイルの背景画像をランダムに表示することが可能になりました。

っちゅうことは。。。CSSを何種類か用意しておいて、読み込んでるCSS（スタイルシート）を丸ごとランダムに読み込むことができたら。。。

こりゃぁ、アクセスされるたびにサイトのデザインをガラっと変えることも可能なのでは？

っと。。。思ってしまいまして。。探してみたら。。。やっぱりございました。

とりあえず、サンプルはこちらからじゃ↓

クリックでサンプルページ開きますねん。

このサンプルページではどんなことをやってるかといいますと。。。

htmlはそのままで、ページが読み込まれるたびに、あらかじめ用意しておいた数種類のCSS（スタイルシートを）をJavaScriptでランダムに読み込んでおります。

っちゅうわけで、アクセスされるたびにサイトのデザインをガラっと変えることに成功！

ではでは、肝心のやり方のご説明。

1. 以下のコードをコピーして、適当に名前をつけてjsで保存。（わたくしはrandom-css.jsと名前付けました。）

<br />
function get_randomCssNum()<br />
{<br />
var ranCssNum= Math.floor(Math.random()*3);<br />
//var ranCssNum= Math.floor(Math.random()*Number of CSS you Have);<br />
return ranCssNum;<br />
}</p>
<p>function getaCss()<br />
{<br />
var whichCss=get_randomCssNum();</p>
<p>var cssName=new Array(3)<br />
// var cssName=new Array(Number of CSS you Have)<br />
cssName[0]=”
<link rel='stylesheet' type='text/css' href='style1.css'>“;<br />
cssName[1]=”
<link rel='stylesheet' type='text/css' href='style2.css'>“;<br />
cssName[2]=”
<link rel='stylesheet' type='text/css' href='style3.css'>“;<br />
//I am using 3 CSS files in this example. you can add or remove <br />
//for Add more CSS just add line like this<br />
//cssName[Next Number]=”
<link rel='stylesheet' type='text/css' href='CSS FILE URL'>“;<br />
return cssName[whichCss]<br />
}<br />
document.write(getaCss());<br />

2. で、３行目の

var ranCssNum= Math.floor(Math.random()*3);

の数字を用意するスタイルシートの数に書き換えます。

同様に１２行目の

var cssName=new Array(3)

の数字も用意するスタイルシートの数に書き換えます。

で、１４行目からの

cssName[0]=”

DesignWalker » ランダム

CSS（スタイルシート）ごとランダムに読み込む