はてなブログでスマホ記事上にGoogleアドセンスを貼る時のオススメ設定

今週末はブログデザイン変更をイジリ倒すという事で

昨日は、一昨日間違ってイジリ過ぎたスマホ設定を元通りにして更にカスタマイズするという事をやりました。
あ、はてなブログのブログ設定のお話ですが(^^;

スマホ表示の変更ミスを修正し、追加でグレードアップをば(^^; - マネー報道 MoneyReport
昨日公開したソースコードに間違いあり！早速、修正しました！更にパワーアップも(^-^)/

これでスマホページも大分見栄えが良くなりました♪
もっと前にイジリたかったのですが、完全に話題に乗り遅れていたので、いつか良いタイミングで載せ変えようと思っていまして、丁度スマホデザインがバッサリと刷新されたため（まだ公式アナウンスはない）「ここだ！」と思ってスマホデザインをイジリ始めました！

なので本日もスマホデザイン調整。
本日はGoogleアドセンスの広告設定をいじろうと思います。

Googleアドセンスのレスポンシブ設定が進化！？

昨日、読者登録させてもらっているブロガーさんの記事を読んでいたら、Googleアドセンスのレスポンシブ広告ユニットが進化してブログに適用しやすくなったという記事を見付けました。

Googleアドセンスのレスポンシブ広告ユニットをレクタングルにしたらパソコンでもiPhoneでも良い感じになった - 非天マザー by B-CHAN
Googleアドセンス広告をパソコンでもスマホでも綺麗に出す方法。レスポンシブ広告で設定を変えてやると良いみたい。

見に行くと、レスポンシブ広告ユニットで「data-ad-format」部分の設定を書き換えると、出力する広告種類をある程度制御できるという事が紹介されていました。

レスポンシブ広告ユニットのモード：スマートサイズ（推奨）を選んだ時のコードが下記の様になります。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- MoneyReport ヘッダースマホ -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-7454108883909999"
     data-ad-slot="8665685999"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

この時の下から4行目の

　data-ad-format="auto"

と書かれている部分の右側のautoの部分を書き換える事で、自分の出したい広告サイズをかなり制御する事が出来ます。
autoの書き換え内容は下記のとおり。

【data-ad-formatの設定種類】

• auto
• rectangle
• vertical
• horizontal

細かい表示方法等はid:B-CHANさんの記事に譲るとして、私のスマホ表示の記事ヘッダーに付ける物としては「horizontal（横長表示）」のサイズが丁度良さそうです(^^)v

今までスマホ表示で困っていた点

スマホ向けの広告は今までは画面の横幅が728ピクセル以下の場合には「320×100」サイズのラージモバイルバナー広告を表示する様にしていました。
320×50のモバイルバナーだとイメージ広告が極端に少なくて見栄えが悪かったからです。
なのでラージモバイルバナーを表示させていましたが、これも時々320×50のサイズが出てしまって、それでいて余白が下に50ほど出来てしまって、空白のスペースが大きくなる事がしばしばでした。

上の図がまさに50ほど空白スペースが出来て無駄に余白が出てしまった状態です。
これをなんとか回避できる方法がないものか、と思っていました。

基本は「320×100」サイズのラージモバイルバナーにしつつ、320×50のモバイルバナーが選ばれてしまう時は下の余白を消すという事が出来ないものかと。

はてなブログProがパワーアップしてた！

何かないかと「はてなブログ開発ブログ」を見に行ったら、丁度よさそうなものが！

スマートフォンでも、記事やブログの上下にブログパーツなどを自由に表示できるようにしました（Proユーザー向け機能） - はてなブログ開発ブログ
なるほどー。2014/06/20に導入されたばかりだったんですね！スマホのブログ上下に自由にブログパーツ等を表示できる様になったのは！しかもPro限定でしたか(^^;　道理であまり話題にならない訳だ！

これを使えば、ほぼ要求どおりのものが作れる！

まずは自分のレスポンシブ広告ユニットを１つ作ります。
そしてそのコード部分を下記の様にします。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- MoneyReport ヘッダースマホ -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-7454108883909999"
     data-ad-slot="8665685999"
     data-ad-format="horizontal"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

「data-ad-format="horizontal"」の部分が肝です。
ここが普通に広告コードを持ってくるとautoになっているのでhorizontalに書き換えます。

そして、はてなブログの「デザイン」→「スマートフォン」→「記事」→「記事上」を選び上記のコードを貼り付けます。

またここの「記事下」にはパソコンデザインと同じものをコピーして貼り付けておいて下さい。
こうしないと従来、記事下にスマホ向けに書いていたコードが表示されなくなってしまいますので。

これで書き換えた後はブログがこうなります！

これにて無用な空白スペース50ピクセルを無くす事が出来ました！
もし気になっていた方がいたら適用されると、320×100または320×50の記事が余白なく表示する事が出来る様になりますよ(^^)/