【コピペでOK】はてなブログのタイトル画像の高さを変更する・上下の余白を消す【css】

以前の記事の追記です。
はてなブログのヘッダー、タイトル画像の設定について - Minimal Green

はてなブログのタイトル画像アップロード機能

はてなブログでは、管理画面＞デザイン＞カスタマイズ＞ヘッダ＞タイトル画像から、画像をアップロードして簡単にタイトル背景画像を変更することができます。

デフォルトでは幅1000p高さx200pxに切り取られるのですが、CSSを追記することで画像の高さを変更することができます。

ここでは高さ300pxの画像を使ってタイトル背景の画像を変更する場合のカスタマイズ例を書いてみます。

「画像とテキストを表示」させる場合

タイトルの背景の画像に重ねてタイトルテキストと説明文を表示させる場合、ブログタイトルには.header-image-enable というclassが付与されます。
以下のコードをデザインCSSに追記すると

/* header-image-enableタイトル画像の高さを変更する */
.header-image-enable #blog-title #blog-title-inner {
    height: 300px;/* デフォルトでは200px.画像の高さを指定 */
}
/* タイトルテキストの位置 */
.header-image-enable #title {
    padding-top: 150px;
}

/* タイトル画像上下の余白を取る */
    #blog-title {
    margin: 0 auto;
    padding: 0;
}

このように表示されます。

タイトルテキストの位置の150pxは高さに合わせて変更してください。

「画像のみ表示」させる場合

タイトルに画像のみ表示させる場合は.header-image-only というclassが付与されます。
以下のコードをデザインCSSに追記すると

/* header-image-onlyタイトル画像の高さを変更する */
.header-image-only #blog-title #blog-title-inner {
    height: 300px;/* デフォルトでは200px.画像の高さを指定 */
}

/* タイトル画像上下の余白を取る */
    #blog-title {
    margin: 0 auto;
    padding: 0;
}

このように表示されます。

タイトル画像上下の余白を取る

タイトル上下の余白を取るには

 #blog-title {
    margin: 0 auto;
    padding: 0;
}

はてなブログのタイトル機能は、なかなか制約が多いんですけど、CSSのコピペで少し自由にカスタマイズできますね。
自作のテーマで検証してみましたが他のテーマで上手くいかないなど不具合があれば教えて下さい。