HOME  /WordPress(応用)
 /ビジュアルエディタとHTTP表示を一致させる方法
2020年03月26日

ビジュアルエディタと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;}

 

3.参考情報

 IDとCLASS

各タグに付ける名前には「class=’××’」「ID=’××’」があります。

ID名     表示された画面の中で1回しか使えない名前

CLASS名表示された画面の中に複数回使う事ができる名前

よってmy-editor-style.cssは、コンテンツ領域で使う要素を指定している所なので、使われる名前は複数回でも利用できるクラス指定が基本となります。

ID名はHeader等の様に1回しか呼ばれない所に使われます。

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。
以前のサイトはあまり意味もわからず作成しましたが、この辺の意味が判ってきたのでここで解説します。

ここでは引用

の設定と使い方を解説します。ポイントは見やすい引用BOXです。

TinyMCEのデフォルト設定ではインデントが使えない。またCSSを更新した時にスーパリロードしないと画面が更新されない等との問題があります。ここではこれらの問題点を解決して使い易いTinyMCEの設定方法を解説しています。

このドキュメントではビジュアルエディタ(TinyMCE)の見出し、本文、URLの設定を解説しています。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

ビジュアルエディタでBOXを作成する方法は①表機能を使う②スタイルで設定したBOXを使うがありますが、ここでは表機能を使ってリンクBOXを作成する方法を解説しています。

ビジュアルエディタで綺麗な表を作成する為に「TinyMCE Advanced」と「Bootstrap」の表機能を利用しています。ここではそれらの設定方法を解す津指定ます。

親テーマのビジュアルエディタのCSSが「editor-style.css」でない場合はTinyMCE Advancedプラグインを利用するのに一工夫が必要になります。
ここではその解決方法を解説しています。

2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ(Gutenberg)」に変更になりました。しかし「ビジュアルエディタ(TinyMCE)」を使い続ける方法を解説しています。