WordPressのビジュアルエディタのフォントを変更する
WPの記事投稿画面は使いやすくてとても気に入っているのですが、ビジュアルエディタのフォントが、日本語環境だと明朝体になっているので、ちょっと見づらいです。
方法を調べて変更したのでメモしておきます。
標準のビジュアルエディタの場合
特にエディタのプラグインを入れていない場合は、”ビジュアルエディタ – おじさんの備忘録-番外編-”の記事を参考にして、/wp-includes/js/tinymce/wordpress.cssの53行目に指定されているフォントを変更します。
font: 13px/19px Georgia, “Times New Roman”, “Bitstream Charter”, Times, serif;
この部分を、
font: 13px/19px Georgia, Arial, Helvetica, sans-serif;
とかにします。日本語のフォントが良い場合は、
font: 13px/19px “MS ゴシック“, ‘MS Pゴシック’, Arial, Helvetica, sans-serif;
と、フォント名で指定すると良いと思います。
TinyMCE Advancedプラグインを使っている場合
私はTinyMCE Advancedプラグインを使っているので、そちらの設定を変更しようと思ったのですが、こちらはちょっと面倒で、/wp-includes/js/tinymce/themes/advanced/editor_template.jsを編集する必要がありそうだったのですが(参考:TinyMCE Advancedに日本語フォントを追加 – いろいろ)、いろいろ検索しているうちに、プラグインの日本語版を見つめたので、そちらをインストールしました。
TinyMCE Advanced3.2 日本語版配布 | Lovelog+*
本日最新版がリリースされました。こちら↓からお願いします。
TinyMCE Advanced3.2.4 日本語版配布 | Lovelog+*
こちらで日本語化に必要なファイルをダウンロードできるので、/wp-content/plugins/の中に追加して、再度編集画面を確認すると、フォントが明朝体からゴシックに変わっていて、少し見やすくなりました。
ついでに表示フォントサイズを変更
ついでに、フォントサイズをもう少し大きくしたいので、再度editor_template.jsの中を確認したのですが、よくわからなかった‥‥。
Fire Bugで編集画面を確認してみると、どうも、wp-includes/js/tinymce/themes/advanced/skins/wp_theme/の中にあるcontent.cssを見ているようなので、このファイルを開き、74行目のbody.mceContentBodyのフォントサイズの指定数値を14pxに変更してみました。
このファイルをアップロードして編集画面をリロードしたら、ちゃんと文字が大きくなっていました。
視力が良くないので、こういうカスタマイズは不可欠ですね。
同じようなことでお困りの人がいたら、参考になれば幸いです。


7月 19th, 2011 at 11:44 AM
[...] WordPressのビジュアルエディタのフォントを変更する [...]
1月 14th, 2012 at 8:21 PM
[...] を参考にさらにいじってみた。 >>WordPressのビジュアルエディタのフォントを変更する [...]