Lightning G3 Evergreenキットで簡単にずらしレイアウトを作成する方法

2022年11月24日

人気の無料テーマLightningの有料版であるLightning G3 Evergreenキットでずらしレイアウトを作成する方法を解説します。

ずらしレイアウトとは、背景とその上のコンテンツをずらしたデザインです。

ちなみにこちらの記事では、無料版Lightningでずらしレイアウトを作成する方法を解説しています。

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

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

 https://web-children.com/2021/11/15/shift-layout-between-bac...

無料版LightningではブロックエディターとカスタムCSSを組み合わせる必要がありますが、Lightning G3 Evergreenキットを使えば、カスタムCSSを記述しなくても簡単にずらしレイアウトを作成することができます。

Lightning G3 Evergreenキットとは

無料テーマLightningの有料プラグインLightning G3 Pro Unitと組み合わせて使う、デザイン拡張プラグインキットです。

誰でも簡単に高品質な企業サイトを作成できるように次の特徴があります。

• ヘッダーのレイアウトやキーカラーなどのおすすめ設定を提供する”デザインプリセット機能”
  （縦書きナビゲーションを使った和をイメージしたサイト用デザインも選択できます。）
• あえて背景をずらしたレイアウトが簡単に作成できる（本記事の目的です）
• 企業サイト用コンテンツデータの提供

ちなみにEvergreenという命名には、『いつまでも色褪せることなくユーザーに必要とされるコンテンツを作って欲しい』という思いが込められています。

Lightning G3 Evergreenキットの使い方（購入とインストール）

次の手順で使用できるようになります。

1. 無料テーマLightningをインストール・有効化
2. Vektor Passportを購入、プラグインLightning Pro Unitをインストール・有効化
3. Lightning G3 Evergreenキットを購入、プラグイン G3 Evergreenをインストール・有効化

無料テーマLightningをインストール・有効化

次の記事を参照ください。

【テーマLightning G3でサイト制作】テーマと必須プラグインのインストール

2021年5月にG3に大幅リニューアルしたワードプレスの無料人気テーマLightningにおいて、テーマと必須プ ...

 https://web-children.com/2021/10/25/lightning-theme-and-plug...

Vektor Passportを購入、プラグインLightning Pro Unitをインストール・有効化

サブスクリプションサービスVektor Passportはサブスクリプションとなっており、ライセンス期間により次のようになっています。

サブスクリプションですが、ライセンス期間終了後も継続して使用が可能です。アップデートとサポートを受けられなくなるだけなので、再度サポートを受けたいというタイミングで再契約すればよいでしょう。

Vektor Passportを購入後、同梱されているプラグインLightning G3 Pro Unitをダウンロードしてインストール・有効化すればOKです。VK Blocks Proもダッシュボードの表示にしたがってインストール・有効化できるようになります。

ライセンスキーは、設定＞Lightning Pro Unit 設定　および　設定＞VK Block Pro を開けて入力してください。

Evergreenキットの購入

Everlgreenキットの購入ページはこちらです。

※2022年11月24日現在、キャンペーンにより無料でEvergreenキットをダウンロードできます。
（もちろんVektor Passportの購入は必要です）

プラグインLightning G3 Evergreenを既存サイトにインストール・有効化すればEvergreenの機能（デザインプリセットおよびずらしレイアウト用パターンなど）を使えるようになります。

企業サイト用コンテンツデータevergreen.wpressは、プラグインAll in One WP Migrationを使ってインストールしますので、丸ごとサイトの内容が入れ替わることに注意してください。

Lightning G3 Evergreenキットでのずらしレイアウト作成方法

基本的な手順

1. レイアウトを１カラムに設定する
2. Gutenberg（ブロックエディター）開ける
3. ブロックのパターンを開け、ドロップダウンメニューで”Evergreen”を選択する
4. 好きなレイアウトを選択する
5. 必要に応じて背景色や文字・画像を編集する

①レイアウトを１カラムに設定する

ダッシュボードメニューの外観＞カスタマイズ＞Lightningレイアウト設定＞カラム設定　で１カラムとします。

今回は固定ページを使って作成したいと思うので、固定ページを１カラム化しておきましょう。

②Gutenberg（ブロックエディター）を開ける

ダッシュボードメニュー　固定ページ＞新規追加　でブロックエディターを開けます。

③ブロックパターンを開け、ドロップダウンメニューで”Evergreen”を選択

次の手順で進めます。

①画面左上の+マークをクリック
②”パターン”タブを選択
③ドロップダウンで”Evergreen”を選択

