今回はブログのカスタマイズについてのお話です。
何かと言うと、最近いくつかのサイトでアドセンス広告がスマホの画面横幅一杯に表示されているのを見かけて気になっていたんですね。
いまやパソコンよりもスマホからウェブページを見る人の方が多い時代・・・僕のブログもスマホからの閲覧者の方が圧倒的に多いです。
広告は大きければ大きいほど効果が高いという話もありますし、アクセス比率の高いスマホページで広告表示サイズを端末幅に合わせて最大化できたら、なんか効果ありそうな気がしませんか？
それだけじゃなく、余計な空白が無くなることで広告が記事に馴染んで、見た目も洗練されて格好良く見えるような気がします、個人的には。
そんなこんなでこれはもう是非とも自分のサイトにも導入したい！というわけで、素人なりに色々試してみたら意外にも上手くできたので、今回はそのカスタマイズ方法をご紹介したいと思います。
ちなみにこのブログはWordpressでSimplicity2をテーマとして使っているので、Simplicity使っている方はそのままコピペで使えるはずです。その他のテーマを使っている方にも参考になるかと思いますので是非チェックしてみて下さい。
アドセンス記事内広告は全幅表示になるよう自動調整される
僕が記憶している限り（と言っても経験長くないですが）、「広告の端と画面端のスペースが0」というのを見かけるようになったのは最近になってからだと思うんですが、どうでしょうか？前からありましたっけ？
アドセンス広告って、336×280とか、300×250とかの決まったサイズが提供されるので、スマホの画面幅がそれよりも大きい場合は広告の左右端とスマホ画面の端っこの間に余白ができるものだと思っていたんですが、僕が見たサイトでは広告の端と画面の端の間に余白が全く無くて、端と端がぴったり一致しているようでした。
もちろん、CSSで画面端までのmarginやらpaddingやらが設定されているせいでこの余白が生じている場合もあるわけで、この辺の値を調整すれば余白を限りなく小さくしていくことは可能かもしれませんが、スマホの画面幅がピッタリ336pxとか300pxでない限り、余白を0にすることは不可能なはず・・・
これはもしかすると最近になって出来るようになったことなのかも知れないと思って調べてみると、アドセンスに「記事内広告」などの新広告ユニットが2017年の7月から追加されたとのこと。
この「記事内広告」についてアドセンスのヘルプを調べてみると、広告のサイズについてこんなことが書いてありました。
記事内広告はレスポンシブ広告であり、ユーザーの使用デバイスに応じてサイズが自動的に調整されます。記事内広告の幅は、親コンテナ（
<div>、<iframe>など）の幅と常に等しくなります（記事内広告の幅の最小値は 250 ピクセルです）。記事内広告の高さは、AdSense で自動的に調整されます。
広告の幅が親コンテナの幅と常に等しくなるということは、親のコンテナの幅をスマホ画面幅一杯に設定してやれば、スマホ画面の全幅に余白無しで広告を表示することが出来そうな予感！
CSSカスタマイズで広告と画面端の余白を0に設定
上でも書いたように、僕のブログではテーマとしてSimplicityを使っているんですが、スマホ向けのアドセンス広告のhtmlタグは、Simplicity用ウィジェットの「モバイル用広告」ウィジェットに入れて使っています。
ということは僕の場合、この「モバイル用広告」ウィジェットがアドセンス広告の親コンテナとなっているはず。
というわけで、このモバイル用広告ウィジェットの横幅を画面幅一杯に広げる方法を探ることにしました。
で、Chromeのデベロッパーツールで色々見てみると、モバイル用広告ウィジェット自体はmargin、border、paddingのどれもデフォルトで0に設定されている様子。
じゃあ一体どこで余白が生じているのかもう少し調べてみると、モバイル用広告ウィジェットの更に親コンテナであるmainにpadding 10pxが設定されていることが分かりました。
余白を無くすためには、このmainのpaddingを0に設定してやってもいいんですが、それだとmainの下にある記事文章などの他の要素全ても画面端まで表示されるようになってしまいます。
これだとさすがにちょっと見づらいかな？ということで、モバイル用広告ウィジェットに対してだけこのpadding 10px分を広げるため、モバイル用広告ウィジェットにネガティブマージンを与えることにしました。
以下がSimplicityのモバイル用広告ウィジェットにネガティブマージンを与えるためのコードです。
.widget_mobile_ad{
margin-left: -10px;
margin-right: -10px;
}
上記のコードをstyle.cssに追加すれば、記事中のモバイル用広告ウィジェット部分だけmainの幅を突き抜けてスマホ画面の横幅一杯に広げることができます。
この設定をすれば、モバイル用広告ウィジェットの中に別途作成したアドセンス「記事内広告」のタグを張り付けるだけで、アドセンス広告がスマホ画面横幅一杯に表示されているのが確認できるはずです。
ちょっと分かりにくいですが、下の図はこの設定をする前後の変化（広告と画面端に余白有り→余白無し）を示しています。
おわりに
アドセンスの新広告ユニット「記事内広告」を使って、スマホ画面の横幅一杯に余白無しでアドセンス広告を表示する方法を考えてみましたが、思ったより簡単に実現できて良かったです。
そもそもこの「記事内広告」のコンセプト自体、「記事の流れに違和感なく溶け込むこと」を目的としていて広告の全幅表示をしているわけですから、余白を無くして真の全幅表示をさせるのが個人的には正解なような気がします。
まぁブログデザインに関してはそれぞれこだわりがあると思うので必ずしもやる必要はありませんが、何か良いかも！と感じた方は是非どうぞ。