ヘッダー画像を余白なしで設定!レスポンシブ対応!

ヘッダー画像を作っていざ画像をアップロードしてみたら表示できる範囲は限られてるわ余白だらけだわで最悪やん!ってなりました。

ブログってむずかしいわ~、ということでもう作ってしまったヘッダー画像を作り直すのも嫌だし、大きさをかえちゃうのも嫌だったのでデザインCSSだけで設定しないといけない…ということでいろいろ調べました。

拾ってきたコピペコードを自分なりにちょっといじくってなんとか完了したので忘れないように記事に残しておきます。

私みたいな人を1人でも救えたら幸いです笑

/* </system> */
#blog-title {
background-image: url("画像ULR");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
text-align: center;/* 中央寄せ */
height: 300px;/* 表示したい画像の高さ */
margin: 0;
padding: 0;
top: 0;
width: 100%;/* 幅100%に */
overflow-x: hidden;
}
@media (max-width: 480px){
#blog-title {
background-image: url("画像URL");
height: 112px!important;
}

#blog-title {
background-image: url("画像URL");
background-size: contain;
}
}

デザイン⇒カスタマイズ ( スパナみたいなやつ ) ⇒デザインCSS

これをコピペして貼りつけて下さい。

あとは画像URLをいれて。余白があるようならばheight: 300pxの数字を変更、スマホ用のほうならばheight: 112pxの数字を変更してみて下さい。

 

f:id:kimi-chihi0805:20180730115723p:plain

f:id:kimi-chihi0805:20180730120921j:plain

こんな感じで完了です♪是非試してみて下さい!

スポンサーリンク