はてなブログのグローバルヘッダーの高さは、User Agent に Mobile が含まれている時（スマホ閲覧時）とそうでない時（タブレットあるいはPC閲覧時）でそれぞれ 44px と 37px に変わるので、スマホでもそれ以外でも常に画面上部に固定する場合はめり込みを防止するためのコンテンツの表示開始位置を調整する余白を調整しなくてはならなかった。
はてなブログの body には、どの機能を使っているか、どのページを表示しているかで様々な Class が付与されるみたいなのでそれを利用する。
| Class | 付与 |
|---|---|
| .page-index | インデックスページ |
| .page-archive | アーカイブページ、検索結果 |
| .page-archive-category | アーカイブページ（記事部分 - 記事タイトル下のカテゴリーリンクから） |
| .page-category-category_name | カテゴリーページ（サイドバー - 最新記事、人気記事モジュールのカテゴリーリンク、カテゴリーモジュール） |
| .header-image-enable | タイトル画像-画像とテキストを表示を使用する |
| .header-image-only | タイトル画像-画像だけ表示を使用する |
| .enable-top-editarea | タイトル下のカスタマイズを使用する |
| .enable-bottom-edit-area | フッター上のカスタマイズを使用する |
| .globalheader-off | 有料プラン-ヘッダとフッタを表示しないを有効化する |
| .browsing-with-smartphone | User Agent に Mobile を含むデバイス（スマホ）でブログを訪問する |
スマホ未対策、PC対策済
#container {
margin-top: 37px;
}
.globalheader-off #container{
margin-top: 0;
}
公式テーマの CSS を覗いたらこんな感じで対策していた。スマホ閲覧時はグローバルヘッダーの高さが 44px に増えるため、44px - 37px = 7px 分コンテンツがグローバルヘッダーの下にめり込んでしまう。
スマホ対策済、PC対策済
#container {
margin-top: 37px;
}
.browsing-with-smartphone #container {
margin-top: 44px;
}
.globalheader-off #container{
margin-top: 0 !important;
}
スマホ未対策版にスマホ閲覧時を示す body の class browsing-with-smartphone を用いた #container の margin-top 指定を追加した。.globalheader-off の指定は優先度の不安があるので 念のため important に。
スマホ対策済、PC対策済（個人仕様）
body {
padding-top: 37px;
}
body.browsing-with-smartphone {
padding-top: 44px;
}
body.globalheader-off {
padding-top: 0 !important;
}
余白を取るという意味では公式テーマと変わらないけれど、余白を指定したい要素を行の左端に揃え、階層を浅くし、可読性 etc を向上させてみたバージョン。ただし body に padding を指定するという気持ち悪さはある。
