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

ブログ運営

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

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

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

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

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

 

▼こちらの記事も読まれています
»【Rinkerが使えない】初心者はもしもアフィリエイトで商品管理
» Googleアドセンス審査を1発で合格する方法【完全初心者向け】

スポンサーリンク

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

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

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

  • ①:エディタースタイルのチェック確認
  • ②:CSSへコード入力

①:エディタースタイルにチェックがあるか確認

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

  • ①:画面左にある「cocoon設定」
  • ②:画面上にある「エディター」タブ

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

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

②:CSSへコード入力「行の余白の確認」

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

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

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

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

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

CSSへコード入力「ビジュアルエディターのスタイルシートを開く」

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

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

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

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

CSSへコード入力「コードをコピペする」

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

.article p {
margin: em 0 ;
}
の部分は、先ほど確認した「行の余白”」の数値を入力します。

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

これでOKです。

スポンサーリンク

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

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

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

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

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

余白が生まれました。

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

以上です。

 

▼こちらの記事も読まれています
»【Rinkerが使えない】初心者はもしもアフィリエイトで商品管理
» Googleアドセンス審査を1発で合格する方法【完全初心者向け】

コメント

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