はてなブログのタイトル画像を縦横中央に揃える方法

f:id:kamasho:20160803150243j:plain

はてなブログはヘッダーに表示する画像（タイトル画像）を変更できるけど、何も考えずに適当な画像を設定すると、下に余白が生じてしまうっぽい。

加えて、要素がblockになってるみたいで、クリック可能な領域が横いっぱいに広がってしまう。

これを直したので、方法を残しとく。

他の人がとっくに書いてそうだし、ちゃんとググってないからもっと別の回避策があるかもしれないけどね。

デザインCSSの記述

タイトル画像を中央に揃えるためのスタイルシートを作る。

基本下のコードのままで大丈夫なはず。

#blog-title {
    // 横方向の中央揃え
    text-align: center;   
}

#blog-title-inner {
    // 要素のインライン化
    display: inline-block;
    // タイトル画像のサイズ
    width: 400px;
    height: 110px;
    // タイトル画像の余白
    margin: 2em;
    // タイトル画像の表示を中央にする
    background-position: center center !important;
}