はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

はてなブログでアドセンスのレスポンシブ広告ユニット導入時のCSSサンプルコード

アドセンスのレスポンシブ広告ユニットをスマホで表示させると、デフォルト状態だと広告の一部がはみ出てしまう。CSSコードをコピペで追加し、スマホのポートレートモード(横幅320px)ぴったりにしよう。

レスポンシブ広告ユニットって何?

次のページで確認できる。

Google AdSenseのレスポンシブ広告ユニットでスマホ表示サイズにも最適化 - はぴらき合理化幻想

なぜカスタムする必要があるのか?

ポートレートモードでは

スクロール時のがたつきを防止するため。

デフォルトでレスポンシブ広告ユニットを導入すると下図のとおり、広告がフレームアウトする。

これにより縦方向のスクロールをしている時に横方向のスクロールも発生する場合がある。がたつきだ。ユーザビリティが損なわれる。下図は意図に反して、右スクロールが発生している様子。

ちなみに、キャプチャーしたページは次のページ。

ブログ毎日投稿を四ヶ月継続時のアクセス数推移、SEOとバズったの合わせ技 - はぴらき合理化幻想

ランドスケープモードでは

ファーストビューで本文が見えるようにするため。

デフォルトのままだとファーストビューで本文が見えない。これは広告主に不利益だ。アドセンス規約にも抵触しそう。

カスタム後のキャプチャー画像

レスポンシブ広告ユニット導入時にCSSをカスタムすると下図のとおり。

ポートレートモードでがたつきが生じなくなる。

ランドスケープモードではファーストビューで本文が見えている。

カスタム前後の比較用GIFアニメ

カスタム前後の様子が一目瞭然だ。

ポートレートモード

ランドスケープモード

レスポンシブ広告ユニット用にCSSを最適化

次のサンプルコードはこの記事公開時に当ブログで設定しているものと同じ。各要素で少しずつスペースを削ったりして、上述の問題点を解消した。

2014年5月14日追記:はてなブログのHTMLなどが変更されたことで、下記コードではなく次のページに記載されているコードを使った方がいい。

はてなブログでアドセンスのレスポンシブ広告ユニット導入時のCSSサンプルコードver1.1.0 - はぴらき合理化幻想

<style>
/*
はてなブログでアドセンスのレスポンシブ広告ユニット導入時のCSSサンプルコード - はぴらき合理化幻想
http://hapilaki.hateblo.jp/entry/css-for-responsive-ad-unit
ver.1.0.0.140503
*/
#header{padding:0 10px;}/*sp ブログタイトルのpadding:10pxを一部解除*/
.entry-list{margin:0;width:100%;}/*sp marginとwidth:96%を解除*/
.entry-list .entry-title{font-size:1em;}/*sp 110%から縮小*/
.entry-list .entry-title a{line-height:1.2;}/*sp 1.5から圧縮*/
.entry-list .categories{margin:0;}/*sp 記事内カテゴリ表示上部のmargin-top:8px解除*/
.entry-list .entry-header{padding:0;}/*sp 記事タイトルpaddingを解除*/
.entry-header p{margin:0;}/*adsが勝手にpの中に入るのでそのmarginを解除*/
.entry-content :first-child{margin-top:0;}/*記事最初の要素のmargin-top解除*/
</style>

上記コード内にコメントアウトで各コードの役割を簡易解説している。コメントアウト内のspとはSmartphoneのことで、スマホ表示の時だけ適用されるCSSであることを示している。

どこにCSSコードを追加すればいいのか?

下図のとおり管理画面でCSSを挿入可能。headに要素を追加の右にあるテキストボックス(下図ではフレームアウト)に挿入したいコードを追加して保存する。

はてなブログのPC表示とスマホ表示のCSSをカスタムする方法 - はぴらき合理化幻想

留意点など

はてなブログでは予告もなしに突然HTMLやclass名が変更されたりする。それにより上記サンプルコードでは同じように最適化できなくなる場合もありえる。

Amazon.co.jp: HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。: 赤間 公太郎, 原 一宣。, こもり まさあき

Amazon.co.jp: 現場でかならず使われている CSSデザインのメソッド: 北川 貴清, 窪木 博士, KLEE Atelier*Spoon, 小浜 愛香, 佐々木 恵, 棧敷 友香子, 錦織 幸知, 前川 昌幸, 山川 祐一郎

Amazon.co.jp: HTML&CSS標準デザイン講座 【HTML5&CSS3対応】: 草野 あけみ

てすとてすと