【Hima Art Utility】プラグインの機能の1つである、ブロックテーマで背景画像を使用するための設定について、具体的な使用方法や仕様を紹介するページです。
ブロックテーマのグローバルスタイル（全体設定）では背景色のみが指定できるようになっており、背景画像についてはCSS等を使って実装するのが一般的です。
しかしながら、背景画像を適用しなければならない部分には「フロントエンド（閲覧画面）」「投稿・固定ページ編集画面」「テーマエディター（テンプレートの編集画面）」の3つに対して適切に背景画像を適用させる必要があり、かつ、テンプレートによっては背景画像をなしにしたい場合などにも対処が必要です。
これをプラグインの機能としてより簡単にコントロールできるようにしたのが、本機能です。
背景画像の設定手順
設定は、管理画面の「Hima Art Utility」→「ブロックテーマ向け」を開き、「サイト全体の背景画像」から行います。
以下が背景画像に関する設定項目です。
- サイトに背景画像を使う
その他の設定に関わらず、背景画像を有効／無効にできます - 背景画像の設定
背景に使用する画像の選択・アップロードができます - 背景画像の位置
選択した画像を拡縮して表示させるケースが発生した場合の、画像の基準点を指定します - 画像の繰り返し
小さい画像を繰り返して表示させる場合のスイッチです - 背景画像に黒いレイヤーを追加する（バージョン2.0より使用可能）
背景画像とコンテンツの色調調整ができるよう、背景画像に黒のレイヤー（マスク）を追加できます - 透過色を重ねる
「ha-color-bg」クラスを追加したブロックやグループに対して、背景画像に被せる色と透過度を適用し、背景画像の中にコンテンツが溶け込みながら、かつ、閲覧しやすくします - 編集画面で背景画像を無効にする
個別テンプレート上で本文背景に色指定している場合などで、投稿・固定ページ編集画面には背景画像が不要なときに使用します - 特定のbodyクラスでは背景画像を非表示にする
追加したテンプレートのCSSクラスを指定することで、そのテンプレートのみ背景画像を無効にすることができます - テンプレート編集画面で一時的に背景画像を無効にする
背景画像を無効にしたテンプレートを編集する際に、一時的にテーマエディター上の背景画像を無効にすることができる機能です - プリロードを有効にする
背景画像をプリロード(先読み)させるためのタグをヘッダー内に出力します
機能仕様による設定上の補足事項
背景に使用する画像について
画面の縦横サイズによっては調整の必要があるため、「背景画像の位置」で指定した起点を基準として、画面いっぱいになるように拡大・縮小を行うようにしています。
基本的にフルHD(1920×1080ピクセル)の倍数である画像を使用することで、ある程度のモニタ上では、アップロードした画像がそのままの形で表示されますが、モニタサイズは多数存在しますので、自動調整によって見え方が異なる場合があります。
特定のテンプレートで背景画像を無効にする機能について
本機能に関連するのは、「特定のbodyクラスでは背景画像を非表示にする」と「テンプレート編集画面で一時的に背景画像を無効にする」の設定項目です。
ブロックテーマでテンプレートの追加を行うと、そのテンプレート特有のCSSクラスが付与されます（調べ方については後述）。
このCSSクラスを「特定のbodyクラスでは背景画像を非表示にする」欄に入力することで、そのテンプレートについては、フロントエンド（閲覧画面）と、投稿・固定ページ編集画面上で背景画像を表示させないようにします。
しかしながら、テーマエディター（テンプレートの編集を行う画面）では、テンプレートの判別ができないため、「特定のbodyクラスでは背景画像を非表示にする」欄に入力しても、背景画像が表示されてしまい、テンプレート編集に不都合が生じることがあります。
これを解消するため、「テンプレート編集画面で一時的に背景画像を無効にする」という設定項目を設けています。
この項目を有効にすると、テーマエディター内のすべてのテンプレートに対して背景画像を一時的に無効にすることができますので、背景画像を持たないテンプレートの編集がしやすくなります。
「テンプレート編集画面で一時的に背景画像を無効にする」を有効にしても、閲覧画面（フロントエンド）では通常通り背景画像ありのものは背景画像付きで表示されますから、編集中に訪問者に対して不都合を与えることはありません
追加テンプレートに付与されるCSSクラスの調べ方
「特定のbodyクラスでは背景画像を非表示にする」欄に入力するためのCSSクラスの調べ方を解説します。
既に背景画像を持たないようにしたいテンプレートが作成済であることを前提とします
追加したテンプレートを使った投稿や固定ページ（公開・未公開問わず）のプレビュー（新しいタブでプレビュー）を開きます。
プレビューした画面のどこかで右クリックし、「検証（Google Chromeブラウザの場合）」をクリックします。
出てきた窓の上の方にある「要素」「コンソール」．．．のタブのうち、「要素」をクリックします。
冒頭の方の行にある「body …」の部分を参照します。
bodyの後にたくさん書かれている項目の中で、以下のようになっている部分を探します。
page-template-wp-custom-template-カスタムテンプレートスラグこれが、そのテンプレート特有のCSSクラスです。
投稿の場合は「post-template-wp-custom-template-カスタムテンプレートスラグ」になります
これを「特定のbodyクラスでは背景画像を非表示にする」の入力窓に、先頭に「.」を付けて入力することで、そのテンプレートでは背景画像が無効になります。
複数のCSSクラスを指定する場合（複数の背景画像なしテンプレートを使用する場合）には、CSSクラスの間をカンマ（,）で区切ります
コメントを残す