はじめに
自作テーマを適用しているWordpress（以下WP）で、お客様（以下ユーザー）側で投稿の装飾をした際にサイトのデザインと合わない色やサイトのイメージカラーに対して協調できていない色（赤がメインカラーなのに、強調色が赤など）があり、デザインした自分もですが、デザインにこだわったお客様もがっかりするようなことになってしまいます。
デザインする時は、細かい部分もきちんとデザインしなければならないなと自戒を込めて、とり急ぎここだけCSSあてておけば何とか投稿ページ（お客様が編集した箇所）だけデザインがおかしいなんてことは防げるかなと思った次第です。
本来はサイトと同じが望ましい
本来、ブロックエディタ―のスタイルは、サイトのデザインと同じことが望ましいので、テーマフォルダ直下のstyle.cssをfunctions.phpに読み込ませるのが良いのですが、私の場合は、サイトデザインに係るCSSをメディアサイズで分けたり、コンテンツの種類（ナビゲーションやパンくずリストなど）で分けたりするので、後のカスタマイズ性を考えた時に、別ファイルにすることにしました。
投稿画面にCSSを適用
ブロックエディタ―に適用するCSSはfunctions.phpに以下のコードを追記してください。
ファイル名はcssフォルダに配置したeditor-styles.cssとしていますが、ファイル名はご自身がわかりやすい形でOKです。
//ブロックエディタ編集画面設定///////////////////////////////////////////
function add_block_editor_styles() {
wp_enqueue_style( 'editor-styles', get_stylesheet_directory_uri() . '/css/editor-styles.css' );
}
add_action( 'enqueue_block_editor_assets', 'add_block_editor_styles' );
editor-styles.cssの中身は以下の通りです。
ナチュラルなデザインのサイトなので、背景色や文字色は淡い色合いです。
editor-styles-wrapperは、ブロックエディタ―の全体を覆っているclassです。
テーマフォルダ直下のstyle.cssと同じ設定にします。
ここでは、文字の種類、基本の文字サイズなどを指定していますが、適宜追加・削除してください。
/*------------------------------------------------------------
Block Editor
-------------------------------------------------------------*/
.editor-styles-wrapper {
font-family: 'Noto Sans JP', sans-serif;
color: #3b2f23;
font-size: 16px;
font-weight: 400;
line-height: 180%;
background: #fff4e9;
}
/* リフトマーカーを表示しない */
ul {
list-style: none;
}
各種タイトル（ヘディング）は、ここでは%で指定していますが、emやremでOKです。
h3では、書体をGoogle Fontのキウイ丸にしています。
/*--Heding------------------------------------*/
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
}
h3 {
font-size: 120%;
color: #84be3e;
font-family: 'Kiwi Maru', serif;
font-weight: 500;
}
h4 {
font-size: 100%;
}
ブロックエディタで選択する文字のサイズや色などをカスタマイズ
ブロックエディタで選択する文字のサイズや色などをカスタマイズします。
functions.phpで指定するのは、ブロックエディタの右側に表示される「ブロック」タブの「色」と「タイポグラフィ」の部分です。
ここから指定した色やサイズをユーザーに選んでもらう事で、サイトのデザインに大きく影響せずに、ユーザーが行いたい装飾ができるようになります。
文字サイズは、あまりバリエーションを増やしても、使われないことが多いので、3サイズにとどめています。
// ブロックエディタ 色とフォントサイズ///////////////////////////////////////////
add_action( 'after_setup_theme', function() {
add_theme_support( 'editor-color-palette', array(
array(
'name' => '強い茶色',
'slug' => 'strong-brown',
'color' => '#3b2f23',
),
array(
'name' => '濃いピンク',
'slug' => 'very-pink',
'color' => '#f1375b',
),
array(
'name' => '黄緑',
'slug' => 'light-green',
'color' => '#84be3e',
),
array(
'name' => '薄いベージュ',
'slug' => 'light-beige',
'color' => '#fff4e9',
),
) );
} );
add_theme_support( 'editor-font-sizes', array(
array(
'name' => '小',
'shortName' => 'S',
'size' => 16,
'slug' => 'small'
),
array(
'name' => '中',
'shortName' => 'M',
'size' => 21,
'slug' => 'regular'
),
array(
'name' => '大',
'shortName' => 'L',
'size' => 36,
'slug' => 'large'
),
) );
こんな感じになります。（背景色も同じようになっています）
ブロックエディタで指定した色やサイズを実際のサイトに反映
ブロックエディタ―に色やサイズを指定しても、実際のサイトにそれを反映させるためには、CSSに記述する必要があります。
さきほどのeditor-styles.cssに追記します。
ここで気づいて欲しいのですが、functions.phpで指定したslugがそのままclassに使われています。
文字色の場合はslugの前に.has-、背景色は先頭に.has-末尾に-background-colorが付きます。
functions.phpで指定したカラーコードを指定してください。
/*------------------------------------------------------------
Custom Text Color & Background Color
※fnc/admin-control.phpへの設定も必要
-------------------------------------------------------------*/
.has-very-pink-color {
color: #f1375b;
}
.has-strong-brown-color {
color: #3b2f23;
}
.has-light-green-color {
color: #84be3e;
}
.has-light-beige-color {
color: #fff4e9;
}
.has-very-pink-background-color {
background-color: #f1375b;
}
.has-strong-brown-background-color {
background-color: #3b2f23;
}
.has-light-green-background-color {
background-color: #84be3e;
}
.has-light-beige-background-color {
background-color: #fff4e9;
}
色のバリエーションを増やせば、この記述も増えます。
まとめ
私が担当しているユーザーの環境で、ここ2年ほどでやっとブロックエディタの存在が知られてきたこともあり、投稿画面の見た目や出来上がった記事の文字色等を気にするユーザーが増えてきました。
クラッシックエディターに慣れてしまったユーザーがブロックエディターになれるのは、かなり大変なようで、ほんの少しのコード追加だけでその敷居を低くできるのであれば、やるべきだなと思っています。
都会の最新の技術に常に触れている方々にとっては「古い」「いまさら」と感じることかと思いますが、田舎でのWEBサイトのリニューアル案件では、ある話なので、生ぬるく見守っていただけると幸いです。
また、いつもの様に、WPでのサイト制作は15年ほどやっていますが、独学でここまで来ていますので、間違って解釈している部分などあるかと思います。その際は、コメント欄にてご指摘いただけますと幸いです。
ご覧いただきありがとうございました。