前略、ハヤトさん

Cocoon設定の「エディタ―」タブの設定で、「エディタースタイル」のところの「エディターにテーマスタイルを反映させる」にチェックは入っていますか？

@leafytree リフィトリーさん、ありがとうございます。

Cocoon設定の「エディタ―」タブの「エディターにテーマスタイルを反映させる」にはチェックを入れています。

それに、ネットでも色々調べて試してみましたが、全部ダメで、エディタの表示と実際の表示がズレてしまいます。

文字数が実際の表示が短くなるというかw

で、毎回プレビューで確認する…という悪循環に陥ってしまっています。

何かいい方法があるといいのですが…

返信下さってありがとうございました。

ハヤトさん

私もあまり詳しくないのですが、詳しい方が診てくださるかもしれませんので、フォーラム冒頭の案内にありますとおり、お差し支えがなければ、対象ページのURLをご提示いただき、高速化設定を無効にして、環境情報を貼り付けていただけるとよいような気がします。

解決に至るかどうかは、わかりませんが・・・

@leafytree リフィトリーさん、気にして下さってありがとうございました ? 

「エディター」と「実際の表示」とは具体的にどの部分を指しているのでしょうか。

例えば見出しのデザインであれば「エディターにテーマスタイルを〜」で反映されるはずです。

例えばショートコードであれば、エディター画面に展開された後の内容を表示するのは技術的に困難です。

例えば目次であれば、これも同様に困難です。

CSSでどうにかできるものであれば、エディター用のスタイルシートを編集する等で対応できると思います。

@haruinoue はるさん、ご意見聞かせて下さってありがとうございます。

「エディター」と「実際の表示」とは具体的にどの部分を指しているのでしょうか

具体的には、こちらに書かれていることと同じような症状です。

https://www.imamura.biz/blog/27649

functions.phpに書くコードも紹介されていますが、この方法を試してみても私のの場合は改善されませんでした。

ハヤトさん

一般的には、「エディターと実際の表示が違う」と書くと、h2などの見出しのデザイン等がエディターに反映されていない、というような内容に受け止めてしまうのですが、ハヤトさんの場合はちょっと事情が違うみたいな気がします。

実際のエディター画面とプレビュー画面の両方のキャプチャ画像等をご提示いただくと、文字だけの説明より伝わり易いかなと思います。

ローカルのテストサイトで試してみたのですが、クラッシックエディターのカラムの padding は親テーマの「editor-style.css」を読み込んでいる様子。

body#tinymce {
  padding: 1em 20px !important;
  margin-top: 0 !important;
  background-image: none;
  background-color: #fff;
}

そのため、エディターのメインカラムの左右の padding が20pxに指定されてしまうようです。

ということは、実際のWebサイトの表示の メインカラムの左右の paddingと異なってしまうため、コンテンツ幅が異なってしまい、文字の折り返し位置が変わってしまうのかもしれません。

もしかしたら、子テーマのCSSファイルに以下のようなコードを記述することで、実際のWebサイトの表示と文字の折り返し位置を合わせることができるかもしれません。

body#tinymce {
  padding: 20px 29px !important;
}

実際のサイトを拝見していないので、実際のサイトのメインカラムの左右の padding 値 は、私にはわかりません。

@leafytree リフィトリーさん、おかげさまで解決できました。

一般的には、「エディターと実際の表示が違う」と書くと、h2などの見出しのデザイン等がエディターに反映されていない、というような内容に受け止めてしまう

すみませんでした。適切な伝え方すらろくにできない初心者でして（泣）

でも、どういう問題なのか的確に捉えて下さって、
教えて頂いたコードを

body#tinymce {
padding: 20px 40px !important;
}

にしたところ、見事に「ビジュアルエディターの表示」と「実際の表示」を合わせることができ、これから編集しやすくなること間違いなしです。
本当にありがとうございました。

PS) 今後質問などを投稿する際には、おっしゃるようにキャプチャ画像等をアップするよう心掛けます。