渋谷で働く営業本部長のブログ

渋谷で働く営業本部長のブログ

渋谷で働く営業本部長のブログ

はてなブログ:スマホでヘッダー画像がきちんと表示されない場合の解決方法

f:id:ss17935:20190225083746j:plain

 

今回はトラブルシューティングです。

はてなブログのテーマ”Minimalism”をカスタマイズしてます。

コピペだけで試行錯誤しているのですが、思い切ってテストサイトを本番サイトにコピったりしてました。

そんな時気付いたのですが...

スマホサイトでヘッダー画像がうまく表示されていない?」

以前はきちんと表示されていたと思ったけど〜。

そもそも、レスポンシブルデザインなんだから自動で表示されるんじゃないの〜?

と思ったりしました。

 

で、Google 先生に聞いてみると、ありますね。

理由は不明ですが、スマホサイトで画像がうまく表示されない件。

解決策は、以下のコードを「CSSデザイン」へコピペするだけ。

 

 ***

@media (max-width: 480px){
#blog-title-inner,#title a{
height:100px!important;
}

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

***

 

本当にこれをコピペするだけで解決しました。

 

この解決策は、以下のサイトにお世話になりました。

 

はてなブログカスタマイズ ヘッダー画像がスマホで小さくならない - うぇぶじん

 

ありがとうございました。

 

↓ ランキングに参加しています。よろしければポチッとして下さい。

にほんブログ村 ブログブログ ブログノウハウへ