• ベストアンサー

cssで画像をランダムに表示させる方法について

テンプレートを無料で配布しているサイトから、テンプレートをDLしてきたのですが 背景画像をランダムに表示させるところが分かりません。 使用したいのは、以下URLサイトの０９番です。 http://moi.poo.gs/templates.html ｃｓｓに詳しい方、宜しければ教えていただけると有り難いです。

質問者が選んだベストアンサー

  • ベストアンサー
  • torayoshi
  • ベストアンサー率62% (910/1449)
回答No.1

どこが分からないのか具体的に書かないと誰も分かりません。 背景画像のランダム表示はCSSではなくJavaScriptでやっています。 このテンプレートで使われてる背景画像の名前はbg1.jpg～bg3.jpgで、 「img」というディレクトリに入ってます。 あなたが用意した画像の名前をbg1.jpg～bg3.jpgにして「img」というディレクトリにコピーすれば上書きされるので、そしたらちゃんとランダム表示されると思いますよ。

osie_te_ne
質問者

お礼

回答ありがとうございます。 具体的に書いていなく、分かりずらい文章ですみませんでした。 色々試しているうちに解決致しました。 お手数おかけしましたが、ありがとうございました。

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • cssで背景画像をランダム表示する

    現在cssで背景画像をランダム表示するよう指示をしたいです。 テンプレート配布サイトからDLしたcssには以下のように指定されています。 ---- .menu{ float :left; background-image:url(img/menu_01.png); background-repeat:no-repeat; width :270px ---- このようなcss表記から画像をランダム表示に指定するには どのように加筆、修正をしたらよいのか教えて頂けますでしょうか。 似たような質問もたくさんされていたのでとても申し訳ないのですが、自力で色々試してみたものの、 どうしてもわからなかったので、お力を貸して頂ければ幸いです。 よろしくお願い致します。

    • 締切済み
    • CSS
  • CSSで背景画像をランダムに表示させたいのですが

    CSSで背景画像をランダムに表示させたいのですが、簡単な対応方法などありますでしょうか？ 背景のランダム表示としてbody部分をjavascriptで背景のランダム処理はたくさんあるのですが、今回はスタイルシートでbodyではなく、サイト内のいち部分のクラス要素の背景をランダムに表示させたいと思っています。 <div class="main"> ここにコンテンツがあって、このmainのクラス要素の背景をランダムに変えたいです。 </div> スタイルシートの方では現在は .main { float:left; background-image:url(/image/top_bg01.jpg); background-repeat:no-repeat; min-width:736px; height:auto; border-right:1px solid #000000; } としており、このtop_bg01.jpgの部分の画像を top_bg01.jpg top_bg02.jpg top_bg03.jpg top_bg04.jpg top_bg05.jpg とランダムに表示させたいのですが、対応方法が分からずに困っています。 http://www.designwalker.com/2006/12/random-css.html はためしてみましたが、PHPがうまく対応できずに断念してしまいました。 どなた様か宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • 画像をランダム表示させたい

    画像を5枚横並びにランダム表示させたいです。 XHTMLとCSSでサイトを制作しようと考えています。 イメージフォルダに複数の画像データを格納、そこからアクセス毎にランダム（同じものが表示されないよう）表示。 画像をクリックすると指定したページにリンク。 下記URLページ右の真ん中あたりにある感じのものです。 http://picpi.net/main.html 方法としてはCGI、Javascriptなどいろいろあると思うのですが、まったくわからない人間です。 参考になるサイト、もしくは答えまで出して頂けると大変助かります。 以下、参考までにサーバ環境です。 perl5.8.、Ruby1.8.、Python2.4.、PHP4.4.、PHP5.1.、MySQL4.0.25、ColdFusion　が使えるそうです。

  • CSSのテンプレート

    HPを作ろうと思い、無料で配布されているCSSを使ったHPテンプレートを使いたいと思っています。しかし、全く正常に表示されずに困っています。 手順もファイルをダウンロードして解凍し、HTMLファイル（index.htmlなど）をブラウザで開いて、HTMLソースを表示し、それをそのままコピーペーストしています。しかし、HPに表示されるのは白の背景に文字だけで構成されたものになり、全くデザインされていないHPに仕上がります…。色々なサイトで配布されているCSSのテンプレートを同じ方法でトライしてみましたが結果は同じでした。 CSSのことで色々と調べてみましたが納得の行く回答を見つけることができずに困っています…。どうしたらきちんと表示されるようになるのでしょうか？どなたか教えてください。よろしくお願いします。

  • 画像をランダムで切り替える

    以下の携帯サイト（18禁です）についての質問なのですが http://newm.tv/ ＴＯＰの画像がランダムに切り替わっているのですが どのように切り替えているのでしょうか？？ ソースを調べたところ <div class="logo"> <img alt="logo" src="/img/logoimage/x.jpg" width="220" height="70"></div> で画像を呼び出しているようなのでＣＳＳを みたのですが"logo"のCSSには .logo{background-color:#000;} としか記述されていなくて分かりませんでした。 どなたかどのように携帯サイトで画像をランダムに切り替えることが できるのかご存知の方がいましたらご教示宜しくお願いします<(_ _)>

    • ベストアンサー
    • PHP
  • テーブルの背景画像をランダムに。

    こんばんは。 よく、背景画像がランダムで出てくるのってありますよね。 あれをテーブルの背景では出来ないでしょうか。 <TABLE background="画像のURL">の背景を ランダムにするやつです。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • ブログトップにランダムで画像を表示させる方法

    ブログのトップに画像をランダムで表示させたいと思っています。 テンプレートはfc2の共有プラグインのsimple04を使っています。 <script language=”JavaScript”> var images = new Array(); /* 画像URLを表示させたい分だけ書き込むこと */ images[0] = “”; images[1] = “”; images[2] = “”; images[3] = “”; images[4] = “”; images[5] = “”; images[6] = “”; var rnd = Math.floor((Math.random() * 100)) % images.length; document.write(‘<img src=’,images[rnd],’ border=”0″>’); </script> 自分で調べてみてこのタグを使えばいいことはわかったのですが、 HTMLの所に貼るのかCSSのところに貼るのかわかりません。 回答よろしくお願いします。

  • 配布されたテンプレートでの画像の差し替え

    どうしても分からなく、ここに質問させていただきました。 創作サイトを作っている者です。 サイトで配布されていたテンプレートを使い、そのテンプレート内の画像を差し替えたいのですが、よく分からなくて困っています。 CSSを変更すれば～とだけ説明があったので「background:url('○○')」の部分を差し替えたい画像名に変更したのですが、html表示の方で画像の部分だけ真っ白になってしまいます。 画像の保存先、サイズ等は間違っていません。 何が原因で差し替えられないのでしょうか？ また、CSSを知るにあたりお勧めのサイトがあれば、是非教えていただきたいです。

    • 締切済み
    • CSS
  • ＣＳＳで背景をランダム表示させたい

    ＣＳＳ初心者です。 ３分割のフレームのサイトで、mainページの背景をCSSで指定しているのですが それをランダムに５種類の画像を表示出来るようにしたいのですが 何度やってもやり方が分からず教えてもらえませんでしょうか・・・ PHPは対応していないサーバーなので無理でした。 http://okwave.jp/qa/q4805263.htmlこちらも試してみましたが出来ませんでした・・・ どうかご教授願います。 ｓｔｙｌｅ.CSSから抜粋↓ /* デザイン全般設定 */ .ta1{border-bottom:1px solid #cccccc;background-color:#eeeeee;} .ta2{background:url(bg02.gif) repeat-y 260px 0px;} .ta3{background:url(bg01.jpg) repeat-y 95% 0%;} #enter_page{overflow:hidden;} #main_page{background:url(img/hptop1109.jpg) no-repeat 100% 50% fixed;}←ここでmainページの背景を指定しています。 #menu_page{border-bottom:1px solid #cccccc;background-color:#eeeeee;} #left_page{background:url(bg02.gif) repeat-y 260px 0px fixed;} .back{font-size:17px;text-align:right;background:url(back.gif) no-repeat 160px 90%;margin:20px 0px 0px 0px;padding:15px 20px 5px 0px;} .back a:hover{text-decoration:underline;} #main_page{background:url(img/hptop1109.jpg) no-repeat 100% 50% fixed;} </style> <script type="text/javascript"> window.onload = function(){ //var url = "a.jpg,b.jpg,c.jpg".split(','); var url=[]; url[0] = 'top_bg01.jpg'; url[1] = 'top_bg02.jpg'; url[2] = 'top_bg03.jpg'; var n = Math.floor(Math.random() * url.length); var elm = document.getElementById('main'); elm.style.backgroundImage = 'url(/image/' + url[n] + ')'; } </script> ↑このように、#main_page{background～～の後ろに、参考サイトのをコピペしても何も表示されず背景は白のままになってしまいました。 色々頑張ってみたのですが分からないので、どなたか教えてくれませんか・・・ 他に必要なソースがあれば追記いたします。 どうぞよろしくお願いいたします。

  • CSSで画像表示のやり方を教えてください

    初めまして、ＣＳＳを少し勉強中なんですが、文字の背景に画像を張りたいんですがうまくいかないので教えていただけないでしょうか？ 今の状態はこんな感じです。　間違っていますか？ ＨＴＭＬファイル <TD colspan="3" width="609"><div class="menu1">aaaaaaaa</div></TD> CSSファイル div.menu1 { background-img : url(object.gif); } この二つのファイルを使っているんですが画像が表示されなくて困ってます。教えていただけるとうれしいです。 ご迷惑おかけしますがよろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する