Word Pressの投稿で画像が自動縮小される場合とされない場合の違い

Word Press 同じサイズの画像なのに自動縮小される場合とされない場合がある

テンプレートにより違うと思いますが、同じ記事内に同じサイズの画像をアップしても、片方はスマホなどで見た場合自動で横幅が縮小されるのに、もうひとつの画像は縮小されず端が切れたままになることがあります。

 

「メディアの設定」とかプラグインなどで対処しようとしても一向に改善されません。

画像の"width"を”auto"に設定しても全く反応してくれません。スマホの画面等で端が切れないように画像のサイズを調整するとPCなどでは、非常に小さな画像になってストレスはたまる一方です。

 

こんな経験をしたことはありませんか？

 

 

（下の画像はキャプションを入れていません。）

 

上の画像も下の画像も同じものです、サイズ設定も同じ、全く同じ画像を記事内に投稿したものです。

 

投稿画面では同じ大きさで。PCやタブレット、iPadでも同じように見えるのですが、スマホ、iphoneで見るとこうなってしまいます。この違いの原因は何なのでしょうか？

 

 

犯人はキャプション

画像を挿入した場合、”alt”（代替えテキスト）の記述の他に、caption（写真の説明で記事の画像の下に表示されるテキスト文）を入れてしまうとその画像は自動縮小されません。

 

SEOの点数を稼げるかもと思ってキャプションを画像内に仕込んでしまうと、このような状況になります。

 

ちなみにSEOの画像の評価は”alt”（代替えテキスト）の記述のみで、キャプションは関係ないようです。キャプションを入れたい場合は単独でテクストを記述することで対処できます。単独のほうがスタイルの自由度は高いので問題はないと思います。

 

自分は文字のサイズ80％で文字色はグリーン系を使っています。

 

またアドセンスの自動広告が画像とキャプション（画像説明）の間に入ってサイトの利便性を損ねてしまう問題も、画像内にキャプションを設定しても関係ないようです。自動広告が挿入される場合は、自動広告はしっかりと画像領域内に遠慮なく侵入してきますので対策にはなりません。

 

 

対処方法は簡単

キャプションの記述欄を空欄にすれば問題なく解消されると思います。

 

（この画像がキャプション挿入により自動縮小されなくなる症状はClassical Editorで編集した場合のもので、Block Editorでは起こらないかもしれません。未確認です。）

 

ビジュアル編集画面での対処

アップロード時にキャプションを記述した場合でも、編集のビジュアル画面で画像をクリックして「鉛筆マーク」をクリックすれば、画像の編集画面になりますので、そこで修正してください。

 

テキスト編集画面での対処

htmlの記述が

キャプションありは

 

caption id="attachment_229" align="alignnone" width="640"]<img class="wp-image-229 size-full" src="https://hogehoge.com/wp-content/uploads/2021/04/file001.jpg" alt="横浜・海の公園の夜明け" width="640" height="427" /> キャプション挿入したサンプル[/caption

 

 

キャプションなしは

<img class="wp-image-229 size-full" src="https://hogehoge.com/wp-content/uploads/2021/04/file001.jpg" alt="横浜・海の公園の夜明け" width="640" height="427" />

 

このような記述で　　　　　の部分がキャプションを入れたときに追加され、この「id記述」が画像の縮小を妨げていました。テキストから修正する場合は単純に　　　　　の部分を削除すればよいだけです。（冒頭の" [ "と末尾の ” ] "は表示の関係で省略してあります。テキスト部分は改行してください。

 

以上が問題の原因と処理方法です。

これで画像の不具合についてはスッキリ解消されたことと思いますので、WPでの作業を快適に続けてくださいね。

 

ファイナライズしていないDVDが再生できた→ファイナライズしていなくて見れなくなっていたDVDが復活、再生できたが注意も必要