はてなブログ(無料版)の記事内ににスマホとPCを動的に切り替えたGoogle AdSenseを使う

はてなブログでGoogle AdSenseの審査が通過しました。

スマホとPCでデザインが異なるため、一工夫してみました。

検索してみるとJavascriptでヘッダを取得し、iPhoneやAndroidならスマホ用AdSenseを表示させている例がありますが、

目的としては、画面サイズに適した広告を表示させてあげることですので、

画面サイズに合わせた広告配置をしてみます。

ブログの編集モードは「見たまま編集」(Javascriptを使いたいため)を選択します。

(現在はてな記法などを使っている場合は設定より変更してください。)

「HTML編集」で、広告を挿入したいところで下記のコードを入力

コード例

<script type="text/javascript">     var show_width = document.documentElement.clientWidth;     if (show_width >= 480) {         // 表示領域が480ピクセル以上の時(PC用)         document.write("<br>");         google_ad_client = "ca-pub-6572360156600072";         google_ad_slot = "3051773148";         google_ad_width = 728;         google_ad_height = 90;     } else {         // スマホ向け         document.write("<br>");         google_ad_client = "ca-pub-6572360156600072";         google_ad_slot = "1226629543";         google_ad_width = 234;         google_ad_height = 60; } </script> <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

黄色い部分はそれぞれの環境で書き換える必要があります。

Google Adsenseの「コードを取得」から各IDが取得できます。

 広告ユニットは

• ビッグバナー (PC用)
• ハーフバナー (スマホ用)

 をそれぞれ選び、それに合わせたピクセルを指定しています。

この方法だと、記事の任意の場所にGoogle AdSenseを配置できますが、

記事を書く度にコードの貼り付けが必要になります。

注意点として、1ページあたり広告は3つまでしか配置してはいけません。

しかし、ブログトップページに記事を複数表示されるように設定されている場合、複数の記事の広告がまとめて表示されるため、意図せず4つ以上表示されてしまわないように気をつけてください。

ブログのヘッダなどにGoogle AdSenseを配置するようにしているとさらに増えますのでご注意を。