はてなブログのヘッダー画像を挿入している方のための適切なCSSスタイリング

はてなブログのヘッダー画像

はてなブログではヘッダーに独自の画像を差し込むことができる。
ヘッダー画像とは、以下の様にブログのトップに挿入された一枚絵のようなものだ。

※「よーじ通信」様から掲載許可を頂きました。ありがとうございます。

しかしはてなブログのヘッダー仕様が結構イケてなくて、「縦幅200px」がデフォルトになっていて、それだと多様なデバイスに対応できないという問題がある。

iOS製品ならまだしも、Androidデバイスを含めると横幅が多種多様なので、縦幅固定にするとヘッダー画像がマトモに表示されないことが多い。
だが、CSSでちょっとしたテクニックを使うことで、様々なデバイスに対応できるようになるので、それを紹介したい。

CSSはこちら

実は一箇所だけ改変しなくてはならないのだが、雛形はこちら。

.header-image-only #blog-title #blog-title-inner {
position: relative;
background-size: cover;
height: auto;
}
.header-image-only #blog-title #blog-title-inner:before {
display: block;
content: "";
width: 100%;
padding-top: ~%;
}
.header-image-only #blog-title #blog-title-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

このうち「padding-top: ~%;」というところだけ改変してほしい。

このスタイリングをすることで、縦横比を設定することで、デバイスがどのような横幅でもヘッダー画像が適切に表示されるようになる。
他のブログを拝見すると、メディアクエリで「~px以上」みたいな条件設定をしているが、それなら最初から縦横比でやったほうがトラブルが起きにくいはずだ。

.header-image-only #blog-title #blog-title-inner {
position: relative;
background-size: cover;
height: auto;
}
.header-image-only #blog-title #blog-title-inner:before {
display: block;
content: "";
width: 100%;
padding-top: 54%;
}
.header-image-only #blog-title #blog-title-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

はてなブログへの反映

まずは、はてなブログの設定画面から「デザイン」を選択し、デザイン設定画面を開こう。

この画面で「デザインCSS」のテキストボックスを選択したら、先ほどのCSSを末尾に挿入しよう。
最後に「変更を保存する」ボタンをクリックするのをお忘れなく！

これでヘッダー画像がデバイスサイズに応じて適切に伸び縮みしてくれるはずだ。