ブロックエディタのスタイル（CSS）カスタマイズ手順 – Snow Monkeyの場合-

WordPressの有料テーマ Snow Monkey を使っている。ブロックエディタのスタイル（CSS）を変更したいとき、管理画面の外観 > カスタマイズ > 追加CSS に、CSSを追記しても反映されない。

ブロックエディタにCSSを追加するには、ちょっぴり工夫が必要になる。

設定手順

Snow Monkeyの場合、カスタマイズは、プラグイン My SnowMonkey を使うことが推奨されており、このプラグインのディレクトリに、FTPで、editor.css を作成する。

wp-content
 ├ plugins/
    └ my-snow-monkey/
       ├ my-snow-monkey.php
       └ editor.css

この、editor.css に、ブロックエディタ に追加したいスタイルを記入する。

次に、My SnowMonkey ディレクトリにある my-snow-monkey.php に以下のコードを追加する。

これで、ブロックエディタ へ、スタイルシート（CSS）を適応できる。

//=============================================
/* ブロックエディタ CSS 適応 */
add_action( 'enqueue_block_editor_assets', function() {
	$file_css = 'editor.css';
	$date_css = date('YmdGis', filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ));
	wp_enqueue_style( 'my-block', plugins_url( $file_css, __FILE__ ), array( 'wp-block-library' ),  $date_css );
} );

なお、このコードには、ちょっと仕掛けがしてある。CSSファイルは、ブラウザでキャッシュされるため、変更しても変更が反映されないことが多い。

editor.css の更新日時を取得して、CSSファイルの後ろに、?=ver202002141215 のようにクエリパラメータが自動で追記される。更新すると、このパラメーターが変わるので、キャッシュに悩まなくて済む。

実際の設定例

Snow Monkeyにて、アクセントカラーを白色に設定すると、ブロックエディタ ーの、テキストリンク文字色が白色になってしまい、リンクテキストが見えなくなる。

ページの表示での色設定は、追加CSSで変更できるが、ブロックエディタ ーの色設定は、上の手順が必要だ。

My SnowMonkey プラグインのディレクトリをFTPを開き、 my-snow-monkey.php の最終行に以下のコードを追加する。

/* ブロックエディタ CSS */
add_action( 'enqueue_block_editor_assets', function() {
	$file_css = 'block_editor.css';
	wp_enqueue_style( 'my-block', plugins_url( $file_css, __FILE__ ), array( 'wp-block-library' ) );
} );

スタイルシートのファイル名は、block_editor.css に。

同じくMy SnowMonkey プラグインのディレクトリにblock_editor.css ファイルを新規作成し、下のコードを貼り付ける。

.editor-styles-wrapper a {
    color:#0073aa !important;
}

これで、ブロックエディタ ーのテキストリンクがブルーになる。一件落着。

参考記事

参考にした記事は、こちら。感謝。

✓ あわせて読みたい

WordPress5 新エディタにCSSを適用する方法