BiNDupで作成したサイトの背景画像を変更する方法

ホームページ作成サービス「BiNDup」で作成されたサイトの背景画像を変更する方法を紹介します。テンプレートを編集する際などに参考にしてください。

背景画像を設定できる範囲

BiNDupのサイトの背景画像は、主に以下のパターンがあります。

• ページ背景：ページ全体の背景
• エリア背景：ビルボードやヘッダー、フッターなど、エリアごとに設定する背景
• ブロック背景：ブロック単位で設定する背景

ページの背景画像を編集する

ページ全体の背景画像の設定方法は2パターンあります。

ページ設定から編集（個別のページ背景）

ページごとに背景画像を表示する場合は、「ページ設定」から編集します。左側のサイトマップでページを選択し設定画面を開きます。

「ページデザイン」にあるページ全体という項目でページの背景を設定できます。この背景は二階層で設定することができ、両方設定した場合、サイト上では重ねて表示されます。

スマホ表示時の背景を編集する場合は、スマホアイコンのタブに切り替えてから編集しましょう。

Dressで編集（サイト共通のページ背景）

サイト全体で共通のページ背景が設定されている場合は、デザイン編集機能の「Dress」で編集します。

Dressを開くと、基本設定のところでページ背景を設定できます。こちらでは三階層で背景を設定できます。スマホ表示時の背景を編集する場合は、上部のボタンでスマホアイコンに切り替えて編集します。

エリアの背景を編集する

BiNDupで作成したページはヘッダー、ビルボード、コンテンツ（メインとサイド）、フッターというエリアで構成されており、それぞれのエリアに背景画像を設定できます。
ページ背景と同様、エリアの背景画像の設定方法は2パターンあります。

ページ設定から編集（個別のエリア背景）

ページによって異なるエリアの背景画像を設定する場合は、「ページ設定」から設定します。左側のサイトマップでページを選択し設定画面を開きます。

「ページデザイン」の画面で各エリアの背景を設定できます。

スマホ表示時のページ背景を編集する場合は、スマホアイコンのタブに切り替えてから編集します。

Dressで編集（サイト共通のエリア背景）

サイト全体共通でエリアの背景画像が設定されている場合は、デザイン編集機能の「Dress」で編集します。

ヘッダー、フッター、ビルボードエリアの背景はDressの基本設定から編集できます。スマホ表示時の背景を編集する場合は、上部のボタンでスマホアイコンに切り替えて編集します。

その他のエリア（コンテンツ、メイン、サイド）の背景を編集したい時は、まずラベルの表示を「エリア」に切り替えます。

編集したいエリアを選択すると右側に設定項目が表示され、ここから背景を編集できます。スマホ表示時の背景を編集する場合は、上部のボタンをスマホアイコンに切り替えてください。

ブロックの背景を編集する

ブロック自体に設定された背景画像は、ブロックエディタ（ブロックの編集画面）を開いて設定します。
ブロックエディタの設定画面で背景画像を設定できます。

スマホ表示時のエリア背景を編集する場合は、スマホアイコンのタブに切り替えてから編集します。

また、ブロック用のDressテーマを使って背景が設定されている場合もあります。
複数のブロックに同じスタイルを適用したいときや、背景に画像を配置するだけでなくサイズや位置など細かい調整をしたいとき（この場合は画像だけブロック設定側に入れて、調整だけDress側でやることもできます）、画像ではありませんが背景グラデーションを使いたいときなどに有効です。
その場合は、「Dressを編集」を選択してください。

基本設定のブロック背景で編集できます。スマホ表示時の背景を編集する場合は、上部のボタンでスマホアイコンを選択してから編集してください。

以上、6箇所の背景の設定箇所を解説しました。
ご自身で背景画像を入れたいとき、テンプレートの画像を差し替えたいときなどに参考にしてください。

BiNDupを無料で使ってみるBiNDの制作事例を見る