ビジュアルエディターのフォントを変更してみた

CMS
スポンサーリンク

僕はワードプレス大好きです。

しかし、ひとつだけ気に入らないところがあります。

それは、

「ビジュアルエディタ―のフォント」です。

 

どうしても明朝体は見づらくて実際に表示されるフォントとも違います。

今回は、このフォントだけを変えてみました。

 

[q3-adsense01]

スポンサーリンク

用意するもの

色々な方法があり、 functions.php での設定などありましたが、

今回は簡単に、設定ファイルをプラグインで設定します。

  • editor-style.css ファイル
  • TinyMCE Advanced プラグイン

editor-style.css の作成

これはローカルで作成しても、直接サーバで作成してもかまいません。

子テーマ(xeory_base_child)内にファイルを作成します。

そして、中にこのように記述します。

body.mceContentBody {
  font-family: "メイリオ", "MS Pゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, sans-serif;
}

自分の好きなフォントを指定して下さい。

TinyMCE Advanced プラグインのインストール

さきほど作った editor-style.css を反映させるためにプラグインを使います。

もし、もうインストール済ならここは飛ばしてください。

プラグイン > 新規追加

右上のプラグインの検索ボックスに、「TinyMCE Advanced」と入力するとプラグインが出てきますので、「今すぐインストール」ボタンを押します。

インストールが完了したら、「有効化」リンクをクリックします。

editor-style.css の有効化

今回、有効化は TinyMCE Advanced で行います。

設定 >TinyMCE Advanced

高度なオプションの「CSS クラスメニューの作成」のチェックボックスにチェックを入れます。

最後に、一番下の「変更を保存」ボタンを押して保存して完成です。

変更後

このような表示になりました。

最後に

違和感があり、ストレスが溜まってしまうのはよくありませんね。

文章を書くならなおさらです。

気持ちよく文章が書けるような環境に作り変えたいですね。

editor-style.css でもっといろいろと設定が出来るようになりますので、今後はもっと自分好みに変更していこうと思います。

 

[q3-adsense01]

コメント