春よこーい diary

寂しがり屋の一人好きブログ。 中国生活/夫婦生活/旅行/健康/猫/グルメ/

はてな ヘッダー写真を横に広げて余白をなくす CSSコピペだけ

 

 

ヘッダー(トップタイトル)画像の余白

こんにちわ。今日はヘッダー部分の余白をなくして、写真を横幅いっぱいに表示させる方法をご紹介します。

 

いろんなサイトを見て勉強させてもらいました。そして、いろんな方法で試したのですがどれもうまくいきませんでした。

 

 

ヘッダー画像写真が、縦に伸びてしまったり、大きくなりすぎたり、何も変わらなかったり。。

 

ですが、やっとできた方法がありました。

でもこれは、あくまで私が成功しましたが、成功しないこともある事をご了承下さい。

 

ちなみに、私は、iPadでヘッダー写真をセレクトして貼り付けました。

なので、iPadとIPHONEではヘッダー写真が綺麗に映ります。ヘッダー横の余白もありません。ですが、パソコンで見たら、思い切り余白ができてしまい、見た目が悪すぎです。

 

 

こんな感じです。

 

f:id:trainrando:20190804010401p:plain



ヘッダー画像の写真を横に広げ余白を取る方法

 

1 CSSをコピペ

 

下記のURLをコピペして下さい。

 

#blog-title-inner {
height: 200px;
background-size: cover;
background-image: url("
背景画像URL");
background-position: 50% 50%;

}

 

 

2 デザイン→設定→ デザインCSS にコピペ

 

f:id:trainrando:20190804010906p:plain

 

 

 

3 余白が消えた

 

f:id:trainrando:20190804011018p:plain

 

 

見事、ヘッダーのタイトル横の余白が消えました。

 

ちなみに、iPad、IPHONEはもともと、問題なくヘッダー写真が映っているので、

特に修正しませんでした。

 

 

参考にさせていただいたサイト

ヘッダー画像の余白をなくしスマホも美しく表示させる【はてなブログ】 - くうかんしんぷるライフ

 

ヘッダーに画像を貼る方法(余白なし横幅、画面いっぱいに表示) - Bambi's BLOG @ hatena

 

【はてな】ヘッダーの余白を無くして画像を横幅いっぱいに表示する方法【カスタマイズ】 - ごはん炊けたよ~ッ!

 

【はてなブログ】文字色・背景色のカスタマイズ一覧! - とある科学の備忘録

 

はてなブログのヘッダー、タイトル画像の設定について - Minimal Green


はてなブログ初心者ならではの問題点と解決策

 

www.trainrando.com

 

 

www.trainrando.com

 

 

www.trainrando.com

 

 

www.trainrando.com

 

 

www.trainrando.com