WORDPRESS
使ってる人

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

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

（まかせてちょーよ。）

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

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

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

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

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

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

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

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

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

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

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

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

手順1. ダッシュボード＝＞外観＝＞テーマエディタをクリック

手順2. style.cssというファイルが開くので、つぎのコードを書きこむ。

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

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

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

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

これで、完了です。

このコマンドの意味

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; }　　

やり方を丁寧に書くと

手順1. ダッシュボード＝＞外観＝＞テーマエディタをクリック

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

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

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

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

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

はい、これで完了です。

おそらく

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

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

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

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

注意点：

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

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

[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; }　

★ 参考になりましたか？

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

では、またまた～。