不器用人の地球適応記

不器用人の地球適応記

不器用人、地球適応の訓練課程を綴ります

はてなブログタイトル画像を規定サイズ(1000×200)より小さく表示する

f:id:b_bukimi:20180523122135g:plain

 

はてなブログのタイトル画像(ヘッダ画像)の規定サイズは1000×200サイズとされています。

前々から少し大きすぎるような気がしていたので、どうにか小さくする方法を検討しました。

※素人考えなので、使用は自己責任でお願いします、

 

CSSをいじるだけ

今回偶然発見したのが以下の方法です。

以前このブログのカスタマイズ要綱を別記事で書きましたが、その中でも挙げさせていただいたうぇぶじん様の記事を再度紹介させていただきます。

 

affiliate-couple.hatenablog.com

 

以前この記事を紹介させていただいた意図は、スマホにおいてもタイトル画像を綺麗にリサイズ表示するためでした。

従って使用例としては、一定の画面サイズ以下( @media (max-width: スマホorタブの画面サイズ))になるとリサイズが働くよ!というもので、私のブログでも有り難くこれを使わせていただいていました。

 

今回その画面サイズ指定をなくし、高さのリサイズ値を変更したところ、(どの画面サイズでも)小さめのブログタイトル画像を表示することができました。

何度も知見をいただき誠にありがたいことです...

 

以下うぇぶじん様の知見をご参考に、

 

 

 #blog-title-inner,#title a{
 height: 75px !important;
 }
 #blog-title-inner {
 background-size: contain;
 }

 

 

75pxの値を変更すると、タイトル画像の大きさを変更できます。

高さ(height)のみの指定ですが、どうみても横幅も変わっています。元画像の比率は維持されるようです。

※設定ーデザインーヘッダには1000×200の画像を貼っています。また「画像だけを表示」に指定しています。

 

background-size: contain; などについては、うぇぶじん様の元記事をご確認ください。詳しく解説がなされています。

 

f:id:b_bukimi:20181002162235p:plain

(小さくなりました)

 

課題点

画像サイズは小さくできたのですが、上下に余白があります。

#blog-titleにおいて上下のpaddingが効いているようですが、変更できません...

こねくり回してもうんともすんともなのでお手上げです。

もし何とか変更出来た方がいらっしゃいましたら、どうぞご教授ください...