WordPressのブロックエディターでスタイルなどの設定ができるサイトエディターでは、スタイル→背景から背景画像が設定できるようになっています。
しかしながら、これにはカバーブロックのようにオーバーレイ（画像に何かの要素を被せる）機能がないため、サイトエディターの機能を使って背景画像を指定する場合には、画像自体を加工した後で背景画像として設定する必要があり、画像の加工ツールなどがない場合には困難ですし、何より加工した画像がそのサイトのその他の色とマッチするかどうかは適用させてみないと分からないので、何度も加工を繰り返すような作業が必要となって面倒だったりします。
逆にこれを行うためにすべてのテンプレートの背景をカバーブロックで指定するようにすると確かに不都合は解消されるものの、背景画像を変えたいときにはすべてのテンプレートの画像を変更したり調整したりする必要がある他、投稿や固定ページの編集画面には適用されない不具合が出てしまいます。
本ページで紹介する簡単なスタイルコードをフロントエンドとエディターのフレーム側に適用させることで、サイトエディターのスタイルで設定した背景画像へ不具合なく透過色を被せることができますので、困っている誰かのためにメモとして公開しておきます。
サイトエディターで指定した背景画像に透過色を加えるスタイルコード
テーマや自作プラグインのスタイルシートの読み込みが、フロントエンドとブロックエディターの両方へきちんと適用される形になっていれば、以下のスタイルコードをstyle.cssへ追加すれば適用されます（フロントエンドにしか適用されないときは、サイトエディターやブロックエディター側に適用されないときはを参照ください）。
適用されない場合は「Ctrl」＋「F5」を押して、ブラウザキャッシュのクリアをしてみてください
/*** 背景画像にレイヤー（透過色）を加える ***/
/* サイト全体のラッパー要素（フロント・エディター共通で影響を最小限にする） */
body,
.editor-styles-wrapper,
.block-editor-iframe__body
{
position: relative;
z-index: 0;
}
/* 擬似要素でオーバーレイを最背面に配置（コンテンツの下に潜り込ませる） */
body::after,
.editor-styles-wrapper::after,
.block-editor-iframe__body::after
{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%!important;
background-color: rgba(0, 0, 0, 0.3); /* 透過色（オーバーレイ） */
z-index: -1;
pointer-events: none;
}コードでは、「background-color: rgba(0, 0, 0, 0.3); 」のところで、黒色で透明度30%の色を被せるようにしていますので、自身のサイトに合わせて変更してください
これなら、透明色や透明度を変更するだけで済むので、画像の加工が必要なくなるケースが増えて簡単ですね。
サイトエディターやブロックエディター側に適用されないときは
テーマのスタイルシートや自作プラグインのスタイルシートがどのように読み込まれているかを確認します。
functions.phpやプラグインのプログラムのスタイルシートを読み込む部分がどこにフックされているかを確認してください。
add_action('wp_enqueue_scripts','ユーザー定義関数名');上記のように、wp_enqueue_scriptsにフックされている場合は、フロントエンドにしか適用されませんので以下に変更してみてください。
add_action('enqueue_block_assets','ユーザー定義関数名');また、読み込みの仕方によってはブラウザキャッシュが効いて変更が適用されていないこともありますので、「Ctrl」＋「F5」でブラウザキャッシュをクリアしてみてください。
