WordPressの編集画面にCSSをあてる方法

1）CSSファイルを用意

下記のように実際の表示に近いスタイルをあてれるよう記載

https://siennahare23.sakura.ne.jp/e-style/editor.css

h2.wp-block-heading {
	font-size: 1.3rem;
	border-top: 1px solid var(--main-color);
	border-bottom: 1px solid var(--main-color);
	padding: .625em 1em;
}

h3.wp-block-heading {
	font-size: 1.25rem;
	border-bottom: 1px solid var(--main-color);
	padding: .5em 1em;
}

h4.wp-block-heading {
	font-size: 1.125rem;
}

.wp-block-group {
	padding: 1rem;
}

.wp-block-code {
    background-color: #f2f2f2;
    overflow-x: auto;
    padding: 1rem;
}

2）functions.phpを編集

「functions.php」もしくはプラグイン「WPCode」PHP スニペットで下記を記述

add_action('after_setup_theme', //テーマ初期化のタイミングで関数を読み込み
	function() {
		add_theme_support( 'editor-styles' );
	}
);

// エディターにCSS読み込み
add_action('admin_init',
	function() {
		add_editor_style( 'https://siennahare23.sakura.ne.jp/e-style/editor.css' );
	}
);