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

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

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

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

BiNDupの余白の設定方法

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

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

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

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

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

設定方法

ブロック自体に設定

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

ブロックに余白を設定

カラム毎に設定

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

カラムに余白を設定

こんな時に設定しよう

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

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

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

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

設定方法

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

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

こんな時に設定しよう

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

３：Dressから設定する

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

設定方法

Dressでカラムに余白を設定

こんな時に設定しよう

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

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

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

設定方法

プロパティ設定

「プロパティ設定」>「ページ設定」>「CSS詳細設定」タブで設定可能です。
「1：ページデザイン」と同様の設定が可能ですが、ページデザインの設定が優先されます。

CSS詳細設定でエリアに余白を設定

ブロックエディタの場合

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

CSS詳細設定でカラムに余白を設定

※ブロックエディタのメニューから、あらかじめCSS詳細タブを表示する必要があります。

こんな時に設定しよう

Dressでコントールしきれない時に調整したい場合に使用します。

余白設定の適用イメージ

実際どこに余白が設定できるのか分かり難いかと思いますので、以下の図は余白の適用箇所イメージです。

ページデザインの設定対象 同様の設定方法：Dress「適用範囲：メインエリア」→「内余白」

Dress（またはCSS詳細設定）の設定対象 ※ブロックエディタで「背景色」・「背景画像」が適用されるブロックです。

ブロックエディタの設定対象 ※ブロック内コンテンツの横幅が適用されるブロックです。

分割カラム 設定方法①：ブロックエディタのカラム毎の余白設定 設定方法②：Dress「適用範囲：メインエリアなど」→「カラム（１つ目のカラムなど）」→「内余白」 設定方法③：CSS詳細設定「カラム左（右）またはカラム１〜８」→「padding」

余白設定を使い分けよう

ご覧の通りそれぞれ一長一短がありますが、うまく使い分ければ効率よく余白の設定が可能です。
特にDressを活用すれば設定箇所を集約できるので、デザインが変わったり、後から修正したくなったときに一括で変更できて便利です。
自分のサイトのデザインに合わせて最適な方法を選んでください。

新しくなるBiNDupのブロックエディタについては動画でもご紹介しています。

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