BiND for WebLiFE* 9 製品サポート

ページレイアウトの設定を行うと、ページ全体の構造を変更し、エリアの数、配置方法、幅の伸び縮みを有効にするかどうかを設定できます。横幅の調整方法には、左揃え、中央揃え、可変（ウィンドウ幅に合わせて広がる）の3種類があります。

ページ設定画面からページレイアウトを変更する

細かい設定を行うには、ページ設定を利用します。ページ設定を開くには、サイトエディタでページを選択して［1］、〈設定〉アイコンをクリックします［2］。

サイトエディタでページを選択し、右上の〈ページレイアウト〉アイコンをクリックして表示することもできます。

ページ設定の〈ページレイアウト〉を選択し［1］、ページレイアウトのアイコンをクリックして［2］、希望するレイアウトを選択します［3］。


レイアウトはコンテンツエリアの配置方法によって中央型［A］、左寄せ型［B］の2分類、全6種類があります。エリア内のブロックの配置により、さらに細かなレイアウトを作成できます。

なお、BiND7形式では、横可変型の「横可変型　ビルボード+サイド+メイン」、「横可変型 ビルボード+サイド＋メイン+サイド」、「横可変型 ビルボード+メイン+サイド」も選択できます（「ビルボード+サイド＋メイン+サイド」は選択できません）。

中央型

中央にコンテンツエリアがあり、左右に背景余白が付きます。ブラウザのウィンドウ幅を変更してもコンテンツは常に中央に表示されます。

〈ビルボード＋メイン〉
コンテンツエリアが「メイン」のみのシンプルなレイアウト

〈ビルボード＋メイン＋サイド〉
コンテンツエリア左に「メイン」、右に「サイドA」のレイアウト

〈ビルボード＋サイド＋メイン〉
コンテンツエリア左に「サイドA」、右に「メイン」のレイアウト

〈ビルボード＋サイド＋メイン＋サイド〉
コンテンツエリア左に「サイドA」、中央に「メイン」、右に「サイドB」のレイアウト
（BiND7形式では選択できません。）

左寄せ型

コンテンツエリアが常に左寄せになり、余白は右側に生じます。

〈ビルボード＋サイド＋メイン〉
コンテンツエリア左に「サイドA」、右に「メイン」のレイアウト

〈ビルボード＋メイン＋サイド〉
コンテンツエリア左に「メイン」、右に「サイドA」のレイアウト

エリアの横幅を設定する

Webブラウザのウィンドウ幅に応じて、幅が変動する〈リキッド（可変幅）〉、またはウィンドウ幅に左右されない〈固定幅〉のいずれかを選び［1］、設定したいエリアにチェックを入れ、エリアの横幅を設定します［2］。
サイドがあるレイアウトで〈リキッド（可変幅）〉を選択した場合、 サイドのエリアを「比率で指定」もしくは「固定幅で指定」を選択できます。

【比率で指定】
コンテンツのサイドエリアとメインエリアの横幅は、仕切り線を左右にドラッグすることで設定できます。

【固定幅で指定】
数値でサイドエリアの横幅を指定できます。

設定が終わったら、〈適用〉をクリックします［3］。 また、レスポンシブ形式では、PCとスマートフォン両方のエリアの横幅を設定でき、スマートフォンでは、％でエリアの横幅を設定します。

〈ブロック内コンテンツの横幅〉にチェックを付けると、コンテンツの横幅をピクセル単位で指定して固定できます。