【cocoon】ビジュアルエディターと実際の表示を同じにする方法

ワードプレスの「ビジュアルエディター」と「実際に表示されるページ」を同じにする方法をお伝えます。

使用するテーマは「cocoon」です。

ビジュアルエディターの編集画面では、見出しやカラムなど、実際のページと同じように表示されます。

しかし、テーマ内の設定や、CSSの変更にて「行の余白」が実際のページと同じように表示されない場合があります。

ここではその解決の糸口を２つご紹介します。

気になるところから読む

使用するテーマは『cocoon child』
cocoonを使用している方であれば再現性は高いはずです。

２つの方法をご紹介します。

まず先に、以下の順で設定を確認しにいきます。

エディターのタブ内にある「エディターにテーマスタイルを反映させる」にチェックがされているか確認してください。

これで変化がなければ次に進んでください。

cocoon設定内にある「本文余白」を確認しにいきます。

この際、設定している「行の余白」の数値を覚えておいてください。画像では2.5です。

本文余白の設定には以下の順でたどり着けます。

確認したらビジュアルエディターのスタイルシートを開きます。

CSSの操作ですので念のためにバックアップを推奨します。

この下の画面まで移動します。

移動後は画像にある黄色い矢印のところに次のコードをコピぺします。

コピペするコードはこちら。

.article p {
margin: 〇em 0 ;
}

〇の部分は、先ほど確認した「行の余白”」の数値を入力します。

コードをコピーしたらファイル更新をクリック。

これでOKです。

実際に変化したか確認してみる

実際に変化したかどうか確認します。下の画像をみてください。

ビジュアルエディターでは見出しと、その下の文字が接近して表示されています。

しかし、投稿画面（本記事）を確認するとこのような表示にはなっていません。

そこで今回説明した方法で対応してみます。

余白が生まれました。

これにより、いまお読みになっている本記事と同じ表示になりました。

以上です。