2022.01.122017.05.25

BiNDupでWebサイトの余白はどう設定する？4つの方法と特徴を解説

皆さまこんにちはオカベです。

みなさんWebページを作るとき、余白はどのように設定していますか？
ホームページ作成サービス「BiNDup」では用途によって分けられるよう、4つの設定方法が存在します。
おそらく多くの方は、編集画面のブロックエディタでブロック毎に余白設定で設定しているのではないのでしょうか。

今回は新しくなるブロックエディタでの設定を含め、最新の便利な使い方を解説。全ページに一括に設定したいとき、エリア単位、ブロック単位で設定したいときなど特徴を理解しながら使い分けてみてください。

BiNDupの余白の設定方法

BiNDupで余白設定ができる場所は以下になります。

ブロックエディタの余白設定
ページデザイン
Dress
CSS詳細設定（プロパティ設定・ブロックエディタ）

それぞれ設定箇所と特徴を解説したいと思います。

１：ブロックエディタで設定する

BiNDシリーズでおなじみの設定方法です。
ブロックエディタの「設定」タブからブロックの余白が設定できます。
他の設定とは違い、あらかじめ余白設定の選択肢が用意されているので、その設定で問題ない場合は数値入力をする手間が省けるので便利です。
分割したカラム毎に余白を設定することもできます。

設定方法

ブロック自体に設定

分割したカラムをまとめる親ブロックに余白を設定できます。

ブロックに余白を設定

カラム毎に設定

分割したカラム毎に余白を設定できます。

カラムに余白を設定

こんな時に設定しよう

ブロック毎に余白を調整したい場合に使用します。

２：ページデザインで設定する

「プロパティ設定」>「ページデザイン」>「歯車アイコン」から設定できます。
少しわかりにくい場所にあるので今まで触ったことがない方もいるかもしれません。

BiNDは主に「ヘッダー」・「ビルボード」・「コンテンツ」・「サイド」・「フッタ」といった大きな箱（親ブロック）で構成されています。
普段テキストや画像を入れるブロックは、この親ブロックの中の子ブロックで、こちらで設定した余白は、親ブロックに余白を設定されます。

設定方法

ページデザインから余白を設定

タブを切り替えることでスマホ用も設定できます。

こんな時に設定しよう

こちらで設定できる余白はエリアの設定です。
ビルボードエリアやコンテンツエリア全体に余白を設定したい場合はこちらを利用すると便利です。
Dressでも設定できますが、ページ毎に設定を調整できるのがページデザインらの設定の特徴でもあります。

３：Dressから設定する

BiNDup上部の「デザイン編集」でDressを起動した後、任意の項目を選択し、余白を設定します。
設定項目を「エリア」に指定すると「1：ページデザイン」と同等の設定が可能です。
また設定項目を「カラム」に指定して設定した場合、「２：ブロックエディタの余白設定から」のカラム毎に設定と同様の設定が可能です。
※いずれも、全ページのエリアやブロックスタイルに適用されます。
※Dressの設定よりもページデザインやブロックエディタの設定が優先されます。

設定方法

Dressでカラムに余白を設定

こんな時に設定しよう

ページ全体で余白を共通させたい場合は、Dressだと一括で設定できて便利です。

４：CSS詳細設定（プロパティ設定・ブロックエディタ）で設定する

こちらも以前からある、BiNDシリーズでおなじみの設定方法です。
Dressの一括設定で対応しきれない場合に使用すると良いですが、BiNDupにはブロック毎にデザイン（Dress）を調整できるを設定できる「ブロックDress」がありますので、あまり活躍する機会はないかもしれません。
ページ毎にできるものと、ブロック毎に設定できる２通りがあります。
※CSS詳細設定はサポート対象外です。Dressでの設定を推奨します。