読者です 読者をやめる 読者になる 読者になる

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

広告

どうも、ゴトーだ。

f:id:hogehoge223:20170208081817j:plain

俺は三度の飯よりプログラミングが好きでな。
最近は、はてなブログのカスタマイズにハマっている。

最近ブログテーマの公開を行ったのだが、その時に色々な方のブログを見ていると、ヘッダー画像を挿入している時に、画面サイズによっては表示が崩れてしまっている人が見受けられた。
多様なデバイスに対応するためのスタイリングを今回は紹介しよう。

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

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

f:id:hogehoge223:20161208220324p:plain

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

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

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

PCテーマ + 固定幅

これはレスポンシブまたはスマホ向けのテーマに利用するもので、PCテーマでは多く場合で固定幅になっているので、その場合は必要ない。

ただし、「PCテーマ」かつ「可変幅」の場合は効果があるので導入を検討して欲しい。

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以上」みたいな条件設定をしているが、それなら最初から縦横比でやったほうがトラブルが起きにくいはずだ。

改変方法

f:id:hogehoge223:20161208132750j:plain

例えば上の画像をヘッダー画像に挿入するとする。

この画像は横幅「650」、縦幅「350」なので、縦横が約54%だ。
そのため、先ほどの改変ポイントに「54%」を挿入することになる。

.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をブログに反映させれば終了だ。

はてなブログへの反映

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

f:id:hogehoge223:20161208134207p:plain

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

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