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

シェアする

program003

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

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

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

data-ad-formatに使える値は、次のものです。

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

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

スポンサーリンク

電子書籍のおすすめ比較

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

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>

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

<ins class="adsbygoogle post_ad1"

3、data-ad-format=”auto”の削除すればOKですね。

スポンサーリンク

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

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

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

レスポンシブ広告ユニットはページのレイアウトに合わせてサイズが自動的に調整されるため、さまざまなタイプの端末(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の手前のウィジェット(広告・アドセンス)をカスタマイズする方法についてまとめます。 記事中に3つの広告やコン...
スポンサーリンク

シェアする

フォローする

スポンサーリンク