便利

<スマホレスポンシブ対応📱>オリジナルタイトル画像のサイズを合わせる方法

Pocket

先日、ブログのタイトルをリニューアルし、

f:id:mottokoikoi:20200129153753p:plain

↓↓↓

f:id:mottokoikoi:20200129153811p:plain

「いいね!」してくださった方も多くて(ありがとうございます!)
すっかり満足しておったのですが・・・

ルンルン気分で
スマホをみてびっくり(゜o゜;

ビフォー

f:id:mottokoikoi:20200129153941p:plain

注目

↓↓↓

f:id:mottokoikoi:20200129155313p:plain

んなーーーーーー!!!!
タイトルが見切れてるじゃないかーーーーーーーー(´;ω;`)

・・・というわけで直しました^^

↓↓↓

アフター

f:id:mottokoikoi:20200129153927p:plain

スマホ画面サイズでもすっきり収まりました。
スマホでブログをみてくださっていた方、大変失礼いたしました。

オリジナルタイトル画像のサイズ調整方法

参考にさせていただいたサイトがこちら。ありがとうございます!

↓↓↓

https://blog-support.jp/hatenablog-header-picture/

こちらのサイトに記載のコードを
【デザインCSS】にコピペするだけで・・・

f:id:mottokoikoi:20200129153941p:plain

↓↓↓

f:id:mottokoikoi:20200129153927p:plain

こんなふうにスマホの画面サイズに合ったタイトルになりました^^
ちなみにレスポンシブモードを解除するという手もあるのですが、
(こんなふうになります↓)

f:id:mottokoikoi:20200129154454p:plain

レスポンシブモードを解除してしまうと
せっかくカスタマイズして可愛く、オシャレに、見やすくした

●目次

f:id:mottokoikoi:20200129154822p:plain

●グローバルナビゲーション

f:id:mottokoikoi:20200129154850p:plain

●記事タイトル

f:id:mottokoikoi:20200129154902p:plain

●見出し

f:id:mottokoikoi:20200129154915p:plain

これらのデザインCSSが、スマホ画面だと反映されなくなってしまい、
スマホはスマホで一から頑張って
デザイン変更をしていかないといけなくなってしまうのです(涙)

スマホ用にタイトル画像を作り直そうか迷っていたところに
上記サイトをみつけて感謝感謝です。
おかげで、レスポンシブモードのまま、

タイトルサイズが

  • PCはPCサイズ、
  • スマホはスマホサイズ

でみられるようになりました。

神様です。ありがとうございます!

f:id:mottokoikoi:20200129155108p:plain
ABOUT ME
mottokoikoi
3児の母でアラサー専業主婦。