マネー報道 MoneyReport

マネーにまつわる報道を取り上げ、自分の切り口で切り取り、噛み砕いてお伝えします。

はてなブログ記事上にAdsenseをPC・スマホ切り替えて表示させる方法


はてなブログ記事上スペースがいじれる様になった!

2014/02/05に「はてなブログ開発ブログ」の記事で記事上スペースがブロガーに遂に解禁されました!

ブログをカスタマイズしよう! 記事ページのタイトルと本文の間(記事上)にもソーシャルパーツなどを配置できるようにしました - はてなブログ開発ブログ

これは今までに多くのはてなブロガーが望んでいた改変で、大変歓迎されるべきものです!

色々な方が、この記事上スペースを何に使おうか試行錯誤されています。

SNSボタンを貼り付けたり、自分の人気記事へのリンクを貼り付けたり色々されているみたいですねー。

そんな中、Google Adsenseの広告を貼り付けている方をまだあまりお見掛けしないので、

先頭切ってやってみるか!

と思った次第で、やってみました!

GoogleAdsenseを記事上に表示する時の問題点

Googleアドセンスは色々なサイズの広告が提供されていますが、いかんせんはてなブログと相性の良い広告サイズが実は少ないんです。
一番貼りたいサイズである「336×280 レクタングル(大)」を貼り付けると、PCでは良いですがスマホで表示させると「スマートフォン横スクロールガクガク問題」が発生します。

こちらの問題については、詳しくは私の過去記事を参照してください。

Googleアドセンスをはてなブログで使う時の3つの注意点 - マネー報道 MoneyReport

かといって横幅サイズが丁度良い「300×250 レクタングル(中)」だと横幅は丁度良いのですが、記事ページを表示するとブログタイトル、記事タイトル、広告だけで1ページが全て埋まってしまい、本文が表示されません。
これではGoogleアドセンスの規約違反に引っかかります。

となると、スマホにきれいに横幅が収まり、かつ高さも小さく記事本文が表示される広告となると「320×50 モバイルバナー」とかになります。
これはスマホではGood!ですが、PCで表示させた時に信じられない位小さく表示されておかしくなってしまいます。

何か妙案はないものか?

PCとスマホで表示を分ければ解決!

と探していたら、ブロガーの先輩がやっぱり見付けてくれているじゃないですか!
先輩ブロガーである ほねにく(id:honeniq)さんが、当時記事下のスペースにアドセンスを切り替えて表示する方法を見付けて、コードまで載せてくれていました!

はてなブログの記事下のAdsenseをPC・スマホ版で切り替える方法 - ほねにくのうわずみ
アドセンスをアクセスして来た人がパソコンなのかスマホなのかを判別して表示する広告サイズを切り替える方法。便利な方法があるんですね~。

この方法を使えば、
スマホでアクセスしてきた人には
 320×50 モバイルバナー

パソコンでアクセスしてきた人には
 728×90 ビッグバナー

みたいに広告を切り替えて表示させる事が出来るという優れもの!
すごい!
こんな方法があるんですねー♪

はてなブログ記事上Googleアドセンス広告のコード切り替え方法

早速やってみましょう!
手順は以下の通り。

  1. Googleアドセンスの広告ユニットを2つ作る(スマホ用、PC用の2つ)
  2. JavaScriptのコードで判定文を入れる
  3. ブログのデザインで「記事上」にコードを貼り付けて保存

1.Googleアドセンスの広告ユニットを2つ作る(スマホ用、PC用の2つ)

f:id:MoneyReport:20140216095741p:plain
スマホ用には下記の2ついずれか好きな方を作ります。
 320×50  モバイルバナー
 320×100 ラージモバイルバナー

パソコン用には自分のブログの横幅に収まる物を選んで作ります。だいたい以下のいずれかを選べば間違いないかと。
 728×90  ビッグバナー
 468×60  バナー
 336×280 レクタングル(大)

この2つの広告ユニットのコードを取得しておき、メモ帳等に貼っておきます。
注意点としては表示されるコードの内「コードタイプ」を「同期」にして下さい。
f:id:MoneyReport:20140216100853p:plain

コードタイプを「非同期」にしてしまうと今回の方法は使えません。
f:id:MoneyReport:20140216132026p:plain

2.JavaScriptのコードで判定文を入れる

以下のコードを参考にそれぞれの広告からコードをコピーしてきて差し替えます。

<script type="text/javascript"><!--
google_ad_client = "ca-pub-0000000000000000)";    //Adsenseのサイト運営者ID
if ((navigator.userAgent.indexOf('iPhone') > 0 && 
     navigator.userAgent.indexOf('iPad') == -1) || 
     navigator.userAgent.indexOf('iPod') > 0 || 
     navigator.userAgent.indexOf('Android') > 0) {
    /* スマホ向けはこっち */
    google_ad_slot = "0000000000";    //広告ユニットのID
    google_ad_width = 000;            //横幅
    google_ad_height = 000;           //高さ
}
else {
    /* パソコン向けはこっち */
    google_ad_slot = "0000000000";
    google_ad_width = 000;
    google_ad_height = 000;
}
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

差し替える部分は以下の4つ。
・google_ad_client
・google_ad_slot
・google_ad_width
・google_ad_height


差し替え後は下記のようになります。

<script type="text/javascript"><!--
google_ad_client = "ca-pub-7454108883909999";
if ((navigator.userAgent.indexOf('iPhone') > 0 && 
     navigator.userAgent.indexOf('iPad') == -1) || 
     navigator.userAgent.indexOf('iPod') > 0 || 
     navigator.userAgent.indexOf('Android') > 0) {
    /* MoneyReport ヘッダースマホ用 */
    google_ad_slot = "7188952999";
    google_ad_width = 320;
    google_ad_height = 50;
}
else {
    /* MoneyReport ヘッダーパソコン用 */
    google_ad_slot = "2632072999";
    google_ad_width = 728;
    google_ad_height = 90;
}
//-->
</script>
<script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

3.ブログのデザインで「記事上」にコードを貼り付けて保存

「デザイン」→「カスタマイズ」→「記事」→「記事上」に移動して2で作ったコードを貼り付けます。

f:id:MoneyReport:20140216131129p:plain

下の部分にある「スマートフォン版にも表示する」のチェックボックスをONにしておきます。
そして「変更を保存する」をクリックすればOKです。

表示はこんな感じです。
これはPC用。「728×90  ビッグバナー」です。
f:id:MoneyReport:20140216131429p:plain

これはスマホ用。「320×50  モバイルバナー」です。
右が飛び出てしまっているのはご愛嬌(^^;
f:id:MoneyReport:20140216131436p:plain

と、こういった感じでアクセスしてくる端末に合わせてGoogleアドセンスの広告を切り替える事が出来ます。
記事上にグーグルアドセンス広告を貼りたい方は参考にしてみて下さい。

まとめ

  • 2014/02/05から、はてなブログ記事上スペースが解禁!
  • Googleアドセンス広告の問題点はスマホとパソコンで表示を適切に切り替えられない点
  • JavaScriptを使って、スマホとパソコンとでアクセスを切り替える事で適切に広告を表示できる