【WordPress】ビジュアルエディターのフォントをゴシック体に変更

ブログテーマの変更に伴い、WordPressの管理画面側でも変わったことがありました。
投稿エディターで、「ビジュアル」で表示されるフォントが明朝体になったのです。(以前はゴシック体でした)
公開した記事はほとんどの場合ゴシック体で見られるのに、編集画面が明朝体だと違和感があります。。

これまで使っていたテーマには、恐らくフォントの設定が入っていたのだと思います。
新しいテーマでは、日本語フォントの設定がないか、おかしいから明朝体になっているというところまでは創造できたのですが、その先は先達の力を拝借しました。

ソースコード

参考情報

以下の記事を参考にしました。

http://links-creations.com/site-building/visualeditor-font/

記事を読んで、「editor-style.css」というファイルがあることが分かりました。

さっそく確認です。
WordPressの構成ファイルを見ることになるので、S-FTPでの通信です。これはWinSCPですね
ということで、久しぶりにファイル構成を見てみました。
そして、「css」フォルダー内に同名のファイルを発見しました。普通にあるものなのですね。

このファイルがない場合は、上記の記事に記載されているとおり、editor-style.cssを作成して、functions.phpに記述を追加します。

設定内容

既存のeditor-style.cssには、かなりたくさんの設定が入っていました。
ただし、フォント関係は英語用の設定しか入っていませんでした。
フォント以外の設定内容はそのまま使わせてもらって、フォント指定部分のみに手を入れることにしました。

日本語フォントでゴシック体(系)になるような設定を入れていないと、英語での表示はどうであれ、日本語フォントは明朝体になってしまいます。

そこで今回は、フォント設定を日本語のゴシック系を含む記載に変更しました。
bodyの設定に入れています。

font-family: “游ゴシック”, YuGothic, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, Verdana, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif;

これでもかというくらい盛っていますw
どんな環境でもゴシック体系の表示になるでしょう。

設定変更後、ビジュアルエディターの表示は見事にゴシック体に変更できています。
これで、実際に公開されるイメージに近くなりました!

この投稿を書いたのは・・・
Blog Admin

ガジェットが大好きで、ほぼ毎月何かしら調達しております。
無駄遣い扱いされたくないのと、何かの役に立つかと思い、記録を書くことにしたのでした。

お出かけのときには、スマホを複数台とタブレットとパソコンを持ち歩きます。
両手首にはスマートウォッチです。
こんなスタイルで生活している中での備忘録を書いています。

「Blog Admin」をフォローしてみる
ブログ関連
「Blog Admin」をフォローしてみる

ご意見やご感想などお聞かせください! コメント機能です。

タイトルとURLをコピーしました