ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

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

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

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

本記事での検証は、無料テーマLightning G3を使って1カラムレイアウトにて検証しています。
他テーマでも適用できますが、全幅対応の1カラムレイアウトであることが必須です。

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

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

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

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

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

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

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

黒背景色のコンテンツ設定内容

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

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

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

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

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

全幅背景色のコンテンツ例設定

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

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

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

作成するずらしレイアウト

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

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

ずらしレイアウトのリスト表示

コンテナーとなるグループブロックの中にカバーブロックおよびコンテンツの器(うつわ)となるグループブロックが入っています。

ずらしレイアウトの作成

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

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

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

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

カスタムCSS適用前
※わかりやすいように文字色を黒にしています

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

カスタム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クラス”にクラス名を入力すればOKです。

カスタム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;
  }
}

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

作成するずらしレイアウト

ずらしレイアウト応用編

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

ずらしレイアウト応用編

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

まとめ

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

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

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

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる