【続編】ブロックテーマでサイトの背景画像を設定する方法

公開日:2025(令和7)年1月28日/最終更新日:

WordPress Block Theme Customize | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



以前以下のページで、ブロックテーマがWordPressの標準テーマになった頃にサイトの背景画像を設定する方法を紹介しました。

今回はその後バージョン更新したWordPressで背景画像を設定する方法、それぞれの方法についての問題点と解決策について紹介していきます。

本ページはWordPress6.7.1、Twenty Twenty-Threeのフォークテーマを使った場合の設定例として紹介しますが、ブロックテーマはWordPressの基本機能であるブロックエディターの機能の中で動作するものですので、テーマは異なっても同じようになると思います

【方法1】サイトエディターのグローバルスタイルで設定する

まずはブロックテーマを有効化している場合にWordPressの管理画面上で一番簡単に設定できる背景画像の指定方法を紹介します。

サイトエディター(外観→エディター)を開き、一覧から「スタイル」をクリック後、スタイルという題目右の鉛筆マークをクリックすると、画面右側にスタイル設定画面が開きます(これをグローバルスタイル設定パネルと言います)。

一覧から「背景」をクリックし、「背景画像を追加」というボタンをクリックしてメディアライブラリ内、または、アップロードした画像を指定して保存すれば背景画像が設定できます。

他の方法を試す際はグローバルスタイル設定画面の三点リーダー(縦に並んだ「・・・」)をクリックしてリセットを行ってください(リセットを選択するとグローバルスタイル設定のすべてが削除されますのでご注意ください)

サイトエディターのグローバルスタイルを使って背景画像を設定した場合の問題点

この方法は、本文などの背景を別の色にした場合でも背景画像が編集画面を埋めることになり、編集しにくくなるため、グローバルスタイルのブロックごとのスタイル項目で「本文」ブロックや「タイトル」ブロックの背景を指定する必要があります。

ただその色が適用されるのは、編集画面内では投稿や固定ページ本文の部分とタイトルの部分のみになるので、日々使うところが一番イメージが湧きにくくなるかも知れませんね。

さらに、ブロックの追加から「パターン」を選択した際に表示されるプレビュー画面の背景も、設定した背景画像が適用されるので、こちらもイメージが湧きにくくなるかも知れません。

これを解消するには次項のスタイルコードの一部を使ってエディター(編集画面)の背景色のみをサイトの同一部分の色に合わせるということになるのですが、それなら最初からスタイルコードですべて設定しても同じなのでは?と個人的には思います。

この問題については、個人的にいろいろと触ってみて感じたものなので、ひょっとするといい方法があるのかも知れません

QA Analytics QA Analytics

【方法2】theme.jsonで設定する

この方法はtheme.jsonの構造や編集にある程度慣れている方でないと難しいかも知れません。

stylesセクションの中に以下の部分を追加します。

		"background": {
			"backgroundImage": "url(背景画像のURL)",
			"backgroundSize": "cover",
			"backgroundPosition": "center",
			"backgroundRepeat": "no-repeat"
		},
設定説明値の例
backgroundImage背景画像のURLを指定します
backgroundSize背景画像の縦横サイズが画面サイズと一致しなかった場合の拡大縮小方法を指定しますcover,contain,fill,scaledownなど
(CSSのobject-fitの値を指定可能)
backgroundPosition背景画像のどの位置を基準にするかを指定しますcenter,left,right,top,bottom及びその組み合わせ
backgroundRepeat背景画像が画面サイズよりも小さかった場合に画像を繰り返し表示するのか、1つの画像を拡大して表示するのかを指定しますrepeat,no-repeat,repeat-x,repeat-yなど

もしも使っているテーマのtheme.jsonに追加しても動作しない場合はsettingセクションの中に以下を追加してみると反映されるかも知れません。

		"background": {
			"backgroundImage": true,
			"backgroundSize": true
		}

他の方法を試す際は追加したコードは削除してください

theme.jsonを使って背景画像を設定した場合の問題点

この方法でも前項のグローバルスタイルと同様の不都合というか問題が発生しますので工夫が必要です。

【方法3】スタイルコードで設定する

既に他の方法を試されている場合には、設定のリセット、追加したコードの削除を行ってください

これまで紹介した2つの方法では、背景画像を使いつつ、本文などは背景色を使う場合に以下の共通の問題点がありました。

  • サイトの構成上本文には背景画像が必要ないのに投稿や固定ページ編集画面では背景画像が表示されてしまう
  • ブロックの追加でパターンを選択した際に表示されるプレビューに背景画像が適用されてしまう

次に紹介するのは、フロントエンド(表示画面)と管理画面のスタイルを分けて登録して、この問題を解消しつつテンプレート編集でもきちんと背景画像が反映されるという手法です。時点では個人的にはこの方法が一番いいのかなと思っています。

