WordPressのビジュアルエディタのフォントを変更する

この記事は古いカスタマイズ方法を記載したものです。
最新のWordPressむけのカスタマイズ方法を「WordPressのTinyMCEをカスタマイズ」でご紹介していますので、こちらの記事をご覧ください。

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に変更してみました。

このファイルをアップロードして編集画面をリロードしたら、ちゃんと文字が大きくなっていました。
視力が良くないので、こういうカスタマイズは不可欠ですね。
同じようなことでお困りの人がいたら、参考になれば幸いです。

Comments on "WordPressのビジュアルエディタのフォントを変更する"

トラックバック 3件

コメントを残す