はてなブログのヘッダー画像のレスポンシブ化

テキストでブログ名が表示されてるならいいんですが、せっかくなので画像でという方もいらっしゃるでしょう。

見栄えの問題とかロゴの問題とか。

わたしもそんな一人だったんですが、いかんせんこれがなかなかな問題で。

テーマのソースを変えられれば難しいことがなかったんですが、無理そうだったのでCSSで対応。

カスタマイズでヘッダーの画像を設定すると背景として入れられてしまうので

背景に設定された要素を　background-size:contain;　に設定。画像がはみ出すことがなくなり、使ってる画像の縦横比を固定するようにCSSを書いてやればいいんだろうなということでなんとかかんとかして今の形になりました。

ゼロから作るよりはぜんぜん楽なんですけどやっぱりほかの人がマークアップしたものをCSSで整えるとなると思いもよらないことが起こるものですね。

また後で詳しくソースを書くつもりです。