フロントエンド側に背景画像を適用させる

以下のスタイルコードをテーマのstyle.cssへ追加することで閲覧画面上に反映されます。

body{
	background-image: url(背景画像のURL);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

追加したら、サイトの表示画面を開き、背景画像が表示されるかを確認してください。

デザインの整合性を持たせるためstyle.cssの内容がブロックエディター側にも反映されるようになっているテーマもありますので、追加したらサイトエディターや投稿編集画面を開いて反映されているかを確認ください。その場合は前述した2つの方法と同じ問題が発生するはずですので、別のスタイルシートファイルを用意して読み込ませる等の措置が必要です

ブロックテーマの中にはコードによるスタイルの追加機能を持たないものもあります。有効化しているテーマファイルの中に「style.css」またはスタイルを適用させるための他のファイルが存在しない場合は次項の手順で機能を追加してください。

スタイルシートファイルの追加方法

パソコン上で、「frontstyle.css」という空のファイルを作り、有効化しているテーマのフォルダ内へアップロードします。

以下のコードを有効化しているテーマのfunctions.phpへ追加します。

function pwcn_custom_front_style_init(){
//スタイルシートの登録
	wp_register_style(
		'pwcn-custom-style',
		get_theme_file_uri('/frontstyle.css'),
		array('global-styles'),
		null,
		'all'
	);

	wp_enqueue_style('pwcn-custom-style');
}
add_action('wp_enqueue_scripts','pwcn_custom_front_style_init');

ここまでの状態でフロントエンドだけにスタイルが適用されていれば、サイトエディターを開いても背景画像は反映されないはずですので、それを確認してから次に進んでください。

サイトエディター側に背景画像を適用させる

以下がサイトエディターとブロックエディターへ背景画像を追加するコードです。有効化しているテーマのfunctions.phpへ追加します。

function pwcn_add_bg_image_site_editor_init() {
//出力(追加)するスタイルコード
$custom_css = '
body.block-editor-iframe__body.editor-styles-wrapper{
	background-image: url(背景画像のURL);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* サイトエディターのテンプレートリストでは背景画像を適用 */
button.page-templates-preview-field__button{
	background-image: url(背景画像のURL);
	background-position: center;
	background-repeat: no-repeat;
}
';

//追加したスタイルコードをサイトエディタ側へインライン出力
	wp_add_inline_style( 'wp-edit-blocks', $custom_css );
}
add_action( 'init', 'pwcn_add_bg_image_site_editor_init' );

追加したらサイトエディターのテンプレート内などに背景画像が反映されているかを確認してください。

この状態では、先の2つの方法で発生した投稿や固定ページの編集画面等に背景画像が反映されてしまう不都合は解消できません。

そこで、サイトエディターによる背景画像込みのテンプレート編集が終わった際(編集をする必要時以外)には、このスタイルが適用されないよう、最終行を以下のようにコメントアウトします。

//add_action( 'init', 'pwcn_add_bg_image_site_editor_init' );

これでコードは存在するけど反映はされない状態となり、フロントエンドには影響が出ない形で不具合は解消できます。

逆に再び背景画像が必要な機会(テンプレートの編集など)ができた時にはこのコメントアウトを外せば背景画像が反映されます。

【番外編】Hima Art Utilityプラグインを使う

最後に、当サイトで配布しながら使用しているHima Art Utilityプラグインに備わっている背景画像機能を使う方法を紹介しておきます。

Hima Art Utilityプラグインは以下から自由にダウンロード、使用いただけます。

WordPress公式プラグインリポジトリでは配布していません

Hima Art Utilityプラグインは本ページで紹介している背景画像設定機能以外にもWordPressでのサイト運営に必要な様々な機能をセットにしたユーティリティプラグインですのでぜひお試しください。

Hima Art Utilityの背景画像機能は、前述した【方法3】を基礎として、機能のON/OFF、管理画面側への反映のON/OFFその他の機能を設定画面から制御できるようにしています

Hima Art Utilityの背景画像機能を使う方法

プラグインを入手し、インストールして有効化すると管理画面に「HA Utility」というメニューが追加されます。

背景画像を設定するには「HA Utility」メニューの「ブロックテーマ向け」サブメニューを開き、「サイト全体の背景画像」から行います。

設定画面の一番上にある「サイトに背景画像を使う」項目を無効にすると、そこから下にどんな設定をしていても無効になるようにしているので、テストも容易に行えます

設定の詳細については以下のページを参照ください。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Block Theme Customize | Personal WP Customization Notes (PWCN)
ブロックテーマでサイトの背景画像を設定する5つの方法