はてな ヘッダー写真を横に広げて余白をなくす CSSコピペだけ
ヘッダー（トップタイトル）画像の余白
こんにちわ。今日はヘッダー部分の余白をなくして、写真を横幅いっぱいに表示させる方法をご紹介します。
いろんなサイトを見て勉強させてもらいました。そして、いろんな方法で試したのですがどれもうまくいきませんでした。
ヘッダー画像写真が、縦に伸びてしまったり、大きくなりすぎたり、何も変わらなかったり。。
ですが、やっとできた方法がありました。
でもこれは、あくまで私が成功しましたが、成功しないこともある事をご了承下さい。
ちなみに、私は、iPadでヘッダー写真をセレクトして貼り付けました。
なので、iPadとIPHONEではヘッダー写真が綺麗に映ります。ヘッダー横の余白もありません。ですが、パソコンで見たら、思い切り余白ができてしまい、見た目が悪すぎです。
こんな感じです。
ヘッダー画像の写真を横に広げ余白を取る方法
１ CSSをコピペ
下記のURLをコピペして下さい。
#blog-title-inner {
height: 200px;
background-size: cover;
background-image: url("背景画像URL");
background-position: 50% 50%;
}
２ デザイン→設定→ デザインCSS にコピペ
３ 余白が消えた
見事、ヘッダーのタイトル横の余白が消えました。
ちなみに、iPad、IPHONEはもともと、問題なくヘッダー写真が映っているので、
特に修正しませんでした。
参考にさせていただいたサイト
ヘッダー画像の余白をなくしスマホも美しく表示させる【はてなブログ】 - くうかんしんぷるライフ
ヘッダーに画像を貼る方法（余白なし横幅、画面いっぱいに表示） - Bambi's BLOG @ hatena
【はてな】ヘッダーの余白を無くして画像を横幅いっぱいに表示する方法【カスタマイズ】 - ごはん炊けたよ～ッ！
【はてなブログ】文字色・背景色のカスタマイズ一覧！ - とある科学の備忘録
はてなブログのヘッダー、タイトル画像の設定について - Minimal Green
はてなブログ初心者ならではの問題点と解決策
