DesignWalker RSS フィード

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

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

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

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

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

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

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

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

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

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

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

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

2. で、3行目の

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

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

同様に12行目の

var cssName=new Array(3)

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

で、14行目からの

cssName[0]=”

デザインblogランキング

コメント No Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



No Responses to “CSS(スタイルシート)ごとランダムに読み込む”

  1. むっほ Says:

    こんにちは!
    こちらのスクリプトが大変参考になり、本当に助かっています。
    感謝!

    初心者ながら作ってみたのですが、
    アクセス時間によって、いくつかのスタイルシートを固定し、その中でランダムにCSSを表示する、いわゆる、
    CSS random script by time

    を書いてみたのですが、
    文法上の誤りなどありますでしょうか?

    ぶしつけで恐縮ですが、
    軽く目を通していただけると嬉しいです。
    アクセス時間を4つの時間帯に分けています。

    myTime=(new Date()).getHours();
    if(myTime>=5 && myTime”;
    cssName[1]=”";
    cssName[2]=”";
    return cssName[whichCss]
    }
    document.write(getaCss());
    }else if(myTime>=10 && myTime=5 && myTime”;
    cssName[1]=”";
    cssName[2]=”";
    return cssName[whichCss]
    }
    document.write(getaCss());
    }else if(myTime>=17 && myTime”;
    cssName[1]=”";
    cssName[2]=”";
    return cssName[whichCss]
    }
    document.write(getaCss());
    }else if(myTime=23){
    function get_randomCssNum()
    {
    var ranCssNum= Math.floor(Math.random()*3);
    return ranCssNum;
    }

    function getaCss()
    {
    var whichCss=get_randomCssNum();
    var cssName=new Array(3)
    cssName[0]=”";
    cssName[1]=”";
    cssName[2]=”";
    return cssName[whichCss]
    }
    document.write(getaCss());
    }

  2. 管理人 Says:

    むっほさん
    時間帯で読み込むCSSを変更する。。。なかなか面白いアイデアですね!朝はさわやかに、昼は元気に、夜はムーディ(勝山ではありませんよ。。)なイメージでサイトを作ってみても面白いかもって。。文法上の誤りは。。。わたくしJSはぶっちゃけ分かりません。ごめんなさいです。。

  3. aeg Says:

    14行目からの…なんですか?
    途中で切れちゃっててわかりません><

この記事に対するコメントを残す




この記事のトラックバックURL


広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

ご質問ポスト

ご意見、ご感想などなど、管理人にお問い合わせはこちらのメール送信フォームからどうぞ~。

最近の記事

DesignWalkerのタネ

タグ・クラウド

月別アーカイブ