AIUEO Lab2

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

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

photo by Norio.NAKAYAMA

はてなブログ継続5日目です。

今日はヘッダーに画像でも入れようかなと、いじっていたら…

f:id:akiueos:20140308185345j:plain

余計な空白が入りました。

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

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

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

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

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

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

テーマは「Report」

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

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

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

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