このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなきゃ損するPC情報を分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • AdBlock:サイト表示の不具合,広告の過剰ブロックを解消する (10/16)
  • LINE:特定の「トーク」を常にトップに表示させる (10/13)
  • Dropbox:25GBのファイルを新PCに高速同期してみた (10/11)
  • LINEモバイル:データ量がやたら余るのでプラン変更してみた (10/09)
  • ツイッター:PCウェブ版ツイッターで「夜間モード」を使ってみた (10/06)
  • 管理人より
    2200万アクセス突破しました。ありがとうございます。

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

    このエントリーをはてなブックマークに追加
    PHP + CSS のテクニック

    こんにちは、さち です!

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

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

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


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

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

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

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

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


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

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

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

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

       → ランダム画像表示 PHPLove Delusion 様) … (1)
       → phpで画像をランダムに表示させるchocobit 様) … (2)

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

    (2)の方ではパスが必要となりますが
    知らなきゃ絶対損するマル秘ワザ別館 で使っているXREAサーバでは次のように設定します。
    $folder = '/virtual/ユーザ名/public_html/.../random/';

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


    3. 背景を指定する

    実際にCSSにランダム表示する背景を設定するには
    画像へのURLを記述する代わりに
    先ほどアップロードしたPHPファイルへのURLを記述すればOKです。
    例:
    background-image: url(http://sachi-web.com/xxxxxx/rotate.php);

    また、HTMLで使用することも出来るので
    次のように IMAGEタグ に記述することもできます。
    例:
    <img src="http://sachi-web.com/xxxxxx/rotate.php" alt="xxxx" title="xxxx" />

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








    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2017 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