GoogleAdsenseの広告をレスポンシブにしたい場合


レスポンシブとは?

アフィリエイトの中でもよく使われるGoogleAdsense。
サイト構築時はブログ構築とアフィリ設置が並行してバタバタしちゃうので標準状態で掲載しているケースも多いかと思います。
普通に作成したコードでもいいのですが、ここではレスポンシブ対応広告についてのお話を。

ブログサイトの多くがレスポンシブとなっているかと思います。
パソコンからアクセスした場合と携帯端末からアクセスした場合等、アクセス環境によって見え方が異なりそれぞれで使いやすい表示にしてくれるページのことです。
サイトはその仕組みになっているのに、埋め込んだ広告が対応していないと画面からはみ出た表示になったりします。
せっかくレイアウトが対応しているのにその箇所だけ…見栄えが悪いですよね。
広告効果的にも表示しきれていなければ意味がありませんし。

発行手順

Google Adsenseはレスポンシブに対応できますが、標準でコード取得した場合はレスポンシブ対応ではありません。
また、一度デザインを決定してコード発行したものは、後でレスポンシブに変更することもできません
その場合は新たらしい広告ユニットで作成し、埋め込みコードを発行してブログに埋め込みなおす必要があります。
1
「新しい広告ユニット」をクリックします。

2
「広告サイズ」の項目が今回のターゲット。
それ以外の箇所は通常のユニット発行する場合と同じ。
「推奨」と書かれているボタンをクリックします。

3
プルダウンで選択する項目が表示されるので「レスポンシブ」を選びます。

4
広告サイズの箇所が「レスポンシブ」になりました。
後の入力項目は通常にユニット発行する場合と同じです。
入力を終えたら埋め込みコードの発行を行います。

9
コード発行の際「アドバンス(コード変更が必要)」を選び、表示されたコードをブログに埋め込みます。
(コード変更が必要)とか書いてるとややこしそうですが、今表示されているこのコードの中身をそのまま貼っても大丈夫です。
貼ってみてブログの表示テストをPCと携帯端末で行い、もし不都合があれば改造します。
上図の例でいえば、横が500pxの場合、728pxの場合、それ以外の場合の3タイプで、それぞれ広告サイズが定義されています。
自分のブログサイトの表示幅に合わせて、この定義pxを調整すればOKです。

 

Add a Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です