理由は「DOMへの影響やネットワーク遅延が懸念されたりデバッグ時のボトルネック」のが原因のようです。
そこで「document.write」→「document.getElementById」に置き換えます。元々、document.writeは同期処理的に動くようでイメージ通りに動いてくれなかったこともあり勉強も兼ねて変更してみました。
その前にCSS部分も少しだけ手直ししています。ここではHTML本文に直接、挿入しているので<style>タグで挟んでいます。
<style>
@charset "utf-8";
.ad-entry-bottom {width:680;padding:0px !important;margin-bottom:10px; text-align: center; }
.ad_left {display:inline-block; width:300px;}
.ad_right {display:inline-block; width:300px;}
@media screen and (max-width: 540px) {
.ad-entry-bottom {width:340;}
.ad_right {display:none;}
}
</style>
従来は下記のように<script>タグを挿入してから<div>タグでHTMLで表示位置指定していました。
<script type="text/javascript">
var lists=[
'<img src="Chart1.jpg">',
'<img src="Chart2.jpg">',
'<img src="Chart3.jpg">'
];
function rndSet(){
var rNo = Math.floor(Math.random() * lists.length);
document.write(lists[rNo]);
}
</script>
<div class="ad-entry-bottom" >
<div class="ad_left">
<script type="text/javascript">rndSet();</script>
</div>
<div class="ad_right">
<script type="text/javascript">rndSet();</script>
</div>
</div>
今回は<div>タグでHTML本文に表示位置を指定してから<script>タグの手順で動作させます。document.writeと違ってHTML要素の後にスクリプトを配置しないと動きません。
以下の記述で同じ動作をします。
<div class="ad-entry-bottom" >
<div id="sample1" class="ad_left"></div>
<div id="sample2" class="ad_right"></div>
</div>
<script type="text/javascript">
var lists=[
'<img src="Chart1.jpg">',
'<img src="Chart2.jpg">',
'<img src="Chart3.jpg">'
];
rndSet1();
function rndSet1() {
var rNo = Math.floor(Math.random() * lists.length);
document.getElementById('sample1').innerHTML =lists[rNo];
var rNo = Math.floor(Math.random() * lists.length);
document.getElementById('sample2').innerHTML =lists[rNo];
}
</script>
これで横一列に2画面がランダムに変わり、モバイル時は1画面表示になります。
しかし画面はアクセス時しか変わらないため、ちょっとさびしい。そこでアクセス時以外でも一定間隔で画像が変化するようにします。今回の設定では3秒間隔でランダムに表示が変わります。
function rndSet1() {
var rNo = Math.floor(Math.random() * lists.length);
document.getElementById('sample1').innerHTML =lists[rNo];
var rNo = Math.floor(Math.random() * lists.length);
document.getElementById('sample2').innerHTML =lists[rNo];
setTimeout("rndSet1()",3000);
}
少しだけ私のレベルもアップしてきたので、今度は応用として広告などのバーナーが自動で変わるように設定してみました。
やることは以下のリストにバナー情報をデータ化して貼り付けるだけです。ただし、下記のようにjavascriptタグを含んだ形で供給された場合は、当たり前なんでしょうが駄目(笑)
<script type="text/javascript">
var lists=[
'<script type="text/javascript">～～～</script>',
'<script type="text/javascript">～～～</script>',
'<script type="text/javascript">～～～</script>'
];
．．．．．．
</script> ←自動的に消える
bloggerのHTML「編集」画面で挿入し「作成」画面に戻すと、最後の</script>タグが自動的に消されてしまい、正常に動作しません。
