はてなブログのスマートフォン表示で、記事上のアドセンスをガタガタさせずに綺麗に設置する

はてなブログはスマホ表示の記事部分がデフォルトで横幅300pxになっています。それに対して、Google AdSenseの広告はスマホ用というと横幅320pxしか用意されていないので、そのまま使うとハミ出します。

その弊害で、スマホで見ると横スクロールが発生して上下のスクロール中にガタガタ動いてしまうんですね。はてなブログにアドセンスを普通に貼ろうとしたことがあるなら分かると思います。

アドセンスの広告は規約で勝手にサイズを変更してはいけないので、ブログ側を合わせてあげましょう。

デフォルトのまま「320×100 ラージモバイルバナー」を貼ると

320×100 ラージモバイルバナーを記事上にデフォルトのまま貼ると、右側がハミ出してしっくりきません。

ハミ出したせいで横スクロールが発生して、上下のスクロール中に指を横にスライドしてしまうとガタガタ動いてしまいます。

スマホ表示の横幅を320pxに合わせる

ダッシュボードの [設定] > [詳細設定] > [headに要素を追加]に下記のcssを貼り付けます。

<style>
#globalheader-container{display:none;}
#header{margin:0;}/*margin:15px auto;を解除*/
.entry-list{margin:0;width:100%;}/*sp marginとwidth:96%を解除*/
.entry-list .entry-title{font-size:1.07em;}/*sp 110%から縮小*/
.entry-list .entry-title a{line-height:1.3;}/*sp 1.5から圧縮*/
.entry-list .categories{margin:3px 0 0 0;}/*sp 記事内カテゴリ表示上部のmargin-top:8px解除*/
.entry-list .entry-header{padding:2px 0;}/*sp 記事タイトルpaddingを解除*/
.entry-header p{margin:2px 0;}/*adsが勝手にpの中に入るのでそのmarginを解除*/
.entry-content :first-child{margin-top:2px;}/*記事最初の要素のmargin-top解除*/
</style>

上記を貼り付けると…

このように、広告の幅が横幅ピッタリになります。

あとがき

貼っている広告はレスポンシブ広告ユニットで、PCブラウザでは「468×60px」を表示。スマホでは「320×100px」が表示されるように設定しています。

このままだとPCの表示サイズが合っていなくて中途半端なので、時間がある時に728×90pxに合うように記事部分の幅を広げるか、記事上の広告自体をやめるか考えようと思います。

ちなみに、記事を書いてる最中に気づきましたが、5月13日にはてなブログのスマホ表示が変更されましたね！一番上にダッシュボードへのリンクが表示されて、アイコンが表示されるようになっています。上のCSSではダッシュボードへのリンクだけ消しました。

アイコンも消したい方は、下記の記事を参考にさせてもらいましょう。
はてなブログでアドセンスのレスポンシブ広告ユニット導入時のCSSサンプルコードver1.1.0 - はぴらき合理化幻想

参考にしたサイト

はてなブログ記事上にAdsenseをPC・スマホ切り替えて表示させる方法 - マネー報道 MoneyReport
書いてあるまま適用すると横幅300のはてなブログスマホ表示に対して、320の広告なので横スクロールが発生してガクガク問題が発生します。スマホ表示を320pxに合わせてからやればこれもいいかも。