CSSの背景をランダムに表示する方法

PHP + CSS のテクニック

こんにちは、さち です！

今回は、CSS の背景などで画像をランダムに表示する方法をご紹介します。

CSS の背景をランダム表示するには
PHP や JavaScript を使う方法などたくさんの方法がありますが
今回は、訪問者のPC環境に依存しない方法で比較的簡単に導入できる
PHP を使った方法を紹介しようと思います。

では、さっそくその方法を見ていきましょう！

1. PHP を使えるサーバを用意しよう！

すでに自分のホームページを持っている人は
そのホームページ用にレンタルしているサーバがあるのではないかと思います。
自作の自宅サーバで運営している人もいるかもしれません。

PHP を使うには
まず、そのサーバ上で PHP で動く環境が整っている必要があります。

最近のレンタルサーバでは
すでに PHP が動く環境が整えられていることが多いですので
自分がレンタルしているサーバの会社のホームページで調べてみましょう。

無料レンタルサーバでは PHP が対応していないこともあるようですが
有料レンタルサーバのほとんどは PHP の環境はすでに整えられていることが多いようです。

2. PHP のプログラムを準備しよう

ランダムに画像を表示する PHP のプログラムはネット上で無料配布されています。

PHP の勉強をすれば自分でそのようなプログラムを作ることもできますが
画像の表示をランダムにしたいだけなら
他の方が作成してくれたPHPファイルを使用させてもらった方がよいですね＾＾

例えば、下記サイト様で配布されていますのでぜひ活用させてもらいましょう！
（どちらを選ぶかで少し手順が違うので自分に合う方法を選択してください）

　　　→ ランダム画像表示 PHP （Love Delusion 様） … （1）
　　　→ phpで画像をランダムに表示させる （chocobit 様） … （2）

それぞれのサイト様に設定の方法も書かれていますので
それを参考に作業をすすめて行って下さい。

（2）の方ではパスが必要となりますが
知らなきゃ絶対損するマル秘ワザ別館 で使っているXREAサーバでは次のように設定します。

設定が終わったらそれらのファイルをサーバにアップロードしましょう。

3. 背景を指定する

実際にCSSにランダム表示する背景を設定するには
画像へのURLを記述する代わりに
先ほどアップロードしたPHPファイルへのURLを記述すればOKです。

また、HTMLで使用することも出来るので
次のように IMAGEタグ に記述することもできます。

さらに、友人から教えてもらった裏ワザなのですが
全く同じ画像を複数枚用意することで
それぞれの画像が表示される確率を調整することもできます。