花村貴史｜Takashi Hanamura 2019年1月現在、当サイトのフォントは明朝体を採用しています。最新のOSであれば「游明朝体」が表示されるはず。しかし、WordPressのブロックエディタ（Gutenberg）はデフォルトのゴシック体。
どうせなら統一したい！
というわけで、ブロックエディタに好みのフォントが表示されるようにカスタムしました。
Mediumのエディタは良かった
僕は以前、Mediumでも記事を書いていました。
エディタと公開記事で写真や文章がほぼ同じように表示されているのが好きだったんです。書いていて気持ちいいし、明朝体だから表示されても気持ちいい。
WordPress Ver5以降ではブロックエディタが標準で有効になり、Mediumチックに書けるようになりました。でも、エディタ部分に「カスタマイズ → 追加CSS」が反映されないのが非常に残念。
なので、カスタムしてみようとなったわけ。
僕の環境は以下の通りで、パソコンで記事を書くことを前提としたカスタムです。
- WordPress v5.0.3
- Snow Monkey v5.0 ベータ3
- 子テーマを使用
- 1カラム（スリム幅）に最適化
カスタム方法
functions.phpの設定
子テーマのfunctions.phpに以下のコードを書きます。
<?php
function custom_css_gutenberg() {
$editor_style_url = get_theme_file_uri('editor-style.css');
wp_enqueue_style( 'theme-editor-style', $editor_style_url );
}
add_action('enqueue_block_editor_assets', 'custom_css_gutenberg');
関数名「custom_css_gutenberg」、CSSファイル名は適当でオーケー。
get_theme_file_uri関数を使うことで、親なら親の、子なら子のテーマディレクトリのcssファイルを参照できるようになります。僕はfunctions.phpと同じ場所にcssを配置したので、「get_theme_file_uri(‘editor-style.css’);」とシンプルに書きました。
ちなみに、テーマがSnow Monkeyの場合は1行目の「<?php」が必要です。これがないと正しく動きません。対となる「?>」は不要です。
editor-style.cssの設定
自由にカスタマイズしましょう！
/* 全体 */
.editor-styles-wrapper .wp-block{
max-width: 750px !important;
font-family: '游明朝体', 'YuMincho', '游明朝', 'Yu Mincho', serif !important;
color: #404040;
}
/* タイトル */
.editor-post-title__input{
font-family: '游明朝体', 'YuMincho', '游明朝', 'Yu Mincho', serif !important;
}
「.editor-styles-wrapper .wp-block」が全体に関わるクラスです（と思う）。ここに表示したいフォントなどを設定します。
「max-width: 750px;」を設定することで、Snow Monkeyの1カラム（スリム幅）に近い幅になります。
「.editor-post-title__input」は記事タイトル部分で、入力されたテキストに反映されます。
生まれ変わったブロックエディタ画面
「トップツールバー」と「フルスクリーンモード」をONにするとご覧の通り。
最近のブログ記事のような1カラムのスリム幅であり、明朝体で表示されましたイェイ！
課題は残るも大満足
現状、課題は2つ。
「見出し」もカスタムしているんですが、それをブロックエディタに反映させる方法がわからりませんでした。
「!important」で指定しているのが無理くり感があるな〜と思う。もっとスマートにできないものか。
でもまぁ、これらは今後の課題として残しておいて、画面は統一できたのでオッケーです。超自己満足（笑）
※Gutenbergはまだまだ進化中のものです。functions.phpやCSSで設定したものが、今後変更される可能性はあるかもしれません。
