WordPressブロックエディターで背景のずらしレイアウトを作成する方法

2021年11月20日

ホームページのレイアウトで”背景色のずらしレイアウト”というのがあります。

背景とその上のコンテンツ（文字や画像）を少し左右や上下にずらしたもので、通常のレイアウトと比較して並べるとこんな感じです。

• 通常レイアウト・・・黒の背景色（全幅）の上にコンテンツが完全に重なっている
• ずらしレイアウト・・・黒の背景色が右、コンテンツが左にずれている

本記事では、このようなずらしレイアウトをブロックエディターとカスタムCSSとで作成していきます。

通常レイアウトの作成方法

簡単に通常レイアウトの作成方法を紹介しておきます。カバーブロックまたはグループブロックのどちらでも実現可能です。

ずらしレイアウトではカバーブロックとグループブロックの両方を使用するため、両方のブロックの使い方を確認しておきましょう。。

カバーブロックを使う場合

カバーブロックの使い方はこちらの記事を参照ください。

上記記事内でも解説していますが、カバーブロックの場合、背景画像は挿入せずにカラーオーバーレイで背景色を設定します。

またカバーの配置を全幅とすることで、背景色がサイトの横幅いっぱいに広がります。

あとは、コンテンツをカバーブロックの記述さればOKです。

上記例の場合リスト表示を見てわかるように、カバーブロックの中にスペーサー・カラム・スペーサーと３つのブロックを配置しています。カラムは２カラムとして左カラムにカバーブロックで背景画像、右カラムに段落ブロックでテキストを記述しています。

グループブロックを使う場合

グループブロックの使い方はこちらの記事を参照ください。

上記記事内でも解説していますが、グループブロックの背景色を設定し配置を全幅とすることで、背景色がサイトの横幅いっぱいに広がったレイアウトにできます。

あとはグループブロック内にコンテンツを配置すればOKです。

ずらしレイアウトの作成方法

もう一度作成するずらしレイアウトを確認しておきましょう。

ずらしレイアウトのブロック構成

このずらしレイアウトのブロック構成をリスト表示して確認します。

ずらしレイアウトの作成

それぞれ次の順番で作成します。

1. カバーブロックをカラーオーバーレイ黒、全幅配置とする
2. コンテンツとなるグループブロックを作成し、その中にコンテンツを入れる
   （今回の例ではコンテンツとしてスペーサー・カラム・スペーサーを配置してコンテンツを入力）
3. ①②をグループ化する
4. ①②③にクラスを付与してカスタムCSSを適用する

各ブロックの設定（カスタムCSS適用前）

①～③までの段階でのレイアウトは次の外観となります。

ブロック要素を記述すると次の通りです。

カスタムCSSを適用してレイアウトする

これをカスタムCSSを使って次のようにレイアウトします。

具体的には次の通りです。

• グループブロック・・・class="bg-offset"を付与して、CSSでposition:relativeをかけて全体の基準とする
• カバーブロック・・・class="bg-right"を付与して、CSSでposition:aboluteをかけてグループブロックを基準に広げ、左側をmargin-leftで削る。

/* コンテナーとなるグループブロック */
.bg-offset {
  position: relative;
}
/* グループブロック直下のコンテナー内のdivを全てローカルな重ね合わせコンテンツとする */
.bg-offset>.wp-block-group__inner-container>div {
  position: relative;
  z-index: 1;
}
/* カバーブロックをグループ全体に広げてから左にマージンをつける */
.bg-right {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-left: 35vw;
}
/* スマホでは通常レイアウトとする　*/
@media screen and (max-width:599px){
  .bg-right {
    margin-left: 0 !important;
  }
}

※スマホ表示（デバイス幅600px未満）では、ずらしレイアウトはキャンセルして通常レイアウトと同じとしました。

カスタムCSSについては以下の記事を参照ください。

コンテンツを左いっぱいに広げる

以上でずらしレイアウト作成のエッセンスは終了なのですが、今回の例の場合、コンテンツの画像を左端まで広げた方がより印象的なので若干の調整をします。

• コンテンツにclass="left-full"を追加して、コンテンツを左端いっぱいまで広げる
  （手順②で作成したグループブロックにclass="left-full"をつける）

class="left-full"へのCSSを追加した最終版は以下の通りです。

/* コンテナーとなるグループブロック */
.bg-offset {
  position: relative;
}
/* グループブロック直下のコンテナー内のdivを全てローカルな重ね合わせコンテンツとする */
.bg-offset>.wp-block-group__inner-container>div {
  position: relative;
  z-index: 1;
}
/* カバーブロックをグループ全体に広げてから左にマージンをつける */
.bg-right {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin-left: 35vw;
}
/* コンテンツを左端いっぱいまで広げる */
.left-full {
  margin-left: calc(50% - 50vw);
}
/* グループブロック内コンテナの余白と横幅制限を外す
.left-full>.wp-block-group__inner-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}
/* スマホでは通常レイアウトとする　*/
@media screen and (max-width:599px){
  .bg-right {
    margin-left: 0 !important;
  }
.left-full {
    margin-left: auto;
  }
}

以上でコンテンツが左端まで広がりました。

ずらしレイアウト応用編

慣れてくると次のようなレイアウトも簡単に作成できます。

カバーブロックを２つ準備して、それぞれpostition:absolute後、marginを変更してやれば出来上がりです。

まとめ

ずらしレイアウトの作成方法は以下の通りです。

1. カバーブロックで背景色を設定する
2. コンテンツとなるグループブロックを作成し、その中にコンテンツを入れる
3. ①②をグループ化する
4. ①②③にクラスを付与してカスタムCSSを適用する
   ・③のグループブロックはposition:relativeで基準位置とする
   ・①のカバーブロックはposition:absoluteで③の基準位置全体に広げ、marginで位置ずらしをする
   ・②のコンテンツは必要に応じてmarginを見直す。

コンテンツの作風にもよりますが、スマホではずらしを解除しておくのが無難です。