上のように方法は見つかるのですが、上の方法だとscriptタグで作成されたもの（例えば広告やembedlyで作ったリンク）はBloggerだけかはわかりませんが、先に書いている＜/script＞で閉じられてしまって上手く表示されないようです。（多分scriptタグが入れ子になっているため）ランダムにバナー画像や商品情報を表示する[JavaScript]意外と簡単に実装できる！
ネットショップのページ等で何かをランダムに表示したいって場面は多いですよね。ページを表示する度に表示するバナーを変えたい。おすすめ商品として表示する商品をページが表示する度に切り替えたいなど活用したい場面は多いのではないでしょうか。
なので、いろいろ参考にしてランダム表示するためのHTMLソースを作成してみました。
サンプルソース
------------------------------------
<div class="test">TEST1</div>
<div class="test">TEST2</div>
<div class="test">TEST3</div>
<div class="test">TEST4</div>
<div class="test">TEST5</div>
<style type="text/css">
<!--
.test {display: none;}
-->
</style>
<script type="text/javascript">
var target = document.getElementsByClassName("test");
var rNo = Math.floor(Math.random() * target.length);
target[rNo].style.display = "block";
</script>
------------------------------------
上のソースコードは3つのブロックで構成されています。
薄赤の部分はランダム表示したいものを記述します。ランダム表示するものそれぞれをdivタグやpタグで囲んで共通のクラス名を与えておいてください。（サンプルだとクラス名は"test"）
緑の部分はランダム表示したいもの（クラス名”test”）をCSSですべて非表示に変更します。
水色の部分は0から共通のクラス名（”test”）を付与されたものの数の範囲で乱数を発生させ、1つを選び出して表示させます。
これでリロードごとにランダムに表示されるものが変わります。
下のサンプルデモは上のコードをそのまま使用しています。”TEST”のうしろの数字が1～5の中でランダムに変化するはずです。
この方法であればscriptタグが入れ子構造になるのを回避できます。
サンプルデモ
TEST1
TEST2
TEST3
TEST4
TEST5
あとからランダム表示したいものの数を変えたいときは薄赤の部分を編集するだけでOKです。
増やすときはクラス名を同じようにつけておくことを忘れないように。
参考
ランダムにバナー画像や商品情報を表示する[JavaScript]意外と簡単に実装できる！
ネットショップのページ等で何かをランダムに表示したいって場面は多いですよね。ページを表示する度に表示するバナーを変えたい。おすすめ商品として表示する商品をページが表示する度に切り替えたいなど活用したい場面は多いのではないでしょうか。