Google AdSense の表示を PC とスマホで切替える

AdSense の貼り方について検索していると，PC の場合は記事下にレクタングル大を横並びで 2 つ(ダブルレクタングル)，スマホの場合には規約違反にならないようにレスポンシブの広告を 1 つ貼るような方法が推奨されています．ただ AdSense の広告掲載に関するポリシーを読むと下記のように書かれており，レクタングル大で広告を非表示にするというのは規約的にまずいのかなと思いました．

禁止されているコードの改変方法

AdSense コードを以下の方法で改変することは禁止されています。

display:none などを使用して広告ユニットを隠す（ただし、レスポンシブ広告ユニットを実装している場合を除く）
...

そこで，レスポンシブ広告を使ってレクタングル大相当の広告を 2 つ表示する方式というのを実装してみました．

HTML の修正

まずは HTML から修正していきます．デスクトップの場合にはテーブルにして横並びで 2 つ表示し，モバイルの場合にはそのまま 1 つ表示するようにします．デスクトップ向けの部分は div タグで囲いクラス名を ad_desktop にしておきます．またデスクトプ向けに表示する，それぞれの広告のクラスに ad_rectangle を追加しておきます．モバイル向けの部分は div タグで囲いクラス名を ad_mobile にしておきます．

広告の ID などは適宜置き換えて下さい．

<!--- adsense for desktop -->
<div class="ad_desktop" align="center">
  <table style="border:none">
    <tr>
      <!--- left side ad -->
      <td style="border:none">
        <script
          async
          src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
        ></script>
        <!-- responsive-desktop1 -->
        <ins
          class="adsbygoogle ad_rectangle"
          style="display:block"
          data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
          data-ad-slot="XXXXXXXXXX"
          data-ad-format="auto"
        ></ins>
        <script>
          ;(adsbygoogle = window.adsbygoogle || []).push({})
        </script>
      </td>
      <!--- right side ad -->
      <td style="border:none">
        <script
          async
          src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
        ></script>
        <!-- responsive-desktop2 -->
        <ins
          class="adsbygoogle ad_rectangle"
          style="display:block"
          data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
          data-ad-slot="XXXXXXXXXX"
          data-ad-format="auto"
        ></ins>
        <script>
          ;(adsbygoogle = window.adsbygoogle || []).push({})
        </script>
      </td>
    </tr>
  </table>
</div>
<!--- adsense for mobile -->
<div class="ad_mobile">
  <script
    async
    src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  ></script>
  <!-- responsive-mobile -->
  <ins
    class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
    data-ad-slot="XXXXXXXXXX"
    data-ad-format="auto"
  ></ins>
  <script>
    ;(adsbygoogle = window.adsbygoogle || []).push({})
  </script>
</div>

CSS の修正

次に CSS に下記を追加します．通常の場合は ad_rectangle クラスは幅 336px 高さ 280px でレクタングル大と同等の大きさになるようにしています．その後のメディアクエリ内で，幅が 767px 以下の場合には .ad_desktop { display: none !important; } でデスクトップ向け広告を非表示，逆に幅が 768px 以上の場合には .ad_mobile { display: none !important; } でモバイル向け広告を非表示にするようにしています．

.ad_rectangle {
  width: 336px;
  height: 280px;
}

@media only screen and (max-width: 767px) {
  .ad_desktop {
    display: none !important;
  }
}

@media only screen and (min-width: 768px) {
  .ad_mobile {
    display: none !important;
  }
}

ブラウザの横幅を調整して読み込むことで，表示される AdSense が変わるのが確認できるかと思います．

禁止されているコードの改変方法

HTML の修正

CSS の修正

参考