はぴらき合理化幻想

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

はてなブログのPC表示とスマホ表示のCSSをカスタムする方法

はてなブログではPC表示とスマホ表示では異なるHTML構造になっている。またclassなどが必ずしも同じとは限らないので、この違いを利用してスマホ表示のCSSだけをカスタムすることも可能。

PC表示用のCSS

PC表示用のCSSだけをカスタムしたいなら、次の記事で確認できる。

はてなブログのテーマはCSS編集でカスタム。HTML編集は部分的にしかできない - はぴらき合理化幻想

スマホ表示用のCSS

残念ながらスマホ表示だけをカスタムする方法を筆者は知らない。よって、次項で述べるPC表示とスマホ表示の両方に適用されるCSSをカスタムすることで、スマホ表示用のCSSをカスタムする。

PC表示用とスマホ表示用ではHTML構造が異なり、classなども必ずしも同じとは限らないので、この相違部分を利用してスマホ表示のCSSだけをカスタムすることは可能。

PCとスマホのどちらにも適用されるCSS

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

はてなブログ管理画面headに要素を追加

レスポンシブ広告ユニット導入にはスマホ表示のカスタムは必須

アドセンスのレスポンシブ広告ユニット導入時にはぜひスマホ表示をカスタムしたい。でないと、スクロールががたついてしまう。

デフォルトのスマホ表示では余白が設定されており、そのままの状態でレスポンシブ広告ユニットを導入するとはみ出てしまう。これが問題。

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

この問題を解決するための具体的なサンプルCSSコードは別途記事を作成する。追記:書いたよ↓

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

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

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

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

てすとてすと