パソコン/プログラム編

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

JavaScriptを含んだブロックをランダムに切り替えるのは前回、『Blogger用Vaster2でバーナーなどを自動的にランダム表示させてみる』では失敗してしまいました。

考え方を変えて<div>～～</div>で囲んだ部分をCSSのdisplayで「none」⇔「inline-block」で表示、非表示で変えれば動作するのではないかと思ってCSS制御で対応してみました。

CSS部分

HTML本文に挿入する場合は<style>～～</style>で囲んで使用します。初期値は全部が非表示設定で、アクセス毎に選ばれた部分だけ表示させます。モバイルのときは左側は常に非表示になります。

@charset "utf-8";
.ad-entry-bottom {width:680;padding:0px !important;margin-bottom:10px; text-align: center;  }

.ad_left1 {display:none; width:300px;}
.ad_left2 {display:none; width:300px;}
.ad_left3 {display:none; width:300px;}
.ad_left4 {display:none; width:300px;}
.ad_right1 {display:none; width:300px;}
.ad_right2 {display:none; width:300px;}
.ad_right3 {display:none; width:300px;}
.ad_right4 {display:none; width:300px;}

.display1 {display:inline-block;}
.display2 {display:inline-block;}

/* モバイル画面用の設定 */
@media screen and (max-width: 540px) {
.ad-entry-bottom {width:340;}
.display2 {display:none;}
}

HTML本体

流石に最初全部書いてから「非表示」にする必要があるので大変です(笑)


<div class="ad-entry-bottom" >

  <div  class="ad_left1"><img src="Chart1.jpg"></div>
  <div  class="ad_left2"><img src="Chart2.jpg"></div>
  <div  class="ad_left3"><img src="Chart3.jpg"></div>
  <div  class="ad_left4"><img src="Chart4.jpg"></div>
  <div  class="ad_right1"><img src="Chart1.jpg"></div>
  <div  class="ad_right2"><img src="Chart2.jpg"></div>
  <div  class="ad_right3"><img src="Chart3.jpg"></div>
  <div  class="ad_right4"><img src="Chart4.jpg"></div>

</div>

JavaScript部分

ここも力ずくでかこうと思ったのですが、かなり大掛かりになりそうだったので「jQuery」のライブラリを利用させてもらいました。

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

$(function () {
    var num = Math.ceil(4 * Math.random());
    $('div.ad_left'+num).addClass('display1');
    var num = Math.ceil(4 * Math.random());
    $('div.ad_right'+num).addClass('display2');           
});

</script>

CSS制御でも同様にランダムに表示させる事ができましたが、結構プログラムが長くなってしまいました。もっとスマートになりそうですが．．．



しかしここで一つ困ったことがわかりました。CSSの「display:none」問題です！！

CSSを利用して一時的に不要な要素を非表示する行為は「隠しコンテンツ」や「クローキング」とみなされGoogleの評価を下げる事があるようです。つまり検索順位が悪くなる事に繋がります。

但し、モバイル表示のレスポンシブル表示のための「display:none」は問題ないようですが．．．