【WordPress】Cocoonでビジュアルエディターとプレビューの表示が合わないとき(表示崩れ)の対処法

表示が崩れる
スポンサーリンク

どうも、あおです。

 

Cocoonで記事を作成していて、ビジュアルエディターでの表示が

プレビューと一致しないことが起こりました。

(プレビューの表示崩れ、ビジュアルエディターの表示崩れ)

 

そこで対処法をメモ。

 

まず、こちら。

記事に画像挿入して、Enterを何回か押下し、下に空白箇所を作成して、

そこにスタイルの「メモ」を置きました。

赤囲みのように画像とスタイルの間は少し空いている状態。

表示崩れ1

 

 

 

それをプレビュー表示すると、画像の下にかなりの空白ができてしまっています。

表示崩れ2

 

 

 

こんなに下に行ってしまっています。

表示崩れ3

 

 

 

ビジュアルエディターでは正しく表示されているのになぜ??となりました。

 

そこで、テキストエディターに変えて、見てみます。

画像の下に改行コードがたくさん入ってしまっています。

それでか。となりました。

表示崩れ4

 

 

 

よって、このテキストエディターで不要な改行コードを削除します。

(不要な行を選択してBackspace押下。)

 

 

 

以下のように改行コードを1つにして、プレビューを押してみます。

表示崩れ5

 

 

 

想定する空白が正しく入りました。

表示崩れ6

 

 

よかった~と思い、またビジュアルモードに戻ると、

なんじゃこりゃな現象になってます。

(スタイルが画像に不法侵入しています。)

表示崩れ7

 

 

 

テキストモードを再度確認してみると、

改行コードの下にあったはずの空行が勝手に消されてる。。

表示崩れ8

 

 

 

空行を追加します。

表示崩れ9

 

 

 

ビジュアルモードに戻ると、元の正しいレイアウトに戻りました。

表示崩れ10

 

 

 

プレビューも再度確認してみても、崩れていません。

表示崩れ11

 

 

 

 

もっとちゃんとした方法があるのかもしれませんが、

これで一時しのぎ的に、作成・編集ができます。