ページ コンテンツ

雲上寺ジェシカの腹ペコBLOG

ホットなニュースでお腹いっぱいにするBLOG

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

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

 

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