便利

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

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児の母でアラサー専業主婦。
%d人のブロガーが「いいね」をつけました。