僕はワードプレス大好きです。
しかし、ひとつだけ気に入らないところがあります。
それは、
「ビジュアルエディタ―のフォント」です。
どうしても明朝体は見づらくて実際に表示されるフォントとも違います。
今回は、このフォントだけを変えてみました。
[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]
コメント
[…] https://q-three.com/archives/103 […]