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

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

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

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

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

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

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

ページ設定から編集(個別のページ背景)

ページごとに背景画像を表示する場合は、「ページ設定」から編集します。左側のサイトマップでページを選択し設定画面を開きます。
ページ設定を開く
「ページデザイン」にあるページ全体という項目でページの背景を設定できます。この背景は二階層で設定することができ、両方設定した場合、サイト上では重ねて表示されます。
ページデザイン
スマホ表示時の背景を編集する場合は、スマホアイコンのタブに切り替えてから編集しましょう。
BiNDupで作成したサイトの背景画像を変更する方法

Dressで編集(サイト共通のページ背景)

サイト全体で共通のページ背景が設定されている場合は、デザイン編集機能の「Dress」で編集します。
Dressを開く
Dressを開くと、基本設定のところでページ背景を設定できます。こちらでは三階層で背景を設定できます。スマホ表示時の背景を編集する場合は、上部のボタンでスマホアイコンに切り替えて編集します。
BiNDupで作成したサイトの背景画像を変更する方法

エリアの背景を編集する

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

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

ページによって異なるエリアの背景画像を設定する場合は、「ページ設定」から設定します。左側のサイトマップでページを選択し設定画面を開きます。
ページ設定を開く
「ページデザイン」の画面で各エリアの背景を設定できます。
BiNDupで作成したサイトの背景画像を変更する方法
スマホ表示時のページ背景を編集する場合は、スマホアイコンのタブに切り替えてから編集します。
スマホ表示の設定

Dressで編集(サイト共通のエリア背景)

サイト全体共通でエリアの背景画像が設定されている場合は、デザイン編集機能の「Dress」で編集します。
Dressを開く
ヘッダー、フッター、ビルボードエリアの背景はDressの基本設定から編集できます。スマホ表示時の背景を編集する場合は、上部のボタンでスマホアイコンに切り替えて編集します。
スマホ表示の設定
その他のエリア(コンテンツ、メイン、サイド)の背景を編集したい時は、まずラベルの表示を「エリア」に切り替えます
ラベルの表示
編集したいエリアを選択すると右側に設定項目が表示され、ここから背景を編集できます。スマホ表示時の背景を編集する場合は、上部のボタンをスマホアイコンに切り替えてください。
スマホ表示の設定

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

ブロック自体に設定された背景画像は、ブロックエディタ(ブロックの編集画面)を開いて設定します。
ブロックエディタの設定画面で背景画像を設定できます。
ブロックエディタの設定
スマホ表示時のエリア背景を編集する場合は、スマホアイコンのタブに切り替えてから編集します。
スマホ表示の設定
また、ブロック用のDressテーマを使って背景が設定されている場合もあります。
複数のブロックに同じスタイルを適用したいときや、背景に画像を配置するだけでなくサイズや位置など細かい調整をしたいとき(この場合は画像だけブロック設定側に入れて、調整だけDress側でやることもできます)、画像ではありませんが背景グラデーションを使いたいときなどに有効です。
その場合は、「Dressを編集」を選択してください。
Dressを編集
基本設定のブロック背景で編集できます。スマホ表示時の背景を編集する場合は、上部のボタンでスマホアイコンを選択してから編集してください。
スマホ表示の設定
以上、6箇所の背景の設定箇所を解説しました。
ご自身で背景画像を入れたいとき、テンプレートの画像を差し替えたいときなどに参考にしてください。
BiNDupのトップページ

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

BiNDup GuideBook

Web作成サービス「BiNDup」の最新ガイドブック。サイトを外注せず自作する方のために制作から集客までできることをまとめました。

新規登録をして資料をダウンロード
  • POINT

  • 個別に設定したい場合のページ背景・エリア背景は[ページ設定]から編集
  • サイト共通で設定したい場合のページ背景・エリア背景は[Dress]で編集
  • ブロック背景はブロックエディタで編集。Dressテーマが使われていることもある

RECOMMEND ARTICLE