WordPressの管理画面で、ビジュアルエディタを利用して記事を執筆されている方も多いかと思いますが、見た目が実際の画面とは違うので、イメージが掴みづらいというのがあります。

プラグインか何かで一発で見た目を合わせる方法があればいいのですが、今のところ簡単に合わせる方法が見当たりません。。

※追記
合わせる方法がありましたので、以下の記事をご覧ください。
関連記事WordPressの管理画面でビジュアルエディターのスタイルを実際のスタイルに合わせる方法

完全に見た目を合わせのは少し時間がかかるので、今回は取り急ぎ、デフォルトのビジュアルエディタのフォントが明朝でちょっと違和感があるのでメイリオに変更し、ついでに、フォントの大きさを少し小さくすることで、ビジュアルエディタ内の文字表示数が増えて記事が書きやすいので、フォントサイズの変更もする方法をご紹介します。

ビジュアルエディタ用のCSS(スタイルシート)を用意する

まず、管理画面のビジュアルエディア用のCSSファイルを読み込ませる設定とCSSファイルを用意します。

ビジュアルエディタ用のCSSを読み込ませる

当サイトのWordPressのテーマは賢威7を利用していますが、子テーマを利用していますので、子テーマの「functions.php」に以下を追記します。

//管理画面のエディタ用CSS読み込み
add_editor_style("editor-style.css");

上記では、読み込ませるCSSファイルを「editor-style.css」としていますが、任意の名前でかまいません。

editor-style.cssを編集してアップする

前述の「editor-style.css」というファイル名の場合は、このファイル名で以下の内容を記述し、アップロードします。

※当サイトの場合は、子テーマディレクトリに「functions.php」と「editor-style.css」があります。

@charset "UTF-8";
body.mceContentBody {
font-family: 'メイリオ','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS Pゴシック';
margin: 0px 20px 0.5em 20px;
font-size:14px;
line-height:150%;
}

これで、見た目が完全に一致したというわけではありませんが、突貫の対応としてはまあまあの使い勝手になったかと思います。