フリースペースにバナーをランダムに表示させたい

  • # ホームページ制作について
  • Eye33
  • Userやっちゃん
  • Calender2020/09/15

解決
済み

ちなみにバナーを二段にする時はどのようにすれば良いのでしょうか?
教えてくださいばかりで申し訳ありません。
下記のようにしたのですがどうもうまくいかなくて...

<div class="random"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="random"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="random"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="random"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="random"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>

<style type="text/css">
<!--
.random {display: none;}
-->
</style>

<script type="text/javascript">
var target = document.getElementsByClassName("random");

var rNo = Math.floor(Math.random() * target.length);

target[rNo].style.display = "block";
</script>
<br>
<div class="random"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="random"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="random"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="random"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="random"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>

<style type="text/css">
<!--
.random {display: none;}
-->
</style>

<script type="text/javascript">
var target = document.getElementsByClassName("random");

var rNo = Math.floor(Math.random() * target.length);

target[rNo].style.display = "block";
</script>

みんなの回答を見る

  • User御子柴
  • Calender2020-09-16 20:02:37

バナーや画像をいくつかの中からランダムで表示させられるといいですよね。
ただ、バナーや画像をランダムで表示させるにはHTMLとCSSだけではできず、Javascriptで設定する必要があります。
試しにフリースペースにHTMLモードで画像をランダム表示するようにJavascriptを入力してみたところ正常に動作したので、これでできると思います。
HTMLモードで入力した内容は以下のとおりです。
※5枚のバナーの中からランダムで1枚が表示されます。

--------------ここから--------------
<div class="random"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="random"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="random"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="random"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="random"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>

<style type="text/css">
<!--
.random {display: none;}
-->
</style>

<script type="text/javascript">
var target = document.getElementsByClassName("random");

var rNo = Math.floor(Math.random() * target.length);

target[rNo].style.display = "block";
</script>
--------------ここまで--------------

「href="https://zzz.com"」のURL部分をバナーのリンク先URLに、
<img src="xxx.jpg" alt="" >をファイルアップロード機能でアップロードした画像の埋め込みタグに変更すれば、やっちゃんさんがやりたい表示になると思います。

記事を編集する
  • Userやっちゃん
  • Calender2020-09-17 12:07:20

早速のお返事ありがとうございました。
やってみたら成功しました!
素人なのでどうやってもうまくいかず、悩んでおりました。
本当にありがとうございました!

記事を編集する
  • Userhiguita
  • Calender2020-09-17 15:43:02

横から失礼します。
あまりきれいな書き方ではなく、3枚表示したくなった場合などに修正の手間がかかったりするのですが、御子柴さんが回答してくれている内容を活かして、複数のバナーの中から2枚の画像を表示させたい場合、以下のように記述すると可能です。
※ページを開いたり更新するごとに2枚のランダムバナーが表示されます。

ただし、この書き方だと「class="banner"」のdivと「class="banner2"」のdivに同じバナーがあった場合、2枚の同じバナーが表示されることがあります。
そのため、例えばバナーが全部で8枚ある場合は1枚目から4枚目を「class="banner"」に、5枚目から8枚目を「class="banner2"」に設定するといいかと思います。

記事を編集する
  • Userhiguita
  • Calender2020-09-17 15:43:24

-----------------ここから-----------------
<div class="banner"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="banner"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="banner"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="banner"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="banner"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<br>
<div class="banner2"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="banner2"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="banner2"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="banner2"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>
<div class="banner2"><a href="https://zzz.com"><img src="xxx.jpg" alt="" ></a></div>

<style type="text/css">
<!--
.banner {display: none;}
-->
<!--
.banner2 {display: none;}
-->
</style>

<script type="text/javascript">
var target = document.getElementsByClassName("banner");

var rNo = Math.floor(Math.random() * target.length);

target[rNo].style.display = "block";

var target = document.getElementsByClassName("banner2");

var rNo = Math.floor(Math.random() * target.length);

target[rNo].style.display = "block";
</script>
-----------------ここまで-----------------

記事を編集する
  • Userやっちゃん
  • Calender2020-09-18 10:34:47

ありがとうございます!
思い通りに表示できました。
お二人のスキルと優しさにただただ感謝するのみです!
本当にありがとうございました。
またよろしくお願いいたします。

記事を編集する
次のページ