WordPress投稿画面のフォントを変更する

WordPressのビジュアルエディタってフォント指定が明朝体(serif)なんですよね。長年そのまま使ってましたが今さら気になったので変えてみました。

tinymce-font

追記: この記事の方法はWordPressのコアファイルを書き換えているため、良くないです(アップデート時に上書きされる)。正しい方法は以下の記事をご覧ください。

WordPressビジュアルエディタのスタイルを変更する方法

明朝体がスキってかたはそのままでいいんだと思いますが、なんか日本語と英数字が微妙にずれてる気がしたりして落ち着かないんですよね。あとやっぱりヒラギノ角ゴで編集したいです。

それに実際のビューで明朝体なんてどこにも使ってないですからね。ルックアンドフィールの統一大事。

ということで、Wordpressビジュアルエディタ(投稿画面)のフォントの変更方法は以下の通りです。

フォント変更方法

1. wp-content.cssにアクセス

ソースを見てみたところ、ビジュアルエディタのcssはwp-content.cssを使用しているようなので、コレを編集すればOKです。

wp-content.cssの場所:

/wp-includes/js/tinymce/skins/wordpress/wp-content.css

2. font-familyを変更

tinymce_fontfamily

wp-content.cssをエディタ等で開き、bodyタグのfont-familyプロパティを変更すればフォントが変わります。

僕の使用しているfont-familyはこんな感じです:

font-family: "Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, Osaka, sans-serif;

変更したら保存して、ビジュアルエディタを開いてみましょう。フォントが変わっていれば成功です。

CSSのフォント設定に関しては下記の記事でちょっと語ってるので、是非ご覧ください!

ナウでヤングなCSSのfont-familyはコレだ! 2015年版

関連記事