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

ブログ運営

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

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

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

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

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

 

▼こちらの記事も読まれています
» Rinkerが使えない!初心者はもしものかんたんリンクがいいよ!
»【ブログ完全初心者用】アドセンス審査を一回で合格する9つの対策法

スポンサーリンク

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

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

cocoon設定:行の余白の確認

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

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

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

  • ①:画面左にある「cocoon設定」
  • ②:画面上にある「本文」タブ

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

ビジュアルエディターのスタイルシートを開く

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

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

  • ①:画面左にある「外観」
  • ②:「テーマエディター」
  • ③:画面右にある「ビジュアルエディターのスタイルシート」

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

コードをコピペする

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

.article p {
margin: em 0 ;
}
の部分は”行の余白”になります。先ほど確認した「行の余白」の数値を入れてください。

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

実際の変化を見てみる

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

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

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

余白が生まれました。

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

スポンサーリンク

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

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

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

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

では。

 

▼こちらの記事も読まれています
» Rinkerが使えない!初心者はもしものかんたんリンクがいいよ!
»【ブログ完全初心者用】アドセンス審査を一回で合格する9つの対策法

ブログ運営
スポンサーリンク
Kazuo.blog

コメント

タイトルとURLをコピーしました