画像の回り込みとは?
画像に文字を回り込ませて表示することはよくあると思います。
こんな感じ。
これは、画像に文字を回り込ませたときの例です。
![pcview Wordpress スマホで表示した時に画像の回り込みを回避するには?](https://i0.wp.com/seikousyahenomichi.com/wp/wp-content/uploads/2018/08/pcview.png?resize=406%2C265&ssl=1)
スマホでの回り込み表示は?
スマホで表示した時にこんな風になってしまって困ることありませんか?
![smartview Wordpress スマホで表示した時に画像の回り込みを回避するには?](https://i0.wp.com/seikousyahenomichi.com/wp/wp-content/uploads/2018/08/smartview.png?resize=406%2C265&ssl=1)
解決策
俗に言うレスポンシブ対応というやつです。
下記をStyleSheetに追記するとこんな風になります。
![successview Wordpress スマホで表示した時に画像の回り込みを回避するには?](https://i0.wp.com/seikousyahenomichi.com/wp/wp-content/uploads/2018/08/successview.png?resize=406%2C377&ssl=1)
css:
@media only screen and (max-width: 413px) { img.alignright { padding: 0 0 10px 0; margin: 0 auto; display: block; } img.alignleft { padding: 0 0 10px 0; margin: 0 auto; display: block; } .alignright { float: none; } .alignleft { float: none; } }
とても助かりました!ありがとうございます!!
お力になれてよかったです。今後ともお役に立てるブログ作りを目指します。