パソコン/プログラム編

Blogger用Vaster2でJavaScriptを使ってランダム表示を楽しんでみる

以前、『Blogger用Vaster2を簡単にカスタマイズしてみる』で色々試してみました。
最近、少しだけ私のレベルも上がってきたので、個性的なブログページにするためにJavaScriptを利用してみました。


今回試したのはダブルレクタングル表示でアクセスするたびに表示をランダムに変えてみます。勿論、スマホでは半分だけ表示になります。

表示される画像は今回は以下に表示されてる画像のURLを利用しています。




ここではコードは連続的にHTML編集で挿入できるように「CSS」部分を<style>タグで挟んでいます。

<style type="text/css">
.ad-entry-bottom {width:610; padding:0px !important; }
.ad_left {float:left; width:300px;}
.ad_right {float:right; width:300px;}

@media screen and (max-width: 540px) { 
.ad_right {display:none;}
}
</style>


次にJavaScriptでアクセス毎にランダムで表示するデータを制御しています。
配列にデータを設定するときにはシングルクォーテーション「’」、 ダブルクォーテーション「”」の使い方に注意が必要です。例えば

　[‘<img src=“url“>‘]　
　[“<img src=‘url‘>“]　

OKですが

　[‘<img src=‘url‘>‘]　

は使えません。特に広告タグはダブルクォーテーション「”」がほとんどなので、広告タグを囲むときはシングルクォーテーション「’」を使います。でも最近はJavaScriptで広告タグが供給されるようなので上手く動きませんが．．．

また、クォーテーションで囲むときは絶対に改行等は追加しないで下さい。改行など追加すると上手く動作しません。

<script type="text/javascript">
var jpg_lists=[
"<img src='https://1.bp.blogspot.com/.../chart1.jpg'>",
"<img src='https://4.bp.blogspot.com/.../chart2.jpg'>",
"<img src='https://1.bp.blogspot.com/.../chart3.jpg'>",
"<img src='https://2.bp.blogspot.com/.../chart4.jpg'>"
];
  
function rndSet(){
  var jNo = Math.floor(Math.random() * jpg_lists.length);
  document.write(jpg_lists[jNo]);
}
</script>





ここからは普通のHTMLでの表記です。

<!-- ダブルレクタングル -->
<div class="ad-entry-bottom" style="margin-bottom:10px;">
<div class="ad_left">

<!-- 左側 表示コード-->
<script type="text/javascript">rndSet();</script>
</div>
<div class="ad_right">
<!-- 右側表示コード モバイルでは非表示-->
<script type="text/javascript">rndSet();</script>
</div>
</div>


もし別ファイルとして準備できるなら

拡張子cssとして以下の内容を

.ad-entry-bottom {width:610; padding:0px !important; }
.ad_left {float:left; width:300px;}
.ad_right {float:right; width:300px;}

@media screen and (max-width: 540px) { 
.ad_right {display:none;}
}

拡張子jsとして以下の内容

var jpg_lists=[

"<img src='https://1.bp.blogspot.com/.../chart1.jpg'>",
"<img src='https://4.bp.blogspot.com/.../chart2.jpg'>",
"<img src='https://1.bp.blogspot.com/.../chart3.jpg'>",
"<img src='https://2.bp.blogspot.com/.../chart4.jpg'>"

];

function rndSet(){
  var jNo = Math.floor(Math.random() * jpg_lists.length);
  document.write(jpg_lists[jNo]);
}

この2個のファイルを何処かのサーバーに置いてHTMLから外部ファイルとして読込んでも同様に動作します。ファイル名が「aaa」ならHTMLファイルには以下のように記入しておきます。
.
<link rel="stylesheet" href="aaa.css">
<script language="JavaScript" src="aaa.js"></script>

何とか、当初の目的は達成したのですが、結果的にVaster2でなくても動作します(笑)
それに、HTML5では「document.write」構文は推奨されていない事がわかってしまいました。

そこで『Blogger用Vaster2でバーナーなどを自動的にランダム表示させてみる』ではHTML5推奨の構文で挿入してみました。