はてなぶろぐのスマホ版でGoogleAdSenseが見切れてしまう問題を改善する

こんにちは。
今回は、はてなぶろぐのスマートフォン版に広告を貼るという記事です。

当ブログも無事にGoogleAdSenseの審査を通過しまして、GoogleAdSenseの広告が貼れるようになりました。

・・・というわけで、意気揚々と広告を貼ってみたわけですが。なんと、記事下に設置した広告の右端が見切れてしまっているのです!

f:id:konosumi:20171015094430p:plain

広告は表示されているものの、閲覧者が右上の「X」ボタンを押しづらい状態です。サイト運営者の心情としては押して欲しくないボタンですが、このままでは違反報告を受ける可能性もあるため、なんとかします。

見切れてしまう原因を特定する

以下の記事によると、はてなブログのスマートフォン版は、横幅が96%であるというCSSが設定されているようです。

rikei-webmemo.hateblo.jp

実際に調べてみました。
(注釈:見づらいので、拡大表示してください)

f:id:konosumi:20171015100023p:plain

上記は、はてなブログのスマートフォン版デザイン設定画面にて調査したものです。sectionというクラスに、width:93.75%というCSSがあてられていることが分かりますね。

どうやら、はてなブログのCSSによって横幅が狭められてしまっているため、発生したようです。

CSSを調整して広告が見切れないようにする

CSSを調整して、広告が見切れないようにしていきましょう。手順は簡単です。

スマートフォン版のデザイン設定で、「ヘッダ -> タイトル下」を選択してください。スマートフォン用サイトに追加のHTMLを設定することができます。

f:id:konosumi:20171015101329p:plain

設定するCSSは、以下のようなものです。

<style type="text/css">
/* GoogleAdSenseの左右が見切れてしまう対策 */
.entry-content, .entry-footer {
    width: 99%;
} 

</style>

「.entry-content」は本文内に広告を張りたい場合、「.entry-footer」は記事下に広告を張りたい場合に使用します。私は、左右を広げて99%とすることにしました。

これによって、広告が正常に表示されていることが確認できました。

注意点としては、sectionクラスが「width: 93.75%」になっていたからといって、「.section { width: 99%; }」として、sectionを広げようとはしないことです。

はてなブログのスマートフォン版は、sectionを様々な場所で使用しているため、広げてしまうとデザインが崩れてしまいます。そこで、記事に広告を貼る場合は記事(.entry-content)だけ、記事下に広告を貼る場合は記事下(.entry-footer)だけ横幅を調整するようにしてください。

まとめ

CSSを追加で記述したことによって、GoogleAdSenseの広告が見切れないようにすることができました。

(注釈:なお、私はスマートフォン版の広告にはレスポンシブデザインの広告を使用しています)

当ブログは、現時点でアドセンス収益が一日あたり僅か2円の弱小ブログなんですが。これで前よりも繁盛するといいな!