はぴらき合理化幻想

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

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

昨日(2014年5月13日)、はてなブログのスマホ表示のHTMLやCSSなどが変更されていた。これに伴い、レスポンシブ広告ユニット用のCSSを微調整した。

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

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

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

改訂版のCSSコード

主な変更点

スマホ表示でもページ上部にダッシュボードへのリンクが表示されていたので、それらを非表示にした。

ブログタイトルあたりの高さが広がっていたので、これも省スペース化した。

CSSコード

<style>
/*
はてなブログでアドセンスのレスポンシブ広告ユニット導入時のCSSサンプルコードver1.1.0 - はぴらき合理化幻想
http://hapilaki.hateblo.jp/entry/css-for-responsive-ad-unit-1-1-0
ver.1.1.0.140514
*/
#globalheader-container{display:none;}/*スマホでもページ上部のiframeは非表示*/
#header{margin:0;}/*margin:15px auto;を解除*/
.header-blog-icon{display:none;}/*sp header内に表示されるアイコンを非表示*/
.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;}/*sp 記事最初のblockのmargin-top解除*/
</style>

上記コード内に、既に不要になっているコードがあるかもしれない。取り急ぎ、ポートレートモードでもランドスケープモードでもレスポンシブ広告ユニットが適切に表示されているのを確認した。

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

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

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

てすとてすと