私のテーマテンプレートはレスポンシブウェブデザイン。つまり、ウインドウ幅に応じてサイト内部の要素が最適化されるようにできています。
しかし、GoogleAdsenseの画像はそのように対応していません。つまり、横長のバナーをスマホで見ると広告が途中で切れてしまいます。
そこで、画面幅に応じて表示されるAdsenseが変更されるように設定しました。以下、備忘録的な記事になりますが、参考になりましたら幸いです。
ブレイクポイントでAdsenseを変更する
まず最初に、参考にしたサイトをご紹介します。もし当記事を読んでも分からなかった場合は、こちらも参照してみて下さい。
Google Adsenseがレスポンシブデザインでも柔軟に利用可能にポリシー改訂！Webサイトの収益を更に効率化しよう！ | okaoka.net
さて、GoogleAdsenseをレスポンシブ対応させるには、画面幅に応じて表示させるAdsenseを変更させる必要があります。
①まず前準備として、表示させるAdsenseを２つ以上取得します。ブレイクポイントの数だけ必要になります。私の場合はPC版とスマホ版の２つにしています。
②Adsenseを表示させたい場所に、以下のように記述します。
＜script type="text/javascript"＞＜!--
google_ad_client = "ca-pub-id";
/* ↓↓↓※１↓↓↓ */
width = document.documentElement.clientWidth;
/*↓↓↓※２↓↓↓ */
google_ad_slot = "1234567890";
google_ad_width = 468;
google_ad_height = 60;
/*↓↓↓※３↓↓↓ */
if (width < 500) {
google_ad_slot = "0987654321";
google_ad_width = 320;
google_ad_height = 50;
}
//--＞
＜/script＞
＜script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"＞
＜/script＞
※上記のコードの「＜」「＞」は、わざと全角で表示しています。実際に使う際は半角にしてください。
注意事項として、
※１：必ず「width = document.documentElement.clientWidth;」を記述して下さい。これが無いと機能しません。
※２：元となるAdsenseです。
※３：ブレイクポイントで切り替えるAdsenseです。この場合「画面幅が500px以下の時に切り替える」という指定になっています。ブレイクポイントを増やしたい時は、この記述を以下に追加していきます。
以上で作業は終了です。無事に機能していれば、PCとスマホで広告が出し分けられます。
注意点として、動的な動きはしません。つまり、画面幅を縮めたり伸ばしたりしても広告は代わりません。そのページを読み込んだ時の画面幅を取得して、Adsenseを表示します。
あとがき：コーディング難しいです…
コーディングって難しいですね。私はウェブディレクターであって、実制作の方はてんでダメなのです。この件も参考ブログがなければどうにもなりませんでしたし、自分のブログのCSSを弄るにも、職場のコーダーさんに手取り足取り教えてもらいながらです。
勉強しなくてはならないなぁと、焦燥感に煽られている今日このごろ。今日みたいな話題も少しずつご紹介出きればなと思います。それでは、今日はこのあたりで。
