はてなブログのグローバルヘッダーの高さは User Agent で変わる

はてなブログのグローバルヘッダーの高さは、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 を指定するという気持ち悪さはある。