6月9日:WP修正、レスポンシブ対応、その他修正

昨日ブログページの画像がレスポンシブ画面に対応できていなかったが、先生のアドバイスで、参考サイトを教えて頂いた。

【レスポンシブ】PCとスマホで違う画像に切り替える方法!CSSだけで簡単画像切り替え! | FASTCODING BLOG

 

f:id:hinairo:20210610002224p:plain

これをCSSに記述したら一発で解消した。

またheaderのメタタグにview pointは記載されているのを確認。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

f:id:hinairo:20210610002336p:plain

 

 

その他画面を確認していると文字が横いっぱいまで広がってい他ので、スペースを作る為修正。フロント・メニュー・カタログ・フッターをスマホ画面を見ながら確認して修正。

f:id:hinairo:20210610003238p:plain

f:id:hinairo:20210610003242p:plain

f:id:hinairo:20210610003246p:plain

フロントページのみスマホ画面で上から下まで右に白い空白スペースができていたのでタグを確認したが何が作用して空白スペースを生み出しているか不明。他のページは右側にスペース無し。

f:id:hinairo:20210610003852p:plain



 

 


オーナーとの相談でトップ画像3枚目がやっと決まった。

何枚かのうち選んでもらってこれで決定。

 

f:id:hinairo:20210610002804p:plain