【ワードプレス】ビジュアルエディターの初期フォントが変わった時の対処

ワードプレスでいろいろな設定を変更したりアップデートをしたら、いきなりTinyMCE（プラグイン）のビジュアルエディタの書式が変わってしまい、編集しづらくなってしまったので私が行った書式を変更する手順をご紹介したいと思います。

それではいってみましょう！

【書式が初期状態になる現象】

【書式変更後】

手順

変更手順

・ビジュアルエディタの書式を変更するためにeditor-style.cssを作成。

・ビジュアルエディタ（ TinyMCE）の専用のCSSクラス.mceContentBodyをeditor-style.cssの中に記述。

・Tinyの設定画面でCSSの設定を変更。

このような手順で解説していきたいと思います。

まずはご自身のレンタルサーバーのFTPから下記の手順でクリックして進んでいき、editor-style.cssを作成します。

➀wp-contentフォルダーをクリックします。

➁themesフォルダーをクリックします。

➂自分のテンプレート名のフォルダーをクリックします。

➃自分のテンプレート名のフォルダーにeditor-style.cssを作成します。

ワードプレスに戻り下記の順番に操作していきます。

外観 → テーマエディタ

右側にあるテーマファイルから、cssの中のeditor-style.cssが作成されていればOKです。

ワードプレスから先程作成したeditor-style.cssをクリックして開き、TinyMCE専用のCSSクラス.mceContentBodyに下記を記述します。

.mceContentBody{

font-family: "メイリオ";

}

ワードプレスプラグインのTinyMCEの設定画面から下記のCSSクラスメニューの作成にチェックを入れて完了です。

【結果】

下記のようにビジュアルエディターの書式が変わりました＼(^^)／

丸みを帯びた文字のフォントのメイリオになり編集しやすくなりました。

今回はテンプレートをアップデートしたりプラグインの設定をいじくりまわしたりしてたら、まさかのビジュアルエディタの書式の設定が変わってしまいかなり凹みましたが、なんとか元に戻ったので一安心です。

ワードプレスのアップデートとかプラグインの設定とかいじくり回すと、今回のような事態が起きる場合があるので注意しましょう！

以上です！