広告をカルーセルにしてみた話

今日はちょっぴりこのホームページのデザインなどを修正していた
サイドバーの幅が思った以上に微妙(172pxだった)のでいい感じの幅に修正
ついでに内容を精査していたが、広告が微妙に長い。
TOPページもそうだけれども記事をそんなに書かないのでフッターの存在が薄くなる。
AmazonとGoogle AdSenceここにしかないのでどちらも捨てがたい！
そんなおり思い出したのがカルーセル！
画像などでおなじみのパラパラ表示が切り替わるやつっすわ。
古い記事ですが書いております。 : カルーセル・カルーセル-wordpressでカルーセル(2016/01/23/)
さっそくソースを書くっす。
wordpressを利用の方はウィジェットでTextをコピペくださいな
div id=”cm_slider”　内容のdivの内容を変更すれば何個でもパラパラできますよ

<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.5.9/slick-theme.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.3.0.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<script type="text/javascript">
$(function() {
$('#cm_slider2').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  dots: false,
});
});
</script>
<div id="cm_slider2">
<!-- for Amazon -->
<div><iframe src="//rcm-fe.amazon-adsystem.com/e/cm?t=mmppwataru01-22&o=9&p=14&l=ur1&category=kindlerotate&f=ifr" width="160" height="600" scrolling="no" border="0" marginwidth="0" style="border:none;max-width:800px;max-height:600px;" frameborder="0"></iframe>
</div>
<div>
<!-- for Google Ads -->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- SideBar -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-3124310808261378"
     data-ad-slot="8977755842"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</div>

動作の実例:サイドバーの下を参考にしてね

※　二つ表示したらなぜか動かなかったので
これで、デザインがスマートになった