スマホでWordPressを確認したときに画像がはみ出てしまう理由とその解決法! | WordPressのはじめ方講座~IT音痴でも自分でできるホームページ運営方法~川那辺 樹~

WordPressのはじめ方講座~IT音痴でも自分でできるホームページ運営方法~川那辺 樹~

WordPressを使ったホームページの運営方法をWebデザイナー歴15年以上の私が惜しげもなく全部公開!

WordPressでサイトを作成する場合、多くの方はスマホで作業をするのではなくパソコンで作業をしていることでしょう。

パソコンで作業をした場合、パソコンで作成したページがどのようになっているかまでは確認すると思いますがスマホでは確認しないという方もいるでしょう。
 

 

 


それ、ヤバいです(笑)

パソコンで確認したページでは思った通りに表示されていたとしてもスマホで確認したら、思った通りになってないということはよくあります。

スマホでWordPressを見たときに、特に一番起こりうるのが画像がはみ出てしまうというトラブル


これはなぜこのようなトラブルが起きるのかを説明しますと、画像の横幅サイズをピクセル指定しているからです。

例えば画像の表示を横幅1000pxというサイズで表示しているとします。

 

 

 

パソコンで横幅1000pxと言えば普通に表示できますが、スマホでは確実に収まりきらないサイズとなります。

 

そこで、画像の横幅サイズを100%などのようにパーセンテージ表示しているとこの問題は解決します。

つまり、パソコンで表示しても横幅いっぱい、スマホで見ても横幅いっぱいに表示されるのではみ出し問題は解決するということですね。


ここでは具体的なコードの書き方は省略しますが、概念として理解してもらえれば解決は簡単だと思います。

以上参考にして下さいね。

 

【無料サービス】ビックリマーク無料であなたのWordPressにまつわる悩み事を解決 右差し WordPress無料相談会 ラブレター アメブロよりもパワーアップした情報を送る 右差し WordPress集客メール講座
【募集中メニュー】 本自分で学びたい方向けサービス
メモ0から一緒に作る!WordPress作成講座右差しWP-ZERO(ワードプレスゼロ)
メモ少しだけ学びたい方向けWordPress作成講座右差しWP-POWERUP
¥専門業者に代行で作業を依頼したい方向けサービス
チョキWordPressをプロに作って欲しい!右差しMAKE-WP|WordPress作成