ガイド/サイトをカスタマイズ/エディター/サイトの背景画像を変更する

サイトの背景画像を変更する

カスタム背景を設定することで、サイトの外観をパーソナライズできます。背景画像を変更する場合は、このガイドの手順に従ってください。

背景画像を選択する際のヒント

背景画像の設定は、個性をアピールし、サイトをユニークにする効果的な方法です。サイトの背景画像をカスタマイズする際のヒントをいくつかご紹介します。

  • 使用する画像によっては、背景画像があるとその上に重なるテキストが読みにくくなることがあります。サイトのコンテンツが不明瞭にならないよう、控えめな画像や無地のパターンを選ぶのがポイントです。
  • サイトの横幅いっぱいに拡大してもぼやけて見えない高品質の画像を選びます。無料の写真ギャラリーから高品質の画像を選択できます。
  • 選択する画像については、サイトのテキストと相互に引き立て合う色を選び、調和しない色や文字が読みにくくなる色は避けます。

画像の代わりに背景を選択する場合は、次のガイドの「サイトの背景色を変更する」を参照してください。それ以外の場合は、引き続き、背景画像を変更する手順を参照してください。

サイト全体に背景画像を設定する

以下の手順でサイトの背景画像を変更できます。

このガイドのどのセクションに従えばよいかを決めるには、ダッシュボードにアクセスして左側の「外観」の下を確認します。そこに「エディター」が表示されている場合は、このガイドのサイトエディターのセクションを参照します。それ以外の場合は、カスタマイザーの手順を参照します。

スタイルオプションを使用して、サイト全体の背景画像を変更します。サイトの背景画像を追加、削除、変更するには、次の手順に従います。

  1. サイトのダッシュボードにアクセスします。
  2. 「外観」→「エディター」の順に移動します。
  3. 左側のメニューから「スタイル」を選択します。
    • エディターでは、右上にあるスタイルアイコンを選択することもできます。ボタンは黒と白の丸のような外観です。
  4. 「背景」オプションをクリックします。
  5. 「背景画像を追加」ボタンをクリックして、メディアライブラリから画像を選択するか、コンピューターから画像をアップロードします。
  6. 必要に応じて、選択した画像をクリックして、背景画像設定をカスタマイズします。
  7. 「保存」ボタンをクリックして、サイトに背景画像を適用します。
スタイルエディターの「背景」オプション。

背景画像設定を調整する

背景画像が設定されたら、背景画像をクリックして設定パネルを開き、焦点、位置、サイズを設定できます。

  • 焦点: 画像全体を表示できない小さな画面の場合にフォーカスする、画像の焦点を設定します。画像内の円をドラッグするか、「左」「上」のパーセンテージオプションを使用して正確な位置を指定できます。
  • 固定背景: 背景はビューポートに対して固定されます。画像はサイトのコンテンツの背後に静止した状態で表示されます。
  • サイズ:
    • カバー: ブロック全体を覆うように背景画像は引き伸ばされます。
    • 含める: ブロックに合わせて切り抜かなくても背景画像のサイズが変更されます。
    • タイル: カスタムフィールドで背景画像の固定幅を設定します。サイズセクションの下のフィールドを使用して、サイズと画像を繰り返すかどうかを設定します。
焦点とサイズを含む背景画像設定。

背景画像を削除する

背景画像を削除 (または置換) するには、次の手順に従います。

  1. サイトのダッシュボードにアクセスします。
  2. 「外観」→「エディター」の順に移動します。
  3. 左側のメニューから「スタイル」を選択します。
    • エディターでは、右上にあるスタイルアイコンを選択することもできます。ボタンは黒と白の丸のような外観です。
  4. 「背景画像」ラベルの横にある3つの点をクリックし、画像の横にある「リセット」オプションまたはパネル下部にある「すべてリセット」ボタンをクリックします。
「背景画像」ヘッダーの右側にある3つの点からリセットオプションを指している矢印。

特定のブロックに背景画像を追加する

サイト全体ではなく、ページまたはテンプレートの特定の部分に背景画像を設定する場合は、「グループブロック」を使用してコンテンツをグループ化し、そのグループに背景を追加できます。

一部のブロックには、ブロックのコンテンツの背後に背景画像を表示する設定があります。特定のブロックに背景画像を設定するには、次の手順に従います。

  1. 背景画像を追加するブロックを選択します (グループコンテンツ引用などへのサポートが含まれています)。
  2. ブロック設定サイドバーが開きます。

サイドバーが右側に表示されない場合、右上の設定アイコンをクリックして設定を表示させます。このアイコンは2つの不均一な列がある正方形のような形をしています。

WordPress エディター上部のハイライト表示された設定アイコン。
右上の設定アイコン
  1. ブロックの設定の「スタイル」セクションで「背景画像」設定を見つけます。
  2. 「背景画像を追加」をクリックすると、次のオプションが表示されます。
    • メディアライブラリを開く: サイトの「メディア」から既存の画像を選択します。
    • アップロード: コンピューターまたはデバイスから新しい画像を追加します。
    • リセット: 背景画像を削除します。
  3. 必要に応じて、背景画像の名前をクリックして、焦点、サイズなどをカスタマイズします。

背景色の設定よりも背景画像が優先されます。

Adding a background image to a Group block.
Copied to clipboard!