AIUEO Lab2

1年のうち250日は夕飯を作る主夫が、iPhoneや料理、気になったものを紹介するブログです。

はてなブログのヘッダー画像下にできる空白を消す

はてなブログのヘッダ下に入ってしまう空白を消す方法

「はてなブログをカスタマイズしていて、ヘッダーに画像を入れたいな…と試してみたけれど、うまくいかない…。」

そんな方に向けた記事です。

私自身、カスタマイズ途中に空白ができてしまい戸惑いました。

f:id:akiueos:20140308185345j:plain

なぜか、ヘッダー下に余計な空白が入ります。

はてなブログのヘッダー部分は、画像を貼るとなぜか自動で高さ200pxに調整されてしまうみたいです。 ヘッダーの画像を200pxで作成してもいいのですが、もう先に画像作っちゃったよ!

作りなおすのはひとまず面倒なので、cssでブログ側を合わせることにしました。

cssでヘッダー下の空白を消す

管理画面のデザイン>カスタマイズ>デザインcssに下記のcssを追記するだけ。

/* ----- ブログタイトル下のスペース調整 ---- */
#blog-title{
height:100px;
}

作った画像によって高さは変更してください。

テーマは「Report」

他のテーマでは試していないので、テーマによって違うと思います。 ちなみに、このブログのテーマは公式テーマの「Report」です。

他のテーマでも公式テーマならタグは同じ様な気がしますが…。 もし、うまくいかない場合はChromeでいうデベロッパーツールや拡張機能のFirebugを使用して確認してください。

デベロッパーツールの使い方はこちらを参考にしてみてください。

素敵なサイトのデザイン(css)をパク…参考にする方法 - AIUEO Lab