読者です 読者をやめる 読者になる 読者になる

AIUEO Lab2

1年のうち250日は夕飯を作る主夫が、iPhoneや料理、気になったものを紹介するブログです。

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

13997679598_f35cf54778_oのコピー

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

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

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

スポンサーリンク

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

13997252378_e1b4ba8227_o.png



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>

上記を貼り付けると…

13997252038_56d9289733_o.png



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


あとがき

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

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

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

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


参考にしたサイト

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

今すぐサイトの広告収入を2倍にする方法 - ぼくはまちちゃん!(Hatena)
これはアドセンス規約に違反するので、アボセンスされたくなければやっちゃダメ。

はてなブログでアドセンスのレスポンシブ広告ユニット導入時のCSSサンプルコード - はぴらき合理化幻想
最終的にはこの方法を少しイジって適用。320pxでもガクガクにナラないように、スマホ表示自体を320pxに合わせる。

Google AdSenseのレスポンシブ広告ユニットでスマホ表示サイズにも最適化 - はぴらき合理化幻想
レスポンシブ広告を使って、スマホ表示は320×100のサイズをタイトル下(記事上)に表示させた。