AdSense広告を好きな位置に移動させるjQueryコード備忘録

先日レクタングルを表示させる記事を書いて、その後追記をしていたのですが、あの方法だとスマホで見た時に縦に2つ並んでしまいAdSenseのポリシーに触れてしまう。と言うことで、レスポンシブデザインで、スマホ表示の時に広告を移動させるコードを追記しました。
今回の記事に関しては、その方法の応用と備忘録です。活用出来る方法として紹介するわけではないので、参考にする方や今回載せているコードをコピペする方は前回同様慎重かつ自己責任にてお願いします。
※口調がいつもと違うのは備忘録なのでご了承ください（笑）

ちなみにですが、AdSense以外でも使える方法なので、特定の要素を移動させたい人には参考になるかもです。他のコードでも出来ると思うのですが、この方法でもできるという程度のものですが。

前回の記事
www.dreamark.tokyo

前回の記事のおさらいと解消法

PC表示の時にレクタングルを記事下に2つ横並びさせる方法を書いた。しかしレスポンシブデザインを適用していると、下のイメージ画像のように、そのまま縦並びに移動してAdSenseの広告が2つ並んで表示されてしまう。

このままだとスマホの画面を覆い尽くしてしまいAdSenseのポリシーに触れてしまうので、特定の画面のサイズ時に、上下どちらかの広告を表示させなくさせるか、上下どちらかの広告を移動させるかで対処方を考えてみた。
表示を消してしまうのは簡単だが、広告が一つ減ってしまうのは微妙な所。
一つ消した分、別に忍ばせておいた広告を、特定のサイズの時のみ、CSSコードで表示させるのはNG。なので、広告を移動してしまおうと考えてみた。
以下が特定の画面サイズの時にAdSenseを移動させるコード。

<script type="text/javascript">
$(function(){
  $(window).on("DOMContentLoaded", function(){
    var adswitch=$(window).width();
      if(adswitch <=675){
        $('.ads-slot-02').insertAfter('.pager');
      }else
        $('.ads-slot-02').insertAfter('.ads-slot-01');
});
})(jQuery);
</script>

