Outerブロックは、ブロックの外側に背景画像や背景色、 枠線を設置することができるブロックです。
全幅のレイアウトにしたり、区切りの設定（傾斜 / カーブ / 波状 / 三角）などもできるので、ユーザーの目を引く見せ方ができます。
Outerブロックの使用例
背景設定
背景には色または画像を指定できます。色を指定すると、画像よりも優先されます。また、透過設定では、不透明度を0.01単位で設定可能です。
※背景画像を表示したい場合は、不透明度を0に設定してください。
背景画像は、PC・タブレット・モバイル毎にそれぞれ設定できます。
背景画像の位置は リピート / カバー / カバー固定 から選べます。
※カバー固定は、iPhoneでは固定されません。
※パララックスは非保証です。
レイアウト設定
Outerブロックを全幅にしたい場合は、ブロックツールバーから設定します。
なし
全幅
余白
アウターエリア内の左右の余白は、以下より選べます。
- コンテンツエリアに合わせる
- アウターエリア内の余白を追加する
- アウターエリア内の余白を無くす
アウターエリア内の上下の余白は、以下より選べます。
- 標準の余白を使用
- 標準の余白を使用しない
「標準の余白を使用しない」を選択した場合は、スペーサーブロックなどで任意に設定してください。
なお、左右の余白については、「コンテナ内側のスペース設定」を利用すれば、PC・タブレット・モバイル毎に調整できます。単位は px / em / rem / view から選べます。
区切りの設定
区切りのタイプは 傾斜 / カーブ / 波状 / 三角 から選べます。
上部と下部に区切りレベルを設定できます。
傾斜
カーブ
波状
三角
区切りのレベルをデバイス毎に指定
「端末毎に設定」のオプションを有効にすれば、デバイス毎に区切りのレベルを指定できます。PCだとちょうどよいカーブに設定しても、モバイルで見るとカーブがきつくなってしまうなど場合に、適宜調整してください。
枠線の設定
枠線の設定では、枠線の種類を選び、線の幅や色、枠線のRの大きさを設定できます。
※区切りレベルを適用すると表示されなくなります。
直線
点線
Dashed
二重線
Groove
Ridge
Inset
Outset
- 背景に色を指定
- 枠線の種類：点線
- 枠線の幅：2
- 枠線のRの大きさ：12
レイアウト全幅
区切りの設定をカーブにした場合
レイアウト全幅
区切りの設定を波状にした場合
レイアウト全幅
区切りの設定を三角にした場合（下部区切りレベル0）
上部や下部に何かコンテンツを挿入して矢印のように見せることができます。