レイアウト枠・ブロック枠・各パーツ設定 ＞「詳細」タブについて
それぞれのレイアウト枠やブロック枠・各パーツの設定にある「詳細」タブでは次のような設定が行えます。
- 隣どうしの枠やパーツの間隔や余白部分の調整。
- 表示開始時のアニメーションの設定。
- 表示端末の画面サイズによる表示の可否。
- ログインユーザーと一般ユーザーでの表示の可否。
- CSSによる独自の効果をつくるための、ID、classの設定
間隔設定
レイアウト枠や挿入したパーツどうしの上下左右の間隔を調整できます。
間隔の変更が必要な箇所にピクセル数を入力して設定します。
未入力の欄には基本設定での数値が薄い文字で表示され、設定として反映されています。
余白設定（レイアウト枠・ブロック枠のみ）
レイアウト枠やブロック枠ごとに枠内の上下左右の余白を調整します。
枠の最外周と各パーツとの間にどのくらい余白を空けるかをピクセル数で入力してください。
表示端末によって画面サイズや表示レイアウトなどが変わっても基本的に余白部分は維持されます。箱に詰め物を入れることで中身に偏りが出ないようにする。そんな感覚で設定するとよいでしょう。
未入力の欄には基本設定での数値が薄い文字で表示され、設定として反映されています。
端末画面サイズの違いによる表示選択
表示調整
表示させる端末を指定します。
Webページを見る端末が異なる場合、画面サイズによって見え方も異なります。そのため、どうしてもレイアウトが崩れる場合があります。表示対象を限定させることでサイズによる表示切り替えが可能となります。
以下の内容で選択できます。
- すべて
- PCと大型タブレットのみ
- PCから標準タブレットまで
- 標準タブレットのみ
- 標準タブレットとスマホのみ
- スマホのみ
Webページを作成する際には（とくにレスポンシブ・デザインの場合）、表示サイズごとの見え方を確認しながらデザインを進めるとよいでしょう。
状況による表示選択
表示調整
表示の対象とするユーザーの条件を選択します。以下の内容で選択できます。
- すべて
- ログアウト中のユーザー
- ログイン中のユーザー
- なし
会員サイトなどを構築する場合に、ログイン状況によりページの一部だけ、表示・非表示を切り替えるといった使い方ができます。
表示アニメーション（各パーツのみ）
そのパーツを表示させる際に視覚的な効果を与えることができます。
スタイル
動きの状態を選択します。以下の選択肢があります。
- なし
- フェードイン（浮き出てきます）
- 左にスライド
- 右にスライド
- 上にスライド
- 下にスライド
タイミング
そのパーツが表示位置に入ってから視覚効果を開始するまでの時間を秒数で設定します。
それぞれのパーツを時間差で設定すると、動きのあるページを作成できます。
独自CSS セレクターを挿入
文字列を設定しておくことで、その部分に対しての特定デザインなどをCSS側で設定することができます。
ID
その場所を特定するための固有のIDを設定します。半角でスペースやアンダーバーを含まない英数文字を使用してください（-は可）。
１つのページには必ずIDは１つだけであることが必要です。
例えば、もしある見出し部分に「my-title」と指定したら、そのページのほかのレイアウト枠やパーツに対して同じIDは使わないということです。もし複数のレイアウト枠やパーツに対してCSSの都合上同じ文字列を使いたい場合には、Classのほうに設定してください。
Class
IDとは異なり、Classはページ内でユニークなものを設定する必要はなく、複数の要素を対象にできます。
こちらも半角でスペースやアンダーバーを含まない英数文字を使用してください（-は可）
※複数指定が必要な場合はスペースで区切って入力することもできます。