これは体験版です。設定を自由にさわって、どんな斜めの区切りが作れるか試せます。作ったものをサイトに貼るコードの取得は、製品版でできます。

斜め背景工房(体験版) v1.0.1

全幅グループの背景を、色の境目が斜めに横切る2色にします。見出し・文章・画像はいつものブロックのまま、その上に置けます。出力は、グループブロックの「高度な設定 → 追加CSS」に貼るCSSです。

プレビュー(上のグループ → 斜めのグループ → 下のグループ)

UPPER GROUP

上のグループ

背景色を「上側の色」と同じにすると、つなぎ目が消えます。

SLANT GROUP

斜め背景のグループ

この中に、見出し・文章・画像・カードを置きます。
背景だけが斜めになり、中身はいつものブロックのままです。

LOWER GROUP

下のグループ

背景色を「下側の色」と同じにすると、つなぎ目が消えます。

出力のCSSをそのまま当てて、画面いっぱいの幅で境目の角度を確かめます。

出力(製品版でコピーできます)

製品版では、ここで作った見た目のまま、グループブロックの「追加CSS」に貼るCSSをコピーできます。

1. 上のグループ

上と色をつなぐ時だけ。

体験版のため、コードは表示されません。製品版で実際のコードを確認・コピーできます。
体験版のため、コピーはできません

2. 斜めのグループ(本体)

斜めにしたい全幅グループの「追加CSS」へ。

体験版のため、コードは表示されません。製品版で実際のコードを確認・コピーできます。
体験版のため、コピーはできません

3. 下のグループ

下と色をつなぐ時だけ。

体験版のため、コードは表示されません。製品版で実際のコードを確認・コピーできます。
体験版のため、コピーはできません

貼る場所(ここだけ間違えやすい)

ブロックの設定(右側)→ 高度な設定
追加CSSクラス 触らない
has-st-margin-bottom is-style-st-wide-background …
追加CSS ここへ貼る
background: linear-gradient(171deg, #f1f3f5 0 54%, #ffffff 54% 100%);
margin-top: 0;
margin-bottom: 0;
padding-top: 80px;
padding-bottom: 64px;
1 斜めにしたいグループブロックを選び、「ワイドにする」をON(全幅)にします。
2 右側の「高度な設定」を開き、「追加CSS」の欄に「2. 斜めのグループ」のCSSを貼ります。「追加CSSクラス」の欄には貼りません(クラス名の欄にCSSを入れると、エラーになって背景が出ません)。
3 プレビューで背景が斜めになったら、上のグループ・下のグループにも同じ手順で「1」「3」のCSSを貼ると、色がつながります。
隙間が出たら グループとグループの間に空の段落やスペーサーが無いか確かめます。出力には上下の外側余白を0にする指定が入っています。