【WordPress】子テーマのブロックエディタ(Gutenberg)に好みのCSSを適用させました

2019年1月現在、当サイトのフォントは明朝体を採用しています。最新のOSであれば「游明朝体」が表示されるはず。しかし、WordPressのブロックエディタ(Gutenberg)はデフォルトのゴシック体。

どうせなら統一したい!

というわけで、ブロックエディタに好みのフォントが表示されるようにカスタムしました。

APC_0151

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カラムのスリム幅であり、明朝体で表示されましたイェイ!

SC_20190110_エディタ
ブロックエディタ
SC_20190110_記事
記事表示(目次ウィジェットは正しくは画像の下=最初の見出し2の上に表示されますね)

課題は残るも大満足

現状、課題は2つ。

「見出し」もカスタムしているんですが、それをブロックエディタに反映させる方法がわからりませんでした。

「!important」で指定しているのが無理くり感があるな〜と思う。もっとスマートにできないものか。

APC_0153

でもまぁ、これらは今後の課題として残しておいて、画面は統一できたのでオッケーです。超自己満足(笑)

※Gutenbergはまだまだ進化中のものです。functions.phpやCSSで設定したものが、今後変更される可能性はあるかもしれません。

nnamm.work

こちらでも記事を書いています。Hugo製のエンジニア視点のブログです。

写真素材note発売中

継続課金マガジンで販売しています。ブログに載せるもOK、壁紙に設定するもOK、使い方は自由です。フリー素材も良いけれど、人と被りたくないという方に人気です。

この記事を書いた人

花村貴史|Takashi Hanamura

Photographer & Software Engineer|ポートレイトでは撮られることに慣れていない方を撮らせていただいてます。その人・その場の「空気感をそっとすくい撮る」写真が好評です。またプライベートでGo、C++、WebGLを好み、オシゴトはSAPにふれています。横浜育ち38年 → 信州移住2年半 → 2018年春から関西在住。2019年秋から夫婦生活スタート。

【お知らせ】出張撮影のご依頼、承ってます

あなたの行きたい場所に出張してポートレイトやプロフィール写真を撮影します。出張エリアは関西エリア(神戸・大阪・京都など)、関東エリア(神奈川、東京など)です。

★詳細:ポートレイト撮影(Photo Session)
★詳細:イベント撮影(Photo Shooting)

撮影予約可能日

【関西エリア】
・関西&土日祝日の撮影をお受けできます。ご依頼お待ちしています。

【関東エリア】
・未定

まずはお気軽にご相談ください