兵庫県三田市でホームページ制作をしているゴリラドットです。

ワードプレスの旧エディタ（クラシックエディタ）で画像が画面外にめちゃくちゃ飛び出しちゃう！なんで？ちゃんと画像にmax-width100%してるのに！

という場合が時々あると思います。これは「.wp-caption」クラスの設定ができてないのがだいたいの原因。画像だけの時は画面枠にピッタリ収まってるけど、画像にキャプションを設定するととたんに突き破りませんか？

ということでここではワードプレス、クラシックエディタの「.wp-caption」対応について紹介したい。

 

「.wp-caption」に1行追加！

クラシックエディタの.wp-caption対応、といってもただcssに下記を追加するだけ。やってることはたった一行なのですっごいシンプル。

css

.wp-caption{
	max-width: 100%;
}

 

はい、これでOK！

これで画像が画面外にはみだしちゃうことはなくなりますよ。

 

「.wp-caption」とは？

そもそも「.wp-caption」とはなんやねん、というのをサクッと。

もう画像が画面外に飛び出しちゃうのは直ってるのでここからは興味がある人の見読んでみてくださいね。

 

「.wp-caption」ていうのはクラシックエディタのみにあるクラスで、画像にキャプションを付けたときに画像を覆うラッパー（ヘイヨゥ！のラッパーではなくwrapする、ラップするていうことらしいです。サランラップですね）として付けられます。

んでmax-widthを設定しないとこの「.wp-caption」はなんかへんなwidthが勝手に設定されちゃってるんですね。

てことで何もしないと画面の横幅よりこのwidthが大きくなっちゃって「.wp-caption」の中にある画像が画面を突き破ってでかでかと表示されちゃうってわけ。

ワードプレス側でwidth設定するならmax-widthも設定しておくべきじゃ？と思うんですがいっててもしょうがないですので、こちら側で対応しておきましょう。

またこれは新エディタ（ブロックエディタ）では対応しなくていいので、あくまでクラシックエディタのみの問題です。

 

まとめ

ワードプレスの旧エディタ（クラシックエディタ）で画像が画面を突き破ってでかでかと表示されちゃう問題の解決方法を紹介しました。

結局クラシックエディタのみにある「.wp-caption」ていうクラスにmax-widthを設定すれば治るてことでした。画像にはmax-widthを設定していても、キャプションを設定すると「.wp-caption」に勝手にwidthが振られちゃって、そのサイズに画像がなっちゃうのがよくなかったんですね。

お試しください。