タイトル画像の高さを変更するCSS

8月7日朝ごはん、昼ごはん、晩ごはん - まいたけぶろぐ
昨日言及した通り、はてなブログでタイトルに画像を用いると、デフォで200px分確保されてしまうので小さな画像を使いたい場合には無駄な空白が生じてしまう。それを解決するためのCSSを忘れないようにメモ。

不具合が起こる可能性があるため、参考にする程度で

#blog-title-inner {
    background-image: url(http://cdn-ak.f.st-hatena.com/images/fotolife/B/BuntaPig/20120808/20120808124043.jpg);
    background-repeat: no-repeat;/*リピートしない*/
    background-position: center center;/*画像の位置*/
    height: 120px;/*高さ*/
    position: relative;
}

画像を表示させるために必要。

#title {
    display: inline;
    position: absolute;
    bottom: -3px;/*文字の場所*/
    font-size: 18px !important;/*文字の大きさ*/
}

タイトルの文字の表示を変更するために必要。

これでいけるはずなんだけど、各ブラウザによって挙動が異なるので注意。

chrome

FireFox

IE

新しい画像にしたらCSSを剥ぎ取る予定だから、そこまでいじらなくてもいいか・・・