Bloggerでアドセンス広告をダブルレクタングル表示にする方法


 Vaster2を例に、GoogleAdsenseのレスポンシブ広告2つを記事下に、横並び表示する方法を紹介しています。CSSを使って、スマホでは非表示になる仕様です。

レスポンシブ広告はdisplay:none;で非表示にしても良い


 300x250や336x280の広告をふたつ横並びに置く手法―ダブルレクタングル―を採用しているサイトをよく見かけます。複数の広告を表示させることによって、クリック率の上昇を見込めるそうです。この配置方法はパソコンなら問題ないのですが、スマートフォンへの配慮を考えるとなかなか難しいのが難点。

 アドセンス広告をスマホで表示する際は、画面内に2つ以上の広告が入らないように工夫する必要があります。Google側がそう規約を出しているから、ここは絶対に守らないといけません。

 どのサイトでも、PCでは2個表示、スマホでは1個表示するように設定しています。CSSのメディアクエリを使えば簡単に実現できるのですが、広告をdisplay:none;で非表示にするのはアドセンスの規約違反になってしまいます。

 しかし、AdSenseのヘルプページを読むと、どうやら公式な抜け道があるようです。

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

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

  • display:none などを使用して広告ユニットを隠す(ただし、レスポンシブ広告ユニットを実装している場合を除く
  • コンテンツが隠れてしまうような方法、またはコンテンツが広告を覆い隠すような方法で AdSense 広告コードを設定する
  • モバイルサイトやレスポンシブ デザインのサイトでコンテンツと広告が重なるような方法で広告ユニットを配置する
  • 非表示キーワード、iframe、その他の方法を使用して広告のターゲット設定を操作する
  • メールやソフトウェアで広告を配信する
  • 広告の配信方法や表示方法を操作して不当に注目を集める(画面内にスライドイン表示される広告、ズームイン / ズームアウトされる広告など)
  • ユーザーがモバイル ウェブページでドラッグ操作を行ったときに広告クリックを発生させる

(2016年11月20日 AdSense 広告コードの修正 - AdSense ヘルプより引用

 つまり、レスポンシブ広告ならdisplay:none;で非表示にしても規約違反にならないということです。グレーどころかまったくのホワイト。公式でも、レスポンシブ広告を非表示にするコードを配布しています(当記事の項目「参考サイト」を参照)。

 しかし、レスポンシブ広告は時と場合によって大きさが変わってしまう仕様。Bloggerだとコードをそのまま貼り付けても上手くいかないし、そもそもどうやって横並びに表示するんだ……と、初心者には課題が山積みですね。

 そこで今回は、そんな小難しいカスタマイズを最初から最後まで解説してみました。

Bloggerでアドセンス広告を貼る際の基礎知識


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 アドセンスのアカウントページから広告コードを生成すると、上記のスクリプトが表示されます。これをそのまま貼るとエラーが出て保存できません。async属性を”async='async'”に書き換えて、src属性の先頭に”http:”を追加してください。

 どのコードも同じスクリプトを使うので、このjsファイルは1個だけ表示していれば、後は必要ありません。サイトの軽量化のため、2個目の広告以降は削って設置しましょう。

レスポンシブ広告を300x250にして、テーブルタグで並べる



<table width="100%">
<tr>
<td colspan="2">
                          <center><b>スポンサードリンク</b></center><br/>
  </td>
  </tr>
<tr>
<td align="left" valign="top">
【左の広告】
  </td>
<td align="right" valign="top">
【右の広告】
  </td>
  </tr>
</table>

 ダブルレクタングル表示をするならテーブルタグが最も簡単です。「HTMLを編集」にて、上記HTMLの中に広告コードを挿入しましょう。Vaster2なら「アドセンス」と検索をかければ、どこに置けば良いのか分かるはずです。

 いつでも300x250表示にするため、広告コードのstyle属性に”width: 300px;height: 250px;”を追加し、”data-ad-format="auto"”を削除してください。特にこだわりがない場合は、そのままでも大丈夫だと思います。

スマホでは非表示にする



.adslot_1 { display:inline-block; }
@media (max-width: 768px) { .adslot_1 { display: none; } }

「HTMLの編集」にて、上記CSSを”]]></b:skin>”より上においてください。

 さきほど設置したアドセンスのコードに戻り、左側に表示される広告のタグをいじります。insタグ内のclass属性に”adslot_1”を追加し、style属性からdisplay要素を消去しましょう。


 大体、こんな形になるかと思います。

 最後にテンプレートを保存して、想像通りに表示されているか確かめましょう。PCとスマホ、両方で確認するのを忘れずに。

参考サイト


レスポンシブ広告コードを修正する方法 - AdSense ヘルプ
↑の項目「広告ユニットを隠す」から、CSSを拝借しました。必要最低限まで削ってあります。スマホでは横長広告にしたい場合や、その他のカスタマイズをしたいのなら参考になります。Bloggerユーザーならぜひ一読をオススメします。


この記事を書いた人

運営者:クロスグリ


 小説家志望の元ライター。
 プロの小説家になるべく、日々勉強しながらサイト運営しています。
 作品の下読み依頼や、個別相談(創作カウンセリング)等も受け付けています。
 気になったらTwitterフォローお願い致します。

このサイトについて 欲しいものリスト


スポンサーリンク

Vaster2を例に、GoogleAdsenseのレスポンシブ広告2つを記事下に、横並び表示する方法を紹介しています。CSSを使って、スマホでは非表示になる仕様です。

コメントを投稿

[disqus]

Author Name

{picture#https://4.bp.blogspot.com/-1zLucze5Byg/WA1R7mlH4hI/AAAAAAAAAYU/2gibmrPA7AITohNOUcfZi0ZYmNEt9UM1gCPcBGAYYCw/s320/S_4860987874792.jpg} YOUR_PROFILE_DESCRIPTION {twitter#https://twitter.com/crosgre}

連絡フォーム

名前

メール *

メッセージ *

© 2016 Project "Crosgre" Self employed. Powered by Blogger.