オーバーレイを使って単調なレイアウトにメリハリを
そもそもオーバーレイとは？
上記のように画像の上にカラーを重ねて見出しなどを読みやすくするために使われる。
この例では黒の単色を重ねているがグラデーションも設定可能。０〜１００％で濃度の設定もできる。
今回はこのオーバーレイを使って下記のようなレイアウトを作ってみる。
今回作るデザインパターン
⚫︎画像を背景に設定し見出しと本文を重ねる
⚫︎画像を背景に設定し見出しと本文を重ねる（縦書きバージョン）
⚫︎境界を斜めに設定
⚫︎こんな設定も可能
カバーブロックを利用し背景画像を設定
ブロックから”カバー”を選択する
背景にする画像を選択
画像を設定するとこのようになる。オーバーレイにはデフォルトで色の設定がされていて、５０％となっている。この％のスライダーを動かす事によって画像の上に被る色の濃度がきまる。色も選択可能
ブラウザプレビューで見るとこんな感じ
オーバーレイにグラデーションを設定する
オーバーレイに背景色を設定する。デフォルトは単色だがグラデーションを選択。
”オーバーレイの不透明度”を１００％に設定する。
⚫︎２つのコントロールポイントを共に白に設定。コントロールポイントの片側（今回は左）の透明度を０％にする。
※ここでいう透明度とはオーバーレイ設定（画面右端のメニュー内）の”不透明度”設定ではなく、コントロールポイントをクリックしカラーを選択するポップアップ内にある透明度設定をさす。
⚫︎透明度を０％にしたコントロールポイントを右へスライドさせ右側のコントロールポイントと重ねる。グラデーションのぼかし部分がはっきりとした赤枠にあるような境界線になる。この白い右余白はコントロールポイントを動かし必要に応じて設定する。
カバー内にカラムを配置する
カバー内に２列のカラムを入れ左を空、右に見だしと本文をいれる。この際背景に白を設定し、画像に被せると読みやすく且つ画像との連携が生まれ良い感じになる。マージンやパディング、文字サイズ、フォントファミリー等は必要に応じて設定する。
上記の見出し、本文を入力すると下記のようになる。
アレンジして様々なデザインパターンを作る
⚫︎オーバーレイのグラデーションの角度を調節して斜めに配置
角度の調整で白い部分を斜めにしたレイアウトを作る事が出来る。ベースとなるカバー部分の画像を背景色に切り替えても面白いレイアウトが演出できる。
⚫︎背景色を設定しコントロールポイントを複数追加した例
背景に画像ではなく、カラーを設定。
コントロールポイントも２つ追加。
カバー内にカラムを２つ並べた。
