WordPressの新エディタGutenbergのフォントを明朝体からゴシック体に変更する方法

WordPress 5.0 から採用される投稿画面の新エディタ「Gutenberg」ですが、初期設定だとフォント設定が明朝体になっています。英字で投稿する場合はカッコイイですが、日本語だと違和感がある人もいると思います。

同じ事を考えた方がWordPressのedit-style.cssとfunction.phpの修正案を提示されていますが、自己満足のためにfunction.phpをいじくるのも何なので、ブラウザ側で対処することにしました。対応するブラウザはSafariおよびMozilla Firefoxです。

Safariの場合

Safariの場合、メニューバーの環境設定→詳細設定→スタイルシート→その他からuserContent.cssを選択します。userContent.cssの配置先に制限はありません。

userContent.cssの中身は下記の通り。

@document domain(aquapple.com) {
    .editor-post-title__block .editor-post-title__input {
        font-family:sans-serif !important;
    }
}

Mozilla Firefoxの場合

Mozilla Firefoxの場合、userContent.cssを修正します。userContent.cssの場所は以下の通り。

macOSの場合

/Users/ユーザー名/Library/Application Support/Firefox/Profiles/ランダムな英数字.default/Chrome/userContent.css

Windowsの場合

C:\Users\ユーザー名\AppData\Roaming\Mozilla\Firefox\Profiles\ランダムな英数字.default\Chrome\userContent.css

もし、このファイルがない場合は文字コードUTF-8で新規に作成してください。そして、下記の内容をコピペします。

@-moz-document domain(aquapple.com) {
    .editor-post-title__block .editor-post-title__input {
        font-family:sans-serif !important;
    }
}

SafariおよびMozilla Firefoxともにdomainの(aquapple.com)は自身のドメインに置き換えてください。

明朝体からゴシック体に変更になっただけでも、ぐっと見やすさがアップしました。微々たる調整かもしれませんが、私の場合はウェブサイト更新のモチベーションアップに繋がりました。明朝体だと変な感じ…と感じた方はぜひ、ゴシック体への変更を行ってみてください。