最初は「.on("load resize"」で書いてみたが、これだと画面が表示されて一度AdSenseが読み込まれ、移動した後にも読み込まれてしまうので多重読み込みがおきてしまう。
そこで「DOMContentLoaded」に変更。これだと骨格が読み込まれて、中身が読み込まれる前に移動をしてくれるので、見た目では広告の切り替えはおきてないのでOK（私個人の見解と判断）「resize」は表示された後に画面サイズが変更されても移動する。これはなくても良いかもしれないが、念のために。「resize」を入れると不具合が出るので書かない方がいい。

675pxよりも画面が小さい時にAdSenseの右側の広告が「.pager」ページャーの下に移動。それ意外の時は元の位置（広告１ .ads-slot-01の後）に戻る。イメージとしては下の画像のような感じ。実際の表示にはコメントを書くやパンくずリストが入る。

更に慎重な解消方法

ただ上の方法だと、上と下の広告がスクロール時に若干被る。連続して並んでいなくても、スマホ観覧時画面に２つ表示されるのがNGと言う人もいる。私は他のブログで何年か若干かぶる状態で運営をしているので大丈夫だとは思うが、気になる場合は更に下の部分（PC表示時のサイドバーやフッター等）に広告を移動。この場合は「('.pager')」を「('移動先のID名、クラス名')」に変更する。
例；「$('.ads-slot-02').insertAfter('#box2-inner');」

サイドバーなどに空のHTMLを用意して任意のクラス名を付けておけば便利かも。

移動した先の近く（PC表示時のサイドバーやフッター等）にも広告が張られていないか注意。

PCでは記事下に２つのレクタングル広告を並べて表示し、画面が675px以下のスマホ観覧時は右側のAdSense広告が移動する。

今回のコードに合わせたHTMLとCSS

HTML、CSSは以下のように設定。
※1024px以下の部分も書いているが、これはDREAMARKの設定上、縮小されて表示されるので足している。

HTML

<div class="ads-01"> 親ボックス
<span class="ads-slot-01">
スポンサーリンク
<!-- 広告ユニット名 -->　スロット１
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-×××"
     data-ad-slot="×××"
     data-ad-format="rectangle"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</span>

<span class="ads-slot-02">
<!-- 広告ユニット名 -->　スロット２
スポンサーリンク
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-×××"
     data-ad-slot="×××"
     data-ad-format="rectangle"></ins>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</span>
</div>

※このコードは「data-ad-format="auto"」→「data-ad-format="rectangle"」に書き換えてレスポンシブ広告で表示されるのをレクタングルのみにしている。
CSS

.ads-01{
  clear:both;
  overflow:hidden;
  margin:24px 0;
}

.ads-slot-01,.ads-slot-02{
  float:left;
  width:336px;
  height:320px;
}
.ads-slot-01{
  margin-right:8px;
}

@media (max-width:1024px) {
  .ads-slot-01,.ads-slot-02 {
    float:none;
    margin-bottom:16px;
    margin-right:0;
  }
}

@media (max-width:675px) {
  .ads-slot-01,.ads-slot-02 {
    float:none;
    width: 300px;
    height: 300px;
  }

 .adsbygoogle{
    margin-bottom:32px;    
 }
}

これで記事下にレクタングル広告を並べてもレスポンシブに対応出来る。素直にレスポンシブ広告で最初からバラして表示していけば良いと思うが、自分のこだわりへの挑戦でもある。

今回のコードを応用して広告を自由な位置に移動

上のjQueryではスマホ以外では記事下に広告が横並びする表示となる。
ここからは、それ以外の時に別の位置に広告を移動させる応用も記しておく。

PC表示時にもAdSense広告を移動する

スマホ以外の時には.insertAfter('.ads-slot-01')で「.ads-slot-01」の後に表示させている。この部分を変更すれば他の部分に移動が出来る。記事下に表示したい時には「.insertAfter('.ads-slot-01')」を「.insertAfter('.entry-content');」に変更する。

<script type="text/javascript">
$(function(){
  $(window).on("DOMContentLoaded", function(){
    var adswitch=$(window).width();
      if(adswitch <=675){
        $('.ads-slot-02').insertAfter('.pager');
      }else
        $('.ads-slot-02').insertAfter('.entry-content');
});
})(jQuery);
</script>

これでスマホ以外の時には記事直下に右側のAdSenseを表示できる。
※本来の記事下はシェアボタンの下。

本来は最初からPCで広告を移動させる場合は、もっと簡単なコードでも対応出来ると思うが、今回使ったコードの応用を作成。
記事下以外に変更したい場合には、移動させたい場所のID名、class名を記述すれば好きな位置に移動できる。

この場合のCSSは以下のように適用する。

.ads-01{
  clear:both;
  overflow:hidden;
  margin:24px 0;
}

.ads-slot-01,.ads-slot-02{
  display:block;
  width:336px;
  height:320px;
  clear:both;
  overflow:hidden;
}

 .adsbygoogle{
    margin-bottom:16px;    
 }

@media (max-width:1024px) {
  .ads-slot-01,.ads-slot-02 {
    float:none;
    margin-bottom:16px;
    margin-right:0;
  }
}

@media (max-width:675px) {
  .ads-slot-01,.ads-slot-02 {
    float:none;
    width: 300px;
    height: 300px;
  }
}

画面サイズで分岐して表示させてみる

PCメインで考えるのであれば、少しコードを書き換えて画面サイズで分岐させる事でも同じような結果になる。
下のコードは右側の広告を、677px以上であれば記事直下に。676px以下であればページャーの下に表示させている。上の方法でも出来るので必要ないかも知れないが、試した結果なので一応記しておく。

<script type="text/javascript">
$(function(){
  $(window).on("DOMContentLoaded", function(){
    var adswitch=$(window).width();
      if(adswitch >=677){
        $('.ads-slot-02').insertAfter('.entry-content');
      }else
        if(adswitch <=676){
          $('.ads-slot-02').insertAfter('.pager');
      }
  });
})(jQuery);
</script>

これで自分の好きな位置にAdSenseを貼る事ができる。AdSenseではなくても、ある要素などを移動する時にも使えるのは便利である。
AdSenseの規約には触れないようにしてはいるのだが、慎重に様子をみていこう。