管理画面にて見出しのデザインを変更する方法

♥ 0

いいねをした人: 居ません

このトピックには1件の返信、2人の参加者があり、最後にキタジマタカシにより4年、 5ヶ月前に更新されました。

2件の投稿を表示中 - 1 - 2件目 (全2件中)

投稿者

投稿
2019年11月12日 11:00 PM #34910
Nobuhito Ohigashi
参加者

♥ 10
トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。

【お使いの Snow Monkey のバージョン】8.0.5
【お使いのブラウザ】Chrome

===

見出し H2のデザインを変更したのですが、

エディター画面でも、同じ変更後のH2デザインで表示するには、どのようにすれば良いでしょうか？

My snow monkeyに
```
/* 管理画面スタイル */
function my_editor_style_setup() {
	add_theme_support( 'editor-styles' );
	add_editor_style( plugins_url( 'css/my_custom_editor_style.css', __FILE__ ) );
}
add_action( 'after_setup_theme', 'my_editor_style_setup' );
```
と書いて、My snow monkeyのフォルダ内にスタイルシートを設置して、クラシックエディタの見出しデザインは変更できましたが、

ブロックエディタのデザインが変更できずでした。

そもそも、上のコードでのカスタマイズでOKなのでしょうか？

よろしくお願いします。

♥ 0

いいねをした人: 居ません
2019年11月13日 11:13 PM #35051
キタジマタカシ
参加者

♥ 2243
どうも参照先が http〜 のような URL 形式の場合は add_editor_style() ではうまくいかない場合があるようです。僕のローカル環境で試したからかもしれませんが…。ひとまず、無理やりパスで参照すれば適用されました。
```
function my_editor_style_setup() {
	add_theme_support( 'editor-styles' );
	add_editor_style( '/../../plugins/my-snow-monkey2/css/my_custom_editor_style.css' ); // テーマからの相対パスで指定
}
add_action( 'after_setup_theme', 'my_editor_style_setup' );
```
もしくは、次のコードでもスタイルを反映できました。
```
function my_editor_style_setup() {
	wp_enqueue_style(
		'wp-oembed-blog-card',
		plugin_dir_url( __FILE__ ) . '/css/my_custom_editor_style.css',
		[],
		filemtime( plugin_dir_path( __FILE__ ) . '/css/my_custom_editor_style.css' )
	);
}
add_action( 'enqueue_block_editor_assets', 'my_editor_style_setup' );
```
add_editor_style() の場合と違って自動的に .editor-styles-wrapper が補完されたりはしないので、必要に応じて調整が必要かもしれません。例えばこんな感じ。
```
/* css/my_custom_editor_style.css */

.editor-styles-wrapper h2 {
  font-size: 10rem;
}
```
また、こちらの場合は add_editor_style() で読み込まれる CSS よりも先に読み込まれるので、優先順の関係で強めにスタイルを当てたりしないといけなさそうなのがちょっとめんどくさそうでした。

♥ 0

いいねをした人: 居ません
投稿者

投稿