DesignWalker » random http://www.designwalker.com ロサンゼルスで働くウェブデザイナーの日記。 Wed, 29 Jun 2011 06:24:51 +0000 ja hourly 1 http://wordpress.org/?v=3.0 CSSのバックグラウンド画像をランダムに表示してみる http://www.designwalker.com/2006/12/random-css.html http://www.designwalker.com/2006/12/random-css.html#comments Wed, 20 Dec 2006 18:32:09 +0000 admin http://new.designwalker.com/2006/12/css%e3%81%ae%e3%83%90%e3%83%83%e3%82%af%e3%82%b0%e3%83%a9%e3%82%a6%e3%83%b3%e3%83%89%e7%94%bb%e5%83%8f%e3%82%92%e3%83%a9%e3%83%b3%e3%83%80%e3%83%a0%e3%81%ab%e8%a1%a8%e7%a4%ba%e3%81%97%e3%81%a6.html

CSSを使うようになって、画像はCSSのbackground-imageで画像を表示することが多くなりました。

例えば、ブログのヘッダー部分で表示しているバックグラウンド画像をランダムに表示できたら、
ブログ訪問者がアクセスするたびに画像を切り替えることができますよねぇ。。。

何度もアクセスしてくれるブログ訪問者さんにはブログの画像をコロコロと変えられるので、ブログ訪問者さんを飽きさせることもなくて便利やなぁ～。。。

なぁ～んて思ってたら、やっぱりございました。

↓この画像はアクセスするたびにコロコロと変わりますねん（１１種類用意しました。）

っちゅうわけで、今日は↑のようにCSSとphpでバックグラウンド画像をランダムに表示する方法をご紹介じゃ。

1. ここから、rotator.zipを保存してくださいな。

2. 保存したrotator.zipファイルを解凍したら、「rotator」っちゅうフォルダの中に「rotator.php」っちゅうファイルがあるはずです。そのファイルをフォルダごと、サーバーにアップロード。

3. アップロードしたrotatorフォルダの中にjpg画像、gif画像、png画像、とにかくランダムに表示したい画像も一緒にほり込んでくださいな。

4. CSS（スタイルシート）に以下のスタイルを追加。

5. 最後に表示したいhtmlに

<div id=”rotator”></div>

って書けば、そこにバックグラウンド画像がランダムに表示されるはずでございます。


]]> http://www.designwalker.com/2006/12/random-css.html/feed 8