はてなブログのヘッダーに画像を設定したところ、余分な領域ができてしまったのでジャストフィットさせる方法を覚え書き。メリットや気になる点についても触れてみました。
ブログのヘッダーを設定し、印象的なデザインへ！
ブログのヘッダーに画像を設定する
デザイン⇒カスタマイズ（スパナのマーク）⇒背景画像⇒ヘッダの順にクリックする。
『画像をアップロード』⇒ファイルを選択し、準備した画像をアップロード。
「表示設定」は『画像だけ表示』を選択。
ヘッダー画像を変更するだけでオリジナティあふれるブログトップ画面の出来上がりです。
ヘッダーの余白（ムダなスペース）を消す！
ここでもう少しスパイスを。このブログはテーマ「Contents」を使用させてもらっています。レスポンシブデザインにも対応している素晴らしいテーマです。ただし、既定のヘッダー設定には若干の気になる点がありました。
ヘッダーに余白ができてしまうことです。
デフォルトのヘッダーの上下に余白があることは、若干のユーザビリティ低下を招く可能性があります。（明確な意図があれば別ですが。）ヘッダー画像のサイズを変更し、わずかなpx(ピクセル)の余白をキチンと埋めることで、スムーズに記事へ誘導することができるのではないでしょうか。
はてなブログのヘッダーに画像をアップロードすると、自動的に200pxに調整されてしまいます。これを自分のブログに合ったサイズに調整します。ちなみにこのブログは130pxにしています。
デザイン⇒カスタマイズ（スパナのマーク）⇒デザインCSSの一番下にでも以下のコードをコピペします。コードはAIUEO Lab2さんの記事を参考とさせてもらいました。ありがとうございました。
/* ---- ブログタイトル下のスペース調整 --- */
#blog-title{
height:200px;
}
これでジャストフィットです('ω')ノ
ヘッダーを「画像のみ」としたことによる影響
トップページへのリンク領域がこの部分だけになってしまいました。調整方法があるかな？と思ってブログテーマ「Contents」の作者であるJOE (id:dreamark)さんの公式ページを見てみましたが同様でしたので、この領域を拡大させることは困難なのかもしれません。あればご教示いただければ嬉しいっす・・・
最後までお付き合いいただき、ありがとうございました。
皆様は、ブログのヘッダーをどのように工夫されていますか？
よければ読者登録お願いします。必ず自分も読者になりますので、これをひとつの出会いとしてブログを拝見させてください。勉強させてもらいます。
