Feb
24
2009

CSSの背景画像をランダム表示

5:47 am 273 views

これで時々背景画像が切り替わるようになります。
WP Super Cache プラグインを使っているので、アクセスのたびにランダム表示にはならないかもしれません。
いつもアクセスしてくれる方(ほとんどいないと思いますが・・)へのCS(顧客満足度)アップの一環です。
とりあえず、美瑛の丘と片瀬西浜の夕陽の2種類のみですが、撮りためた写真のなかからクールなものを選んで、もう少し画像を増やそうかと思います。
応用すれば、ランダムではなく、ページやカテゴリーごとに背景を切り替えるとか、色々できそうです。

1.bgrdm0.css,bgrdm1.css を作っておく
たとえば、こんな感じです。

/* random background css */
body {
        background: url(images/biei.jpg) no-repeat 0 0 #fff;
        background-attachment:fixed;
        background-position:top center;
}

2.header.php に以下を追加

<script type="text/javascript">
var cssurl= new Array();
cssurl[0]="<?php bloginfo('stylesheet_directory'); ?>/bgrdm0.css";
cssurl[1]="<?php bloginfo('stylesheet_directory'); ?>/bgrdm1.css";
n= Math.floor(Math.random()*cssurl.length);
document.write("<link rel='stylesheet' type='text/css' href='"+cssurl[n]+"'>");
</script>
この記事についてTwitterでつぶやく

Trackback URL

No Comments »

RSS feed for comments on this post. TrackBack URL

Leave a comment

You must be logged in to post a comment.

TheBuckmaker WordPress Themes Webhost rating, InterTech Blog