沖縄移住から名古屋移住のweb人アフィリエイト雑記

沖縄に移住していたが、故あって名古屋へ移住したカップルがアフィリエイトでダブルフリーランスを目指すための雑記

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

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

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

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

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

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

 

タイトル画像で準備したサイズは1000 × 200です。

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

 

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

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

 

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

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

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の世界って奥深いんですね。