HOME  /WordPress(応用)
 /親テーマが「editor-style.css」以外の時のスタイル機能の使い方
2020年03月23日

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

ここでは親テーマのビジュアルエディタのCSSが「editor-style.css」以外の場合の設定について解説しています。

親テーマがどの様なCSSを使っているか?は下記を参照してください。

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

 

1.TinyMCE Advancedをインストールした時の問題点

1-1.TinyMCE Advancedプラグインをインストールする。

下記のプラグインをインストールして有効化して下さい。

 

1-2.設定→TinyMCE Advancedの旧エディタタブを開きます

下記のエラーがでています。

 

­ ­エラーの理由

この記事を書いて時点のTinyMCE Advancedのバージョンは、5.3.0になります。

今後改善されるかも判りませんが、現在のAdvancedで意識しているCSSは「editor-style.css」になります。

しかし親テーマが使っているビジュアルエディタのCSSが「editor-style.css」でないので読めませんというエラーになります。

 

2.「editor-style.css」でないテーマにCSSクラスメニュを適用させる方法

<対策方法>

①利用しているビジュアルエディタのCSSファイルを子テーマフォルダにコピーする。場所は子テーマディレクト直下でも可。

 

②上記のファイル名を「editor-style.css」に変更する。

 

③子テーマのfunctions.phpに下記を追加します。

function my_styles() {
  remove_editor_styles();                  //親テーマのエディタスタイルシートの削除
  add_editor_style( 'editor-style.css' );//子テーマのスタイルシートの追加
} 
add_action( 'admin_init', 'my_styles' );

※1.関数名は任意です。

※2.上記は、現在設定されているエディタCSSを解除し、新たなCSS名を指定しています。

 

④「設定→TinyMCE Advanced」を再度、開き直すと、エラーが消えて下記が表示されますので✔して下さい。

その他の設定はデフォルトで問題ありません。

変更した場合は必ず「設定の保存」を実行して下さい。

以上で「editor-style.css」で設定した「スタイル」が利用できる様になります。

 

3.TinyMCE Advancedのスタイル機能とは

TinyMCE Advancedプラグインをインストールすると下記の様なボタンが追加されます。

このボタンをビジュアルエディタのメニュに配置して下さい。

 

このスタイルをクリックした時に表示されるメニュのデフォルトは下記になります。

 

しかし、項番2で「CSSクラスメニュ」の所に✔を付けるとクラスメニュが定義できるようになります。

­ ­メモ

CSSクラスメニュとはタグ(p、div、img、table等)に付けたクラスメニュです。

例えばimgタグに「.×××」というクラスをつけたメニューという事です。

 

例えば下記の様なクラスメニュを「editor-style.css」に設定します。

img.waku0 {
	padding:2px;
	border-radius:0;
	border:1px solid #8b8682;}
img.waku5 {
	padding:5px;
	border-radius:0;
	border:1px solid #8b8682;}

 

そうするとスタイルメニュをプルダウンすると、設定したクラスが表示されます。

下記の例ではimgが選択されている時に「.waku0」と「.waku5」のクラスを追加する事ができる様になります。

CSSのクラスはBootstrap等のクラスでも、任意設定のクラスでもOKです。

 メモ

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

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

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

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


<関連記事一覧>

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

    とアンオーダーリスト

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

ビジュアルエディタのCSS「editor.style.css」を充実させると操作性は良くなりますが、「style.css」を維持する事が大変になります。ここではその管理方法の一例を紹介しています。

ここでは引用

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

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

ここでは整形済みテキストの設定と使い方を解説します。整形済みテキストのポイントは見やすいソーステキストの提供です。

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

TinyMCEのスタイルは1つの段落に対する定義になります。よってこのスタイルで作成したBOXは、改行(Shift+Enter)しか使えません。しかしショートコードという新しい概念を利用すると段落変更(Enter)が使えるBOXを作る事ができます。ここではその作り方を解説しています。

Bootstrapはグリッドデザインやボタン及びナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。

ビジュアルエディタに幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。

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