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

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

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

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

しかしCSSを変更すると”行の余白”が実際のページと同じように表示されない場合があります。

この悩みは、『ビジュアルエディターのスタイルシート』にコードをコピペすることでかんたんに解決できます。

気になるところから読む

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

先ずはじめにcocoon設定で、ご自身の「行の余白」がどうなっているか確認してください。

私は以下の数値に設定しています。

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

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

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

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

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

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

.article p {
margin: 〇em 0 ;
}

〇の部分は”行の余白”になります。先ほど確認した「行の余白」の数値を入れてください。

コードをコピーしたらファイル更新をクリック。これだけでOKです。

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

私の画面ではH2と下の文字がすぐ近くに表示されていました。

先ほどのコードを入力します。

余白が生まれました。

これでビジュアルエディターの編集画面と実際の画面が同じに表示されていることが確認できました。

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

今回のやり方はいくつかある方法のひとつになります。

cocoonを使用している方には正着打になるはずですが、他のテーマを使用している方には別の方法があるかもしれません。

ただ、どんなテーマであっても、ビジュアルエディターを操作できるシートにコードを挿入すればそれなりの変化は生じるとおもいます。

では。