ホームページ制作サービスBiNDupで、細かなデザインを編集するには「Dress」の存在が欠かせません。こだわりを実現するには重宝しますが、CSSの設定となるので少々難しい面も。
そこで今回は、Dress設定の虎の巻としても活用いただけるように設定箇所の開き方から解説します。第1弾はユーザーの皆さんからリクエストの多い背景の設定の方法から。
▼BiNDとDressの関係については以下で詳しく説明しているので、参考にしてください。
https://bindup.jp/camp/bind/9692
背景の設定箇所は大きく3つ
BiNDで背景を設定するにも色々な方法があり、大きくわけると3つ、細かく数えると7つもありますが、いずれも結果は同じ。
ですが設定方法によってはその後の更新作業に大きな影響を及ぼします。
今回は以下の設定方法と特徴についてまとめたいと思います。
- サイトDress
- プロパティ設定（ページデザイン／ページDress／CSS詳細設定）
- ブロックエディタ（設定／ブロックDress／CSS詳細設定）
DressだけでもサイトDress・ページDress・ブロックDressの３つがあり、それぞれ設定できる範囲が異なります
影響範囲の違いと優先度
なぜ背景1つ設定するのにこんなに設定欄があるのかというと、設定方法によって影響範囲が異なるためです。
以下に設定できる範囲と優先度を表にまとめましたので、ご覧ください。
| 優先度 | ページ全体 | エリア | ブロック | ||
|---|---|---|---|---|---|
| サイト全体に適用 サイトDress | 低 | ○ | ○ | △※1 | |
| ページ毎に設定を変更 プロパティ設定 |
CSS詳細設定 | ↓※2 | ○ | ||
| ページDress | ↓ | ○ | ○ | △※1 | |
| ページデザイン | ↓ | ○ | ○ | ||
| 特定のブロックだけ ブロックエディタ |
ブロックDress | ↓ | ○※1 | ||
| 設定 | ↓ | ○ | |||
| CSS詳細設定 | 高 | ○ | |||
※1 ブロックレイアウトを限定することで設定可能
※2 サイトDressよりも優先度は低
後で詳しく説明していきますが、例えばサイトDressはサイト全体（全ページ対象）のページ全体やエリアといった広い範囲への設定は得意ですが、逆にあるページのこのブロックだけといった細かい場所への設定は苦手です。その場合はブロックエディタで設定する方がいいと言えます。
また例えば、同じエリアへの背景設定が複数あった場合、サイトDressでの設定よりもプロパティ設定のページデザインで設定した方が優先されるなど、設定した場所によって優先度が異なるという特徴があります。
エリア別に背景の設定方法を詳しく解説
サイト全体に設定するなら「サイトDress」
編集画面上部の「デザイン編集」から設定可能。
基本的にはサイト全体に影響があるので、ヘッダーやフッターなど共通のデザインはこちらで設定するのがお勧めです。
ページごとに設定を変更するなら「プロパティ設定」
ページ毎の設定はこちら。
ページによって背景を変えたい場合にお勧めです。基本的にはページデザインで設定することが多いでしょう。
各ページの歯車アイコンから設定画面を開くことができます。
設定したページ内の全体とエリア毎の背景を設定可能
ページDress（左）とCSS詳細設定（右）
特定のブロックだけに設定するなら「ブロックエディタ」
ブロック毎の設定はこちら。
基本的には設定画面から設定することがほとんどかと思いますが、共通パーツ化したい場合などはブロックDressやCSS詳細設定から設定すると変更の際に一括で修正でき、便利かと思います。
設定したページ内の全体とエリア毎の背景を設定可能
ブロックDress（左）とCSS詳細設定（右）
背景設定のポイントと使い分け
個人的には以下をポイントとして使い分けています。
設定箇所が色々あって混乱した場合は、上記の表と以下ポイントを参考にしてください。
- ヘッダーやフッターなどサイトで共通のデザイン→サイトDress
- ビルボードなどページ毎でデザインを変える場合→ページプロパティ「ページデザイン」
- 各ブロックの背景→ブロックエディタ「設定」
基本的な考え方は、共通性の高いデザインは極力サイトDressに集約すること。そしてページプロパティやブロックエディタでそれぞれのページ用に調整をしていく形です。
後々修正になった時に変更が簡単ですので、今後の修正頻度やデザインによってうまく使い分けましょう。
