【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で設定したものが、今後変更される可能性はあるかもしれません。

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

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

★詳細:ポートレイト/プロフィール撮影(Photo Session)
★詳細:Photo Shooting

撮影予約可能日

【関西エリア】
・当面の間は関西にいます。ご依頼お待ちしています。

【関東エリア】
・7月上旬、8月上旬に関東予定です。

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

この記事を書いた人

花村貴史|Takashi Q. Hanamura

人物や風景、街並み、小物を好んで撮っている空気感フォトグラファー。本職であるPhotographerのかたわら、Engineer、Creatorとしても活動中。
その人・その場の「空気感をそっとすくい撮る」写真が好評。「自分の素敵に気づける写真」を撮る。数年間の心のお稽古によるカウンセラーマインドによって、撮影は「心のセッション」になることも。
オシゴトについては「撮影サービス」からどうぞ。

撮影|Photo Session

お話しながらのポートレイト撮影です。「今」そして「これから」のあなたにフォーカスして撮影します。SNSやサイト用のプロフィール写真に。

撮影|Photo Shooting

「友達と楽しんでいる」「セミナーで講演している」「パーティーを主催している」など、皆さんが大切な時間を過ごしている瞬間をスナップします。

写真術|Photo Lecture

カメラの使い方、撮影術、Lightroomの使い方などの「マンツーマンレクチャ」や「少人数制のワークショップ」について。写真に関する疑問の解決に。

販売:Photo Sales

A3ノビ〜A4程度のサイズの額装販売および、壁紙などの写真データの販売。ご自宅やコミニュティスペースに飾り、癒しになれば嬉しい。