「はてなブログをカスタマイズしていて、ヘッダーに画像を入れたいな…と試してみたけれど、うまくいかない…。」
そんな方に向けた記事です。
私自身、カスタマイズ途中に空白ができてしまい戸惑いました。
なぜか、ヘッダー下に余計な空白が入ります。
はてなブログのヘッダー部分は、画像を貼るとなぜか自動で高さ200pxに調整されてしまうみたいです。 ヘッダーの画像を200pxで作成してもいいのですが、もう先に画像作っちゃったよ！
作りなおすのはひとまず面倒なので、cssでブログ側を合わせることにしました。
cssでヘッダー下の空白を消す
管理画面のデザイン＞カスタマイズ＞デザインcssに下記のcssを追記するだけ。
/* ----- ブログタイトル下のスペース調整 ---- */
#blog-title{
height:100px;
}
作った画像によって高さは変更してください。
テーマは「Report」
他のテーマでは試していないので、テーマによって違うと思います。 ちなみに、このブログのテーマは公式テーマの「Report」です。
他のテーマでも公式テーマならタグは同じ様な気がしますが…。 もし、うまくいかない場合はChromeでいうデベロッパーツールや拡張機能のFirebugを使用して確認してください。
デベロッパーツールの使い方はこちらを参考にしてみてください。
