5分でできるアドセンスでレスポンシブ広告ユニットのサイズ設定方法と使い方

シェアする

program003

Adsenseでレスポンシブ広告ユニットを導入しました。 わりと簡単ですし、一度、理解すると5分で導入できるため利用した方がいいなと思いました。

data-ad-format=”auto”が追加されているレスポンシブ広告ユニット

レスポンシブ広告ユニットは、通常のアドセンスのコードと比較すると、 data-ad-format=”auto”が追加されていますね。

Googleさんがもともと用意しているdata-ad-formatに使える値は、次のものです。

  • auto : 自動
  • rectangle : 長方形
  • horizontal : 横長
  • vertical : 縦長

しかし、今回はこちらの値を使うのではなく、より柔軟に対応できるstyleの指定より指定したサイズを表示します。

スポンサーリンク

電子書籍のおすすめ比較

レスポンシブ広告ユニットのレクタングル大とレクタングル中の切り替え手順

PCやタブレットではレクタングル大(336px*280px)を表示してスマホではレクタングル中(300px*250px)を表示します。

0、まずはアドセンスの管理画面でレスポンシブ広告ユニットを作りましょう。こん時点ではサイズを気にする必要はありません。このコードをそのまま貼り付けても使えますが、値がautoになっているため横長のバナーが表示されてしまい思ったとおりのサイズになりません。

そのコードをメモ帳かなんかに貼り付けたら次にすすみましょう。

1、styleを追加。下記のpost_ad1はアドセンス広告を作成した際の任意の名前に書き換えてください。 min-widthは少しゆとりをもって、min-width:350pxでサイズが切り替わるようにしました。

<style>
.post_ad1 { width: 300px; height: 250px; }
@media (min-width:350px) { .post_ad1 { width: 336px; height: 280px; } }
</style>

下記のようにコードをアドセンスのコードの上に書きましょう。

</style>
<script アドセンスのコード

2、クラス名にpost_ad1(広告作成時の任意の名前)を追加

<ins class="adsbygoogle post_ad1"

3、元からあるdata-ad-format=”auto”の削除すればOKですね。

スポンサーリンク

レスポンシブ広告ユニットの使い方(公式Google Adsenseカスタマイズマニュアル)

詳しくはアドセンスのヘルプに書いてあります。

Google のレスポンシブ広告コードで、ご希望どおりの広告ユニットを作成できない場合は、お客様のレスポンシブ サイトの要件に合うように広告コー

レスポンシブ広告ユニットはページのレイアウトに合わせてサイズが自動的に調整されるため、さまざまなタイプの端末(PC、携帯電話、タブレット

「非レスポンシブ型のサイトでも機能する」と書かれていたため、Wordpressのテンプレート・テーマに問わず 導入を進めた方が管理しやすいですね。わかってしまえば5分のカスタマイズですし、PCとタブレット、スマホ・モバイルなどが一元管理できるため便利だと思います。

他にも方法はあるようですが、この手のものは公式のものに沿っておいた方が問題が発生しにくいため、 この方法がよいのではないでしょうか。

レスポンシブ広告ユニットでレクタングルの中央合わせ

ちょっとだけ追記。他にもやり方はあるようですけど、中央あわせはこれでいけるようです。text-align: centerはおそらく効かないです。margin-left: auto; margin-right: auto;を追加しています。

<style>
.post_ad1 { width: 300px; height: 250px; margin-left: auto; margin-right: auto;}
@media (min-width:350px) { .post_ad1 { width: 336px; height: 280px; margin-left: auto; margin-right: auto;} }
</style>
スポンサーリンク

レスポンシブ広告ユニットの収益や効果

レスポンシブ広告ユニットの効果はまあまあいい感じです。中央合わせにして特に見出しの間に表示する方法を利用するとよい効果を発揮します。

【応用編】Wordpressで記事中H2の手前にアドセンス/広告を入れるカスタマイズ全まとめ
Wordpressで記事中H2の手前のウィジェット(広告・アドセンス)をカスタマイズする方法についてまとめます。記事に広告やコンテンツバナー...
スポンサーリンク

シェアする

フォローする

スポンサーリンク