【文字サイズ】ビジュアルエディターの表示の変更方法【文字種】

WordPressの記事の投稿＆編集画面では、ビジュアルエディターとテキストモードが使用出来ます。

ビジュアルエディターとは、画像や文字の大きさなどを変更したり追加したら、そのままリアルタイムで反映されるモードのことです。
（テキストモードとは、htmlタグなどがそのまま表示されるモードです）

これを使うと、文字の大きさや投稿した画像を見ながら記事を作成出来ますので、楽に記事作成ができます。でも、WordPressのデフォルトのビジュアルエディターの文字は見難いです。
その理由は以下の通りです。

１．　文字が小さい
文字サイズが小さめなので、２２インチ以上の液晶モニターで作業しているとしんどいです。
PCの個人設定などで文字や画面を拡大して見れますが、適切な範囲で拡大しても足りなかったりします。

あと、ブラウザの設定でも拡大表示できますが、その場合、後で戻しておかないと他のページまで拡大表示されてしまいます。
また、拡大表示すると画像を使用している部分がボケボケになるので、できればブラウザの設定で拡大表示はしたくなかったりします。

２．　文字が明朝体
普通の漢字も見見辛いですが、画数の多い漢字は特にガタガタして潰れやすく見辛いです。
ブラウザの設定で拡大表示はできますが、文字種（font-family）の変更はできませんので、明朝体の文字をゴシック体などの見やすい文字に変更するには、WordPressの設定で文字種を変更する必要があります。

そんなわけで、ちょっと調べてみました。
すると、WordPressのテーマ用のファイルで文字種を変更できそうな場所を見つけました。

wordpress/wp-includes/js/tinymce/themes/advanced/skins/o2k7/content.css
文字種を変更できるファイルが入っている場所は↑の場所でした。

でも、この content.css を変更しても WordPressが更新されたら（バージョンアップされたら）文字種が元に戻されてしまうされてしまうので、別の方法を探してみることにしました。
すると、editor-style.css を追加する方法を見つけました。

①　失敗しても良いように、ファイルを複製しておく
場所　/wordpress/wp-content/themes/***テーマ名***/functions.php

②　ビジュアルエディターの改行スタイルのコードを追加する
場所/wordpress/wp-content/themes/***テーマ名***/functions.php
追加する文字列　add_editor_style('editor-style.css');
（↑の一文を一番下（文末）にペロッと貼るだけでOKでした）

③　editor-style.css を作成する
設定したいスタイルを記載したcssファイルを作成します。

例

p{

	margin:0px;

	font-size:16px;

	font-family:MS UI Gothic;

}

Pタグの指定にしてあるのは、ビジュアルエディターの文章は↓のような感じで表示されているからです。

サーバーの具合が悪いようで、すぐに重くなります。
しかし、今度サーバーを更新するようですので、
サーバーの速度向上に期待しています。
↓
サーバーの具合が悪いようで、すぐに重くなります。
しかし、今度サーバーを更新するようですので、
サーバーの速度向上に期待しています。

ですので、Pタグの指定をしてやれば、ビジュアルエディターの文字種やサイズや行間などの設定ができるというわけです。

④　editor-style.css をUPする
/wordpress/wp-content/themes/sandbox/editor-style.css

これでうまくいかない場合は、更新した functions.php や追加した editor-style.css の保存形式がちゃんとしたものになっているのかを調べると良いかと思います。（保存形式が悪くて文字化けしてしまいファイルの復活が難しい場合は、複製したファイルから読み込み直します）

ビジュアルエディターで反映させたCSS

当サイトの管理人がビジュアルエディターで反映させてみたCSSは以下の通りです。

≪margin≫
0px にしました。
ブログ本体の行間は0pxにしているのですが、ビジュアルエディターのデフォルトの行間は広いですので、記事作成中にビジュアルエディターを使用してしまうと、記事の行間がやらたと離れてしまい、作成しにくくなってしまいます。（ものすごい縦長の記事になります）

特に、株ブログではAAを多用しているため、行間が離れていると確認し辛いです。
（AAは行間をくっつけて表示し、AA以外は一行ごとに改行して行間を空けて表示しています）

でも、ビジュアルエディターの margin の設定を 0px にすると、記事の行間と同じになりますので、記事の作成や確認がしやすくなりました。

font-size

16pxにしました。
文字を大きく読みやすくしました。
ちなみに、これはブログ記事の文字の大きさと同じ大きさです。

font-family

ゴシック体にしました。
先程も書きましたが、特に明朝体の漢字は文字が潰れて見辛いです。
ゴシック体にすることで、文字の読みにくさはかなり改善しました。

ビジュアルエディターとブログ記事を同じ見た目にする

ビジュアルエディターとブログ記事を同じ見た目にするには、ブログ記事の文字設定や行間設定のCSSをビジュアルエディターのそれと同じにしてやる必要があります。

なので、どのスタイルがブログ記事の文字や行間のスタイルとして割り当てられているのかを調べる必要があります。

文字設定がし辛い時の対処法

↓のような場合は、ブログ記事側の文字の設定がし辛いです。

なぜなら、p {margin:0px;} にしてしまうと、ブログの全部（コメントも含めて）のPタグが margin:0px になってしまうからです。
でも、もし仮に記事全体用のDIVタグの中のPタグだけにスタイルを割り当てたいのであれば、こうすることでスタイルを適用させることができます。