www.hbirds.net

AeroテーマのCSSで指定している背景画像をランダムに切り替える方法です。
今日現在、このサイトはこの手法で背景画像を切り替えています。
以下は簡単な要約になります。

Step 1　Style.cssの置き換え
　　　　　　background: url(images/default.jpg) no-repeat 0 0 #fff; を
　　　　　　background: url(background/random.php) no-repeat 0 0 #fff;
　　　　　　に置き換えて、アップロードします。

Step 2　random.php を入手
　　　　　　ma.tt　のページからコードをテキストエディタにコピーし、random.php という
　　　　　　名前をつけて保存し、aeros/backgroundフォルダにアップロードします。
　　　　　　backgroundフォルダは、あらかじめ作っておくこと。

Step 3　お好みの画像をaeros/backgroundフォルダにアップロード
　　　　　　aeros/images/default.jpg を参考に、画像の大きさや解像度を変えて
　　　　　　アップロードしてください。
　　　　　　ちなみに、default.jpg は 1626×1000 300dpi 60KB になっています。
　　　　　　画像はせめて 100KB 以下くらいにしておかないと、ちょっと重いでしょうね。
　　　　　　

Step 1: Change your CSS file

In the Aeros theme folder, open the style.css file, and look for the ‘background’ attribute. It’s at around line 51 in my version, if it’s not there search for this line: background: url(images/default.jpg) no-repeat 0 0 #fff; within your file.

Replace images/default.jpg with: background/random.php so that it looks like this:

background: url(background/random.php) no-repeat 0 0 #fff;

Save the style.css file, and ftp it back to your Aeros theme folder on your web server.

Step 2: Get, prepare and upload the random.php script

Next, you need to get the latest version of the random image script here. Copy the code into a new file in your text editor, and save it as random.php. You don’t need to change any of the code in the script for this to work.

Now, using your ftp client, navigate to the Aeros theme folder and in the root of that folder, create a directory called background. FTP your random.php file into that background folder.

Step 3: Provide the script with some images to choose from

Images should be saved into the /background/ folder, which will allow the random.php file to find them. Start by getting the default.jpg file from your existing /images/ folder and copying it across to the /background/ folder. Check your website. If you’ve done this right, your usual background image will show up. Now try adding some more images to the folder.

You can call them what you want, but you will want to ensure that they’re the same dimensions as the default.jpg image, and that they’re not too huge as this could slow down load speeds on slower internet connections.

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

１．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;
}

２.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>