ブロックエディタのスタイル(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;
}

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

参考記事

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

あわせて読みたい
plugin_dir_path

続きを見る

無料メルマガにぜひご登録ください

ブログより日常を書いています。
ものくろキャンプ メルマガ
購読登録フォーム
Eメール  *
お名前(姓)  *
お名前(名)  *

講座・ワークショップ 開催予定

2022-12-08 19:00 – 22:00
木曜夜開催【東京 ブログ】グループセッション 12月8日
詳細・お申し込みはこちら

2022-12-09 19:00 – 20:30
金曜夜:こころの発酵 マインドフルネス瞑想会+軽食
詳細・お申し込みはこちら

2022-12-10 11:00 – 13:30
オンライン・リアル選べます【あみだす発酵アカデミー】本場香港の味 XO醤作りクラス
詳細・お申し込みはこちら

2022-12-10 18:00 – 21:00
2022 あみだす望年会っ
詳細・お申し込みはこちら

2022-12-16 19:00 – 22:00
第4金曜日開催 オンライン【ブログ】グループレッスン 12月16日※12月のみ第3週目となります
詳細・お申し込みはこちら

2022-12-17 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2022-12-18 13:00 – 14:30
日曜昼:こころの発酵  マインドフルネス瞑想会+ランチ
詳細・お申し込みはこちら

2022-12-30 10:00 – 18:00
リアル・オンラインどちらもOK!ものくろ流WordPressスタートアップ講座 -第42期- 講師 ものくろ
詳細・お申し込みはこちら

2023-01-07 13:00 – 15:00
大阪【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-09 20:00 – 21:30
【あみだす新春スペシャル】運気に乗ろう!暦を味方に付ける講座:オンライン
詳細・お申し込みはこちら

2023-01-11 19:30 – 21:30
【ものくろキャンプ】全5回 第二水曜日・オンライン開催 「情報発信しようとするとなぜか?ブロックがかかってしまう人のためのブログ・SNS講座」
詳細・お申し込みはこちら

2023-01-12 11:00 – 13:30
平日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-12 19:00 – 22:00
木曜夜開催【東京 ブログ】グループセッション 1月12日
詳細・お申し込みはこちら

2023-01-14 11:00 – 13:30
オンライン【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-14 15:00 – 17:30
【あみだす発酵アカデミー】白菜キムチ(キムジャン)作りクラス
詳細・お申し込みはこちら

2023-01-15 13:00 – 15:30
日曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-21 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-01-27 19:00 – 22:00
第4金曜日開催 オンライン【ブログ】グループレッスン 1月27日
詳細・お申し込みはこちら

2023-02-18 11:00 – 13:30
土曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-02-19 11:00 – 13:30
日曜【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

2023-02-23 11:00 – 13:30
木・祝日【あみだす発酵アカデミー】お味噌が選べる寒仕込み味噌クラス
詳細・お申し込みはこちら

  • ブックマーク

【案内板】

このブログをはじめて読んだあなたへ
ぜひ読んでもらいたい記事を用意しました。

オンラインショップあります

↓ 下のバーナーをクリックすると移動します。