ビジュアルエディタとHTTP表示を一致させる方法

本テーマのビジュアルエディタのCSSは「editor-style.css」から「my-editor-style.css」に変更しています。

理由は下記ドキュメントを参照してください。

ブロックエディタ時代にビジュアルエディタを使う方法

親テーマが「editor-style.css」の時のスタイル機能の使い方

次にやる事はビジュアルエディタの「my-editor-style.css」の追加した内容を、「style.css」に反映させないとHTTP表示でビジュアルエディタのスタイルが反映されません。

上記の2つのCSSは下記の様な違いがあります。

■my-editor.style.css：ビジュアルエディタで記述するコンテンツに適用されるCSS

■style.css ：上記のコンテンツに加えてヘッダーやサイドバー、フッター等にも利用されるCSS

　メモ

上記の「style.css」の中ではビジュアルエディタのコンテンツには「entry-content」というクラス名が付いています。

これはWordPressのデフォルトテーマの場合で、それ以外のテーマはどの様なクラスが設定されているか？を調べる必要があります。

そこで「my-editor.style.css」で追加、変更した内容は「style.css」の「entry-content」が付いている設定を探し出し、修正する必要があります。

しかし、これは面倒なので私は下記の様な形で管理しています。

1.style.cssへの記述方法

1-1.子テーマのCSSファイル構造

子テーマフォルダの中		CSSフォルダの中
	→

■ルートレベルにビジュアルエディタの「my-editor-style.css」と子テーマの「style.css」を配置する。

■ルートレベルに「css」フォルダを作成し、その中に「editor-style.css」と「style.css」を配置する。

1-2.ルールレベルの「style.css」に記述する内容

/*
Template:twentytwelve
Theme Name:twentytwelve_child
*/
@charset "UTF-8";
/***********************************************/
/* 関連スタイルシートの読み込み
/***********************************************/
@import url('css/editor-style.css');
@import url('css/style.css');

■@import url()コマンドでCSSフォルダにある2つのCSSを読み込む

1-3.CSSフォルダのCSSに記述する内容

CSSファイル名	記述内容
editor-style.css	ビジュアルエディタの「my-editor-style.css」内容を「entry-content」クラスを付けて記述する
style.css	親テーマのヘッダーやサイドバー、フッター等をカスタマイズする内容を記述する

　復習CSSが読み込まれる順番

①親テーマのビジュアルテーマのCSS（一般的にはeditor-style.css）

②親テーマの「style.css」

③子テーマのビジュアルテーマのCSS（このサイトではmy-editor-style.css）

④子テーマの「style..css」

よって、子テーマのCSSが優先されます。

2.各スタイルシートへの記述例

具体的には下記の様に記述していきます。

2-1.my-editor-style.cssへの記述

ビジュアルエディタで利用する各種スタイルを登録します。

h2{
  font-size:20px;font-size:1.25rem;
  color:#400fff;
  border:1px solid #400fff;
  border-left: 5px solid #400fff;
  padding:5px 0 5px 5px;
  margin:10px 0;}

2-2.css\editor-style.cssへの記述方法

.entry-content h2 {
  font-size:20px;font-size:1.25rem;
  color:#400fff;
  border:1px solid #400fff;
  border-left: 5px solid #400fff;
  padding:5px 0 5px 5px;
  margin:10px 0;}