こんにちは
ＰＣとスマホの画面両方にきれいにレイアウトができなくなってしまいました。
画像のすぐ下に文字を記入していますが横にレイアウトされてしまいます。ＰＣの方で画面のすぐ下に文字が表示されるように直すと、スマホの画面では画像の下に何行も空白ができてしまいます。
スマホの方で表示を直すと、ＰＣ画面の表示がぐちゃぐちゃになります。画像が重なったり空いた隙間に文字が入り込んだり重なったりしてしまいます。
最初からではなく15記事を過ぎた頃からです。
直し方がわからず記事を追加できなくて困っています。
よろしくお願いいたします。
さとう様
ご相談ありがとうございます。
画像の配置については最初は苦労する人が多い印象です。
WordPressのエディターはどちらをお使いでしょうか？
1.バージョン5.0以降のWordPressの標準エディタ Gutenberg
2.それ以前の「ビジュアル」「テキスト」があるエディタ（新WPでもClassic Editorプラグインを入れると使えます）
設定箇所や表記に若干の違いはあるものの、どちらのエディタでも「画像の配置」に関する設定があります。
目次
画像の回り込み設定
新エディタの場合
旧エディタの場合
こういった設定を行うと、画像の左右に文字が回り込むことになります。
回り込みの解除
ちょっと厄介なのが、回り込みは下の要素で明確に”解除”してあげないと下の要素も回り込んでしまいます。
解除する方法は通常WordPressには無いことがほとんどです。（HTMLとCSSの知識があれば可能）
そのため、画像の左右に意図しない部分までも回り込んでしまう事があるんですね。
そして、さとう様は回り込みを解除する方法として「改行キー」で空白を入れて対応したということだと思います。
その方法だと、PCでは良さそうに見えてもスマホで画像の下に空白ができてしまいます。
それは、改行キーで入力した改行がスマホでも存在しているからです。
以下の画像のような状況です。「改行」は実際に見えていないだけで、一行分のスペースが存在します。
回り込ませたく無い場合、画像の配置設定で「なし」や「中央」を選択するとテキストの回り込みはしなくなります。
旧エディタの場合、前回の設定がそのまま次も反映されたりするので、知らずに「左」にしてしまい、その後も「左」のままなのかもしれませんね。
確認してみてください。
参考にして頂ければ幸いです。