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

Advertisements

最終更新日2020年11月27日 by samurai

このブログを開設した時に行ったカスタマイズを紹介いたします。

現在サイトは閉鎖いたしましたので「はてなブログ」でのカスタマイズとなります。

せっかくヘッダー画像を準備したのに,レスポンシブデザインを採用した時,スマホで見えるヘッダー画像サイズが小さくならずに苦労しました。

その時の対応を備忘録を兼ねて記事にしました。

使用したテーマははてなブログテーマで一番人気がある「Brooklyn」です。

はてなブログをやるなら、制限が少ないはてなブログProがオススメ!

ヘッダー画像が小さくならない

タイトル画像で準備したサイズは1000 × 200です。(2020年11月 画像は差し替えております。)

レスポンシブ・デザインということでパソコンのデザインが,そのままスマホでも縮小されて表示されるはずですが,何故か縮小されず大きなタイトル画像のままなのです

レスポンシブ・デザインモードにするとスマホのカスタマイズ設定は無効になります。

ということは何らかパソコン画面で設定を行わなければいけないということです。

これは困ったぞ,せっかくお気に入りのテーマなのに・・・

せっかく作ったタイトル画像なのに・・・

※上記ように文節にマーカーがスゥーっと引けるようなカスタマイズは下記 ⇓

CSSの設定をしなくちゃいけない

いろいろ調べていると,どうやらスマホ対策用のCSSを追加する必要があるみたいです。

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

このCSSを追加しないといけないようです。

デザイン ⇨ カスタマイズ ⇨ デザインCSS へ追加

問題解決しました

background-size: contain;  というのがスマホサイズ指定へ対応のポイントのようです。

containを指定すると画像の幅と高さの比率は固定され,表示領域が変更されても、画像が全て表示される設定になっています。

とりあえずCSS追加で問題解決しましたが,CSSの世界って奥深いんですね。

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

WordPress SAMURAI

0

0
Would love your thoughts, please comment.x
()
x
Scroll to Top