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

2件の投稿を表示中 - 1 - 2件目 (全2件中)
  • 投稿者
    投稿
  • #34910
    Nobuhito Ohigashi
    参加者
    4

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

    【お使いの 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
    #35051
    キタジマ タカシ
    キーマスター
    287

    どうも参照先が 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
2件の投稿を表示中 - 1 - 2件目 (全2件中)
  • トピック「管理画面にて見出しのデザインを変更する方法」には新しい返信をつけることはできません。