④好きなレイアウトを選択する

ここで表示されているパターンは、ほとんどがずらしレイアウトのものになっています。

試しに一番上のパターンを選択して記事内に挿入しましょう。

コンテンツを編集

これで記事内の一番上には次のようなずらしレイアウトのコンテンツが挿入されました。

グレーの背景色が右にずれ、画像も左いっぱいに広がっているのがわかります。

この中味を変更すれば、冒頭に紹介した次のコンテンツに変更が可能です。

しかし、そもそもこのずらしレイアウトはどのようなブロック構成になっているのかを理解しないと、思ったように中味を変更するのが難しいですよね。

そこで、ブロック構成がどのようになっているのかを見てみましょう。

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

まずリスト表示してブロックの構成を確認してみます。

これを実際のコンテンツにあてはめてみると次の通りです。

以上をまとめると次のようにいえるでしょう。

• コンテンツ全体はグループブロックで囲まれている
• 背景色はカバーブロック
• Gutenberg上はカバーブロックの下に存在する各プロックが、カバーブロックの上に重なっている
• 画像とテキスト・ボタンは、カラムブロックの各カラムの中に入っている

したがって、コンテンツの中味を変更するには次のようにすればよいことがわかります。

• 背景色の変更にはカバーブロックの背景色を変更する
  （実際にはカバーブロックのカラーオーバーレイの色を変更）
• 画像を変更するにはカラムブロック内の画像を入れ替える
• テキストおよびボタンの変更もカラムブロックの中味を書き換える

実際にこのようにして背景色と画像、テキストとボタンの色を変更すると次のようなものが作れます。

レイアウトを調整するクラス一覧と使用例

コンテンツの入れ替え方法はわかりましたが、このずらしレイアウトがどのようにして実現しているのかもう少し詳しく見てみましょう。

カバーブロックの上に各ブロック群（コンテンツ）を重ねるためには次のような手法を取っています。

.vk-bg-offset {
  position: relative;
}
.vk-bg-offset > .wp-block-group__inner-container > div {
  position: relative;
  z-index: 1;
}
.vk-bg-offset-bg {
  position: absolute !important;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: calc(100vw - var(--vk-width-bg-offset));
}
.vk-bg-offset-bg.vk-bg-offset-bg--left {
  margin-left: var(--vk-width-bg-offset);
}
.vk-bg-offset-bg--25 {
  --vk-width-bg-offset: 25vw;
}

これを簡単に解説すると次の通りです。

1. 外側のグループブロックにはvk-bg-offsetを付与して基準位置とする（必須）
2. カバーブロックにはvk-bg-offset-bgを付与してグループブロック全体の背景色とする（必須）
   （これでカバーブロック以外のコンテンツがカバーの上に重なる）
3. さらにカバーブロックにvk-bg-offset–leftを付与して左側に余白を空ける準備をする
4. 余白の量をvk-bg-offset-bg–25で決める

ここで①②は必須（不変）ですが、③④には余白の位置や余白の量に応じて別のクラスも準備されています。

準備されているクラスを整理すると以下の通りです。

例えば、今回作成したコンテンツの背景色を左に配置して（右側に余白をつけて）、余白の量を40vwにしたければ、カバーブロックにclass=" vk-bg-offset-bg vk-bg-offset-bg–right vk-bg-offset-bg–40 “を付与します。

すると次のようになります（見やすくするために背景色と文字色も変更しました）。

モバイルでずらしレイアウトを解除するクラス

ここまで紹介してきたずらしレイアウトは、PCだけでなくスマホやタブレットでもキープされています。

しかし、今回使用しているコンテンツのようにカラムブロックを使った場合は、モバイル（600px未満）では、画像とテキストが縦並びとなってしまうので、ずらしレイアウトととの相性が必ずしもよくありません。

そこで、モバイルでずらしレイアウトを解除する次のようなクラスが準備されています。

自分の作成したコンテンツに応じて使うとよいでしょう。

まとめ

Lightning G3 Evergreenキットを使うと、さまざまなずらしレイアウトがパターンとして準備されており、コンテンツを置き替えるだけで簡単にずらしレイアウトを作成することができます。

また、ずらしの量（余白の量）やずらしの位置、そしてモバイルでずらしを解除するためのクラスが準備されているので、選んだパターンにクラスを追加・変更して、自分の好きなレイアウトに作り替えることも可能です。

このように、Lightning G3 Evergreenキットには魅力がいっぱいですので、ぜひ一度ご検討してみてはいかがでしょうか？

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

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

詳細はこちら

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