【WordPress】記事をモバイルのプレビューで見たときに画像がはみ出してしまう時の対処法

WordPressで画像付きの記事を作成したら、完成したはいいものの、モバイルのプレビューで表示させたら画像がはみ出とるやないかい！！ってなってしまっていることがあると思います。

この問題ですが、実はちゃんとスマホで見えてはいたりするのですが、（OSによってははみ出たままかもしれません。）SEO的に影響があるようでそのまま放置しておくと検索順位が上がらないという事態に陥る場合があります。（実際この問題を修正したら検索順位があがり、スマホからのアクセスが増えました）

そのため、今回はモバイルのプレビューで画像がはみ出してしまう、サイズがおかしくなってしまう現象について対処法をご案内いたします。

SEO対策にもなるかと思いますので、この問題で頭を悩ませている方がいれば、以下の対処法を一部の記事で試してみて改善するかどうかご確認ください。

現象について

発生している現象が異なる場合、以下の対処法では解決しない可能性が高いですので、まずは現象が同じかどうか確認してください。

現象は以下の通りです。

 

上の画像は実際の画像を見てみると以下のようになっています。

 

画像の右側がはみ出してしまっているのがわかります。（画像の下部は普通にスクリーンショットの問題で普通に見切れているだけです）

原因

原因はプログラムでこうなっているとかはよくわかりませんが、記事に画像を張る際に以下の操作をやることで発生している場合が多いです。

画像のサイズ調整を記事内で行った

画像を貼り付けると記事で見やすいサイズにするために設定ボタンを押すことで現れる右側の画像サイズを調整することがありますよね？ここで任意の値に設定を変えてしまうと画像が見切れてしまう原因となります。

上記の操作でサイズを変えてしまうとモバイルのプレビューで確認した時に上の画像のように右側がはみ出して見切れてしまうようになってしまいます。

対処法

対処法としては記事内の画像サイズ変更機能を使わなければ良いので、メディアライブラリーから画像自体のサイズを変更します。

1. まず記事内の画像をクリックし、「置換」をクリックし、「メディアライブラリを開く」を選択します。

 

2. するとメディアライブラリーが開きますのでそこから右側の「画像を編集」をクリックします。

 

3. 画像の編集画面が表示されますので、右側のサイズ調整エリアからサイズの変更を行い、調整が終わったら、「縮尺変更」をクリックします。

 

 

4. 「戻る」ボタンをクリックし画像一覧画面に戻り、右下の「URLをクリップボードにコピー」をクリックし、画像のURLを取得します。（コピーしましたと出ればOKです。）

 

5. 記事内の画像に戻って「現在のメディアURL」のところの鉛筆マークをクリックし、先ほどコピーしたURLを貼り付けて変更の適用をします。

 

これで画像のサイズが変更されたと思います。

実際にモバイルのプレビューで見てみても問題ないことを確認しましょう。

 

これで問題が解消されたはずです。

因みによくある画像がはみ出る問題の対処法として以下のようなCSSを追加する問題とは異なると思いますのでそこだけご理解ください。

また上記対処法で治らない等ある問題がありましたらコメント等でご連絡いただけますと幸いです。