【はてなブログ】ヘッダーに画像を貼る方法（余白なし横幅、画面いっぱいに表示）

ヘッダー画像を画面の横幅いっぱいに表示したい場合のやり方。


1280px以上またはそれ以上の画像を用意する。
ダッシュボード→デザイン→カスタマイズ→一番上の「背景画像」から変更する。
（注）「ヘッダ」からではないので注意すること！

2018/12/04 - 追記

お問い合わせがあったので、追記します。
このやり方だと、大きめの画像を用意して、ブラウザの横幅いっぱいにカバーするように表示するので、画面のサイズによって見え方が変わってしまいます。
（端っこが切れて表示される場合がある）

※端っこまできちんと見えないとダメな画像の場合は向いてないやり方です。
切れてしまうと困る場合のやり方は、この記事の下の方で説明していますので、ご参考になさってください。

こんな感じの画像に向いている↓↓

ヘッダの高さやタイトルのフォントやサイズ、位置は下記のCSSで設定できます。
CSSをコピーする場所は、
デザイン→カスタマイズ→「{}デザインCSS」←の中です。

#blog-title{
position:relative;
height:400px;/*ヘッダの高さ-デザインによって変更してください*/
}

#title{/*タイトル文字部分*/
font-size:50px;/*フォントサイズ*/
font-family:Courier;/*フォント*/
margin:100px auto;/*タイトルの位置、100pxのところを調節する*/
padding:30px;/*タイトル文字の背景の周りの幅*/
background-color:rgba(255,255,255,0.5);/*文字の背景色（設定は白の半透明）*/
}

#title a{color:black;/*タイトルの文字色*/ }

#blog-description{
display:none;/*ブログ説明文を表示しない*/
}

はてなブログのデザイン-ヘッダ画像から設定する場合：

用意する画像の大きさ　幅1000px 高さ200px
ヘッダを横幅全体に表示をしない場合は下記のCSSを入れてください。

はてなブログのデザイン→ヘッダ画像から設定する。

#blog-title-inner{
    background-size: contain;
    background-repeat: no-repeat;
}

レスポンシブにしている場合はスマホ表示に合わせて下記のCSSも必要になります。

@media (max-width:767px) {
    #blog-title-inner { 
    background-size:500px;/*画像の横幅-デザインによって変更してください*/}
    #blog-title{
    position:relative;
    height:100px;/*ヘッダの高さ-デザインによって変更してください*/}
}