Recommended!2020年オススメする有料WordPressテーマ7選 Read More
はてなブログカスタマイズ

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

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

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

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

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

使用したテーマははてなブログテーマで一番人気がある「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の世界って奥深いんですね。

関連記事
はてなブログカスタマイズ

役に立つ!はてなブログのカスタマイズ20選

併設していた「はてなブログPro」を解約し、サイトを閉鎖いたしました。…
はてなブログカスタマイズ

はてなブログ グローバルメニューの文字をホバーしたら他の文字が半透明表示になるCSS

はてなブログはWordPressみたいにカスタマイズできるというもので…
はてなブログカスタマイズ

はてなブログのカスタマイズ!シンタックスハイライトを挿入する

はてなブログのカスタマイズを紹介する際、CSSやHTMLのシンタックス…
WordPressテーマをテストしているサブサイトはこちらからどうぞ ↓

テストサイトに各WordPressテーマを実際にインストールしてみました。
各テーマ毎に少しカスタマイズしたところもありますが、基本的に同じ画像、同じ記事で構成していますので、参考になるかと思います。

2 Comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です