CSSのバックグラウンド画像をランダムに表示してみる
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>
って書けば、そこにバックグラウンド画像がランダムに表示されるはずでございます。
|
|
|
4月 12th, 2007 at 4:55 PM
[php][css]PHPでCSSで背景をランダム表示に
http://www.designwalker.com/2006/12/random-css.html ここのサイトを参考に作成できた。 JavaScr…
7月 6th, 2007 at 11:41 AM
はじめまして、このようなことを質問するのは筋違いなのかもしれないのですが、どうしてもあなたが書いていらっしゃるＣＳＳを使用しバックグラウンドを変更することをしたいのですが、なかなか上手くいきません。
rotator.zipを保存し、その中に写真を入れてフォルダごとアップしました。
次にＣＳＳなのですが、これのやり方がイマイチわかりません。ＣＳＳ（ＴＸＴ）にタイトルをつけてそのまま同じフォルダにいれてアップしましたが、それではダメなのでしょうか？
そのまま埋め込みにして試しても見ましたが初心者なのでよくわかっていません。
お手数ですが、よろしければ教えていただけないでしょうか？
よろしくお願い致します。
7月 6th, 2007 at 4:40 PM
鎌田 綾乃さん
コメントどうもありがとうございます。。。実際にコーディングされたファイルを見せていただければ、分かるかと思うのですが・・・
7月 7th, 2007 at 4:36 PM
お返事くださりありがとうございます。投稿するというボタンをクリックしても何も表示されなかったので、できてないかと思っていたのですごく嬉しいです。
素朴な疑問で申し訳ないのですが、コーディングとはなんでしょうか？・・・・・
いやちょっとあまりに初心者できっとあなたに面倒がかかるだけな気がしてかなり気が引けます。
わざわざ返事くださり本当にありがとうございました。
もう少し試行錯誤やってみますね。
7月 12th, 2007 at 4:53 PM
鎌田 綾乃さん
コメントいただきまして、どうもありがとうございました。コーディングとは・・・実際にコードを書かれたhtmlファイルやphpファイルのことです。がんばってみてくださいね。。今後とも宜しくお願いいたします！
9月 6th, 2008 at 8:22 AM
はじめまして。この方法で画像をランダムに表示することができました！ありがとうございました。
ただ、background-position を top left にしても、なぜか
左に２px、上から３pxほど隙間が空いてしまいます。どうやったらぴったり左上にできるか教えていただけませんか？よろしくお願いします。
9月 6th, 2008 at 8:31 AM
すいません。なんとか自分で解決しました！
有難うございます。
12月 19th, 2008 at 7:10 PM
[...] このblogは右上に背景画像を表示させてるんだけども（モノトーンのやつね）、これをいくつかの画像の中からランダムに表示できたらいいなーとふと思い、探したらありましたrotator.php。 [...]