背景画像機能の概要と設定方法【バージョン5.4以降改訂版】

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

WordPress plugin Hima Art UtilityWordPress Customize Ideas | Personal WP Customization Notes (PWCN)

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



本ページでは、Hima Art Utilityプラグインの機能の一つであるサイト全体の背景画像設定機能について紹介します。

背景画像設定機能の概要

本機能は、サイトのフロントエンド(表示画面)とブロックエディター(投稿や固定ページの編集画面)、サイトエディター(ブロックテーマの編集画面)に背景画像を反映させるものです。

QA Analytics QA Analytics

背景画像の設定方法と留意事項

設定項目と設定方法

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

背景画像は画面サイズに応じて拡縮されますが、現在多くの方が利用している画面サイズがフルHD(1920x1080px)ですので、画像のサイズを「1920×1080(フルHD)」にすることでイメージ通りの画像配置になると思います

サイトの状況により設定を行ってください。

設定項目説明
サイトに背景画像を使う詳細設定に関わらず機能のON/OFFができます
背景画像の設定メディアライブラリにアップロードした画像の中から背景に設定する画像を選択します
背景画像の位置実際に表示させた背景画像の位置を調整できます
画像の繰り返しONにすると、背景画像が画面サイズよりも小さい場合に画像を繰り返して表示します
OFFの場合には画像を自動で拡大縮小します
背景画像に黒いレイヤーを追加する背景画像に黒を基調としたレイヤー(重ね色)を被せ、画像を暗めに表示させることができます
透過色を重ねる背景画像を設定したサイトで、コンテンツの背景色を設定しない場合に、透過性のある背景色を付けてコンテンツを見やすくする機能です
ブロックエディターの背景色を設定する場合と比べ、透過度を指定できる分、背景とコンテンツとの親和性が図れます
編集画面で背景画像を無効にする投稿や固定ページの編集画面では背景画像を無効にします。投稿コンテンツの背景を別の色にしている場合などに効果的です。
特定のbodyクラスでは背景画像を非表示にするブロックテーマのカスタムテンプレートを認識するためのbodyクラスを指定することで、そのテンプレートでは背景画像を無効にします
テンプレートエディタとパターンインサーターで背景画像を無効にする※この設定については欄外をご覧ください
プリロードを有効にするHTMLヘッダー内に背景画像を先読みするためのコードを追加します。これにより、ページ解析などで背景に指定した画像に対して問題提起されるのを回避できるケースがあります

テンプレートエディタとパターンインサーターで背景画像を無効にする設定について

このスイッチでは主に以下の2つのことを制御します。

  1. サイトエディターのテンプレート編集での背景画像削除
  2. 投稿・固定ページ編集画面等でパターンインサーターを表示させた際のプレビュー表示での背景画像を削除

1については、WordPressの仕様として、サイトエディターのテンプレート編集画面が画面を特定する識別子(bodyクラス)を持たないため、「特定のbodyクラスでは背景画像を非表示にする」に指定したテンプレートでも背景画像が表示されてしまう仕組みになっているので、背景画像のないテンプレートを編集する際に背景画像が邪魔にならないようにする目的があります。

2についてはこちらもWordPressの仕様として、サイトエディターのテンプレート編集画面と、投稿・固定ページ編集画面のブロック追加から選択できるパターンメニューのプレビュー表示の埋め込み方が共通であることから、例えば背景画像を使っていても投稿本文の背景は白色にしているパターンなどで、プレビューが見にくくなるのを防ぐという目的があります。

この設定はフロントエンド(表示画面)には影響を与えませんので、背景画像を使うサイトでコンテンツ(本文)部分に背景色などを使って背景画像に被せている場合(本サイトがこの形態です)や、背景画像を持たないテンプレートを持つサイトを運営する場合には、常に有効にしておき、背景画像を持つテンプレートの編集を行う場合のみ無効にするという使い方をするのがよいかと思います。

既知の不具合と留意事項

WordPress6.7.1の段階で機能は調整していますが、以下の不具合(不都合)があります。

テンプレートプレビュー画面

サイトエディターでテンプレートを選択する際のプレビュー画面でも背景画像を反映させるようにしていますが、以下のような不具合が発生することがあります。

  • 背景画像の位置が実際の表示と合わないことがあります
  • 読み込みの問題により背景画像が適用されないことがあったり、ページ内容がプレビューに展開されないケースがあります

いずれもプレビュー表示での問題ですので、テンプレートの編集画面やフロントエンド表示には影響はありません

パターンインサーターのパターンプレビュー

背景画像はパターンインサーターのプレビュー(ブロック選択から「パターン」を選択した場合に表示される各項目のプレビュー)にも適用され、プレビューが見にくいため、スタイルを追加して背景画像を無効にしています。

これによりパターンプレビューの背景は白になり、コンテンツ部分も背景画像を反映させるようなデザインのサイトでは、パターンのイメージがつかみにくくなることがあります。

サイトエディターのグローバルスタイル上でコンテンツ部分に背景画像や背景色を指定しているサイトでは、実際に挿入したパターン上ではそれらは反映されます



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress plugin Hima Art UtilityWordPress Customize Ideas | Personal WP Customization Notes (PWCN)
セキュリティヘッダー追加機能の仕様と使い方