【WORDPRESS】スマホで画像がはみ出る場合の解決策

WORDPRESS
この記事は約5分で読めます。


WORDPRESS
使ってる人
投稿した記事をスマホで表示すると、
画像がはみ出てグラグラしちゃう。
これじゃ、誰も、読んでくれないよ。
う~ん、困ったな。

 

この記事では、こんなWORDPRESSの悩みを解決します。

(まかせてちょーよ。)


WORDPRESSの投稿機能で、記事に画像を載せるとき、スマホの画面では、画像がはみ出て表示されることがあります。

グラグラするし、非常に見にくいです。


グーグルで調べても、すぐには解決しなかったので、解決策を紹介します。

解決策①と解決策②の二つあります。

※おそらく、解決策①で解決しなかった人が、このページに来ているケースが多そうです。

なので、解決策①をさっと読んで、解決策②のほうを、早くみてもらったほうがいいかもしれません。

[WORDPRESS]スマホで画像はみ出る問題の解決策①

インターネットで調べると


「つぎの方法で解決します」という記事が多かったです。

下の記述を、テーマエディタで、 style.cssに書き込むと解決するようです。

img { max-width: 100%; height: auto; } 

やり方を丁寧に説明すると


①ダッシュボード=>外観=>テーマエディタをクリック

【WORDPRESS】スマホで画像がはみ出る場合の解決策(画像①)

②style.cssというファイルが開くので、

img{ max-width: 100%; height: auto; }

を書きこむ。

※空いているところなら、どこでもいいです。

迷ったら、一番下とかに追記してください。

③下のほうにある「ファイルを更新」ボタンを押す。

【WORDPRESS】スマホで画像がはみ出る場合の解決策(画像②)

④これで、カンリョーです。

このコマンドの意味

img{ max-width: 100%; height: auto; }の意味ですが、

  • 画像の横幅は、画面の100%までが上限ですよ。
  • 画像の縦幅は、横幅に合わせてくださいね。

って、感じでしょうか。

結論からいうと

大抵の人は、上記の設定でうまくいくようです。

ただ、私の場合、上手くいきませんでした。

多分、理由は私が画像を中央揃えにしていたことが原因だろうと、
思います。

画像を中央揃えにしなければ、問題は解決するかもしれません。

しかし、中央揃えのままで、なんとかしたいという人も多いはず。

だって、中央揃えのほうが見映えがいいじゃないですか。

(ここは、ゼッタイに妥協しない。ゼッタイに。)

なので、そういう人には解決策②がおすすめです。

[WORDPRESS]スマホで画像はみ出る問題の解決策②

私の場合、これで解決しました

下の記述を、テーマエディタで、 style.cssに書き込むと解決するようです。

.wp-block-image{ max-width: 100%; height: auto; }
figure{ max-width: 100%; height: auto; }  
img { max-width: 100%; height: auto; }  

やり方を丁寧に書くと

①ダッシュボード=>外観=>テーマエディタをクリック

【WORDPRESS】スマホで画像がはみ出る場合の解決策(画像③)

②style.cssというファイルが開くので、以下の記述を追加

.wp-block-image{ max-width: 100%; height: auto; }
figure{ max-width: 100%; height: auto; }  
img { max-width: 100%; height: auto; } 

※空いているところなら、どこでもいいです。

迷ったら、一番下とかに追記してください。

③下のほうにある「ファイルを更新」ボタンを押す。

【WORDPRESS】スマホで画像がはみ出る場合の解決策(画像④)

④これで、カンリョーです。

おそらく

WORDPRESSで、画像を中央揃えに設定した場合、figureという領域の中に画像が配置されます。

その状態で、画像の横幅の上限を100%に設定すると、画面の100%じゃなく、figure領域内の100%に設定されてしまう。

ということっぽいですね。

※上記の設定の3行のうち、最初の一行はいらないかも。

注意点:

つぎのような場合があります。

  • スマホでは、画像がはみ出ずに表示されている
  • WORDPRESSの投稿のカスタマイズで確認すると、画像がはみ出たまま表示される

そういうこともありますので、実際にスマホの画面で確認してくださいね。

[WORDPRESS]スマホで画像はみ出る問題の解決策(まとめ)

スマホで表示すると、画像がはみ出て見にくい問題は、以下ということで、大丈夫だと思います。

①大抵の場合、style.cssに、以下を追記で解決。

img { max-width: 100%; height: auto; } 

②画像を中央揃えにしている場合、以下を追記で解決

.wp-block-image{ max-width: 100%; height: auto; }
figure{ max-width: 100%; height: auto; }  
img { max-width: 100%; height: auto; } 

参考になりましたか?

これで解決したという方がいれば、よかったです。

では、またまた~。

コメント

タイトルとURLをコピーしました