Responsive(レスポンシブ)設定
Responsive(レスポンシブ)とはPC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。
ここではセクション（分割された部分）と、ロウ（文字の横位置やデータの長さ）と、カラム（文字の縦位置やデータの長さ）と、ウィジット（ホーム画面に置いて使える簡単な機能を持ったアプリ）のレスポンシブの設定方法を解説します。
Section（セクション）設定
セッションのレスポンシブ設定ができます。
Display Hide設定
Large View(1200px以上) / Medium View(992px - 1199px) / Small View(768px - 991px) / XSmall View(768px未満) の中から、コンテンツを表示したくない画面サイズを選択してください。
- 「Large View(1200px以上)」
- PCサイズ
- 「Medium View(992px - 1199px)」
- PC・タブレットの横サイズ
- 「Small View(768px - 991px)」
- タブレットの縦サイズ
- 「XSmall View(768px未満)」
- スマートフォンサイズ
Medium View(992px - 1199px) / Small View(768px - 991px) / XSmall View(768px未満)の共通設定
コンテナー高さ(vh） / Margin (px) / Padding (px)の設定ができます。
- 「コンテナー高さ（vh）」
- コンテナー高さを指定したい場合、1～100（単位vh）で入力してください。100vhはViewpointの高さに対し100%となります。引き継がれている高さをクリアしたい場合はautoと入力してください。
- 「Margin (px)」
- 要素間の上下の間隔を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
- 「Padding (px)」
- 要素内の上下左右の余白を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
Row（ロウ）設定
ロウのレスポンシブ設定ができます。
Display Hide設定
Large View(1200px以上) / Medium View(992px - 1199px) / Small View(768px - 991px) / XSmall View(768px未満) の中から、コンテンツを表示したくない画面サイズを選択してください。
- 「Large View(1200px以上)」
- PCサイズ
- 「Medium View(992px - 1199px)」
- PC・タブレットの横サイズ
- 「Small View(768px - 991px)」
- タブレットの縦サイズ
- 「XSmall View(768px未満)」
- スマートフォンサイズ
Medium View(992px - 1199px) の設定
Margin (px) / Padding (px) の設定ができます。
- 「Margin (px)」
- 要素間の上下の間隔を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
- 「Padding (px)」
- 要素内の上下左右の余白を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
Small View(768px - 991px) / XSmall View(768px未満)の共通設定
カラムの高さ / コンテンツの表示位置 / Margin (px) / Padding (px) の設定ができます。
- 「カラムの高さ」
- 行内のカラム高さを揃える場合はチェックを入れます。
- 「コンテンツの表示位置」
- Top / Center / Bottomから選びます。
- 「Margin (px)」
- 要素間の上下の間隔を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
- 「Padding (px)」
- 要素内の上下左右の余白を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
Colum（カラム）設定
カラムのレスポンシブ設定ができます。
Display Hide設定
Large View(1200px以上) / Medium View(992px - 1199px) / Small View(768px - 991px) / XSmall View(768px未満) の中から、コンテンツを表示したくない画面サイズを選択してください。
- 「Large View(1200px以上)」
- PCサイズ
- 「Medium View(992px - 1199px)」
- PC・タブレットの横サイズ
- 「Small View(768px - 991px)」
- タブレットの縦サイズ
- 「XSmall View(768px未満)」
- スマートフォンサイズ
Medium View(992px - 1199px)の設定
カラムの設定ができます。
- 「Margin (px)」
- 要素間の上下の間隔を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
- 「Padding (px)」
- 要素内の上下左右の余白を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
- 「Inbox Padding (px)」
- 要素内の更に内側の上下左右の余白を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
Small View(768px - 991px) / XSmall View(768px未満)の共通設定
カラム数 Padding (px) / Inbox Padding (px) の設定ができます。
- 「カラム数」
- 行内で最大12カラムになるよう調整してください。※ただしMedium View(992px - 1199px)でカラム数は選べません。
- 「Margin (px)」
- 要素間の上下の間隔を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
- 「Padding (px)」
- 要素内の上下左右の余白を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
- 「Inbox Padding (px)」
- 要素内の更に内側の上下左右の余白を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
ウィジット設定
各種ウィジットのレスポンシブ設定ができます。
Display Hide設定
Large View(1200px以上) / Medium View(992px - 1199px) / Small View(768px - 991px) / XSmall View(768px未満) の中から、コンテンツを表示したくない画面サイズを選択してください。
- 「Large View(1200px以上)」
- PCサイズ
- 「Medium View(992px - 1199px)」
- PC・タブレットの横サイズ
- 「Small View(768px - 991px)」
- タブレットの縦サイズ
- 「XSmall View(768px未満)」
- スマートフォンサイズ
Medium View(992px - 1199px) / Small View(768px - 991px) / XSmall View(768px未満)の共通設定
スライド画像 / リンクボタン / 音源 / 横線 / 折りたたみパネル / タブパネル / グーグルマップ / リスト / アーカイブ / カスタムメニュー / カレンダー / カテゴリー / メタ / 最新コメント / 最新記事 / RSS / 検索 / タグクラウド では Display Hide / Margin (px) /Padding (px) の設定が共通で出来ます。
- 「Margin (px)」
- 要素間の上下左右の間隔を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
- 「Padding (px)」
- 要素内の上下左右の余白を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
画像 ではDisplay Hide / Margin (px) / Padding (px) /表示位置 の設定が出来ます。
- 「Margin (px)」
- 要素間の上下の間隔を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
- 「Padding (px)」
- 要素内の上下左右の余白を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
- 「表示位置」
- Left(左寄せ) / Center(中央寄せ) / Right(右寄せ) から選んでください。
Iconでは Display Hide / Icon Size (px) /表示位置/ Margin (px) / Padding (px) の設定が出来ます。
- 「Icon Size (px)」
- アイコンサイズを設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
- 「表示位置」
- Left(左寄せ) / Center(中央寄せ) / Right(右寄せ) から選んでください。
- 「Margin (px)」
- 要素間の上下左右の間隔を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
- 「Padding (px)」
- 要素内の上下左右の余白を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
ソーシャルボタン / ソーシャルシェアボタン では Display Hide / 表示位置 / Margin (px) / Padding (px) の設定が共通で出来ます。
- 「表示位置」
- Left(左寄せ) / Center(中央寄せ) / Right(右寄せ) から選んでください。
- 「Margin (px)」
- 要素間の上下左右の間隔を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
- 「Padding (px)」
- 要素内の上下左右の余白を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
動画 では Display Hide / 表示位置 / Margin (px) の設定が出来ます。
- 「表示位置」
- Left(左寄せ) / Center(中央寄せ) / Right(右寄せ) から選んでください。
- 「Margin (px)」
- 要素間の上下左右の間隔を設定できます。単位はピクセルとなります。例）18pxにしたい場合、18と入力します。
設定画面終了
- 「保存」ボタン
- 画面を閉じる。設定内容をビルダー上に反映します。
- 「閉じる」ボタン
- 画面を閉じる。設定内容をビルダー上に反映しません。
