ワードプレスの「ビジュアルエディター」と「実際に表示されるページ」を同じにする方法をお伝えます。
使用するテーマは「cocoon」です。
ビジュアルエディターの編集画面では、見出しやカラムなど、実際のページと同じように表示されます。
しかし、テーマ内の設定や、CSSの変更にて「行の余白」が実際のページと同じように表示されない場合があります。
ここではその解決の糸口を2つご紹介します。
【cocoon】ビジュアルエディターと実際の表示を同じにする方法
使用するテーマは『cocoon child』
cocoonを使用している方であれば再現性は高いはずです。
2つの方法をご紹介します。
- ①:エディタースタイルのチェック確認
- ②:CSSへコード入力
①:エディタースタイルにチェックがあるか確認
まず先に、以下の順で設定を確認しにいきます。
- ①:画面左にある「cocoon設定」
- ②:画面上にある「エディター」タブ
エディターのタブ内にある「エディターにテーマスタイルを反映させる」にチェックがされているか確認してください。
これで変化がなければ次に進んでください。
②:CSSへコード入力「行の余白の確認」
cocoon設定内にある「本文余白」を確認しにいきます。
この際、設定している「行の余白」の数値を覚えておいてください。画像では2.5です。
本文余白の設定には以下の順でたどり着けます。
- ①:画面左にある「cocoon設定」
- ②:画面上にある「本文」タブ
確認したらビジュアルエディターのスタイルシートを開きます。
CSSへコード入力「ビジュアルエディターのスタイルシートを開く」
CSSの操作ですので念のためにバックアップを推奨します。
この下の画面まで移動します。
- ①:画面左にある「外観」
- ②:「テーマエディター」
- ③:画面右にある「ビジュアルエディターのスタイルシート」
移動後は画像にある黄色い矢印のところに次のコードをコピぺします。
CSSへコード入力「コードをコピペする」
コピペするコードはこちら。
.article p {
margin: 〇em 0 ;
}
コードをコピーしたらファイル更新をクリック。
これでOKです。
実際に変化したか確認してみる
実際に変化したかどうか確認します。下の画像をみてください。
ビジュアルエディターでは見出しと、その下の文字が接近して表示されています。
しかし、投稿画面(本記事)を確認するとこのような表示にはなっていません。
そこで今回説明した方法で対応してみます。
余白が生まれました。
これにより、いまお読みになっている本記事と同じ表示になりました。
以上です。
▼こちらの記事も読まれています
»【Rinkerが使えない】初心者はもしもアフィリエイトで商品管理
» Googleアドセンス審査を1発で合格する方法【完全初心者向け】
コメント