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

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

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

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

詳細はこちら

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

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

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

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

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

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

通常レイアウトとずらしレイアウトとの比較

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

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

Lightning G3 Evergreen キット
この記事でわかること
  • Lightning G3 Evergreenキットの概要と導入方法
  • Lightning G3 Evergreenキットを使ったずらしレイアウトの作成方法
  • 出来上がったずらしレイアウトのブロック構成を知って使いこなす
  • ずらしレイアウトの編集方法
    (準備された各クラスを使って、ずらし位置やずらし量の調整、モバイルでの解除をする)

Lightning G3 Evergreenキットとは

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

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

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

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

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

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

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

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

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

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

Lightningの有料版であるLightning G3 Pro Packはサブスクリプションとなっており、ライセンス期間により次のようになっています。

無料版テーマLightning無料
Lightning G3 Pro Pack 1年ライセンス9,900円
(税込)
Lightning G3 Pro Pack 3年ライセンス26,400円
(税込)
Lightning G3 Pro Pack 5年ライセンス39,600円
(税込)
※価格は2021年11月20日現在のものです
Lightning G3 Pro Packに含むもの
  • テーマ機能拡張プラグインLightning G3 Pro Unit
  • ブロック追加プラグインVK Blocks Pro
  • テーマLightning Pro(旧製品)
  • ライセンスキー

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

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

ライセンスキーは、設定>Lightning Pro Unit 設定 を開けて入力してください。

Evergreenキットの購入

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

Lightning G3 Evergreenキットに含むもの
  • プラグインLightning G3 Evergreen
  • コンテンツデータevergreen.wpress

※2021年11月20日現在、キャンペーンにより無料でEvergreenキットをダウンロードできます。
(もちろんLightning G3 Pro Packは必要です)

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

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

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

基本的な手順

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

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

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

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

固定ページを1カラム化

②Gutenberg(ブロックエディター)を開ける

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

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

次の手順で進めます。

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

パターンでEvergreenを選択

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

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

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

好きなレイアウトを挿入

コンテンツを編集

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

挿入されたコンテンツ(ずらしレイアウト)

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

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

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

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

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

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

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

リスト表示に見るブロック構成

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

コンテンツの各ブロックを図示

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

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

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

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

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

ずらしレイアウト画像とコンテンツ入れ替え後

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

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

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

  • 一番外のグループブロックにはclass="vk-bg-offset"を付与
  • カバーブロックにはclass="vk-bg-offset-bg vk-bg-offset-bg–left vk-bg-offset-bg–25 “の3つのクラスを付与

各ブロックにクラスを付与するには、画面の右パネル内の高度な設定を開けて”追加CSSクラス”にクラス名を入力すればOKです。複数のクラスを付与する場合は、クラス名を半角で空けて入力します。

実際に高度な設定を開けてみれば、上記のクラスがすでに入力されているのが確認できます。

各クラスに関連する要素には次のCSSを適用しています。

.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;
}

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

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

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

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

クラス名CSSの効果
vk-bg-offset外側のカバーブロックに付与して基準の位置とする
(主なCSS・・・position: relative;)
vk-bg-offset-bgカバーブロック(背景)に付与して基準位置いっぱいに広げる
(主なCSS・・・position:absolute;)
必須クラス名
クラス名CSSの効果
vk-bg-offset-bg–right カバーブロック(背景)に付与して余白を右側に空ける準備をする
(主なCSS・・・margin-right: var(–vk-width-bg-offset);)
vk-bg-offset-bg–left カバーブロック(背景)に付与して余白を左側に空ける準備をする
(主なCSS・・・margin-left: var(–vk-width-bg-offset);)
左右のどちらに余白を空けるか決めるクラス名
クラス名CSSの効果
vk-bg-offset-bg–45カバーブロック(背景)に付与して余白の量を45vwとする
(主なCSS・・・–vk-width-bg-offset: 45vw;)
vk-bg-offset-bg–40 カバーブロック(背景)に付与して 余白の量を40vwとする
(主なCSS・・・–vk-width-bg-offset: 40vw;)
vk-bg-offset-bg–35 カバーブロック(背景)に付与して 余白の量を35vwとする
(主なCSS・・・–vk-width-bg-offset: 35vw;)
vk-bg-offset-bg–30 カバーブロック(背景)に付与して 余白の量を30vwとする
(主なCSS・・・–vk-width-bg-offset: 30vw;)
vk-bg-offset-bg–25 カバーブロック(背景)に付与して 余白の量を25vwとする
(主なCSS・・・–vk-width-bg-offset: 25vw;)
vk-bg-offset-bg–20 カバーブロック(背景)に付与して 余白の量を20vwとする
(主なCSS・・・–vk-width-bg-offset: 20vw;)
vk-bg-offset-bg–15 カバーブロック(背景)に付与して 余白の量を15vwとする
(主なCSS・・・–vk-width-bg-offset: 15vw;)
vk-bg-offset-bg–10 カバーブロック(背景)に付与して 余白の量を10vwとする
(主なCSS・・・–vk-width-bg-offset: 10vw;)
vk-bg-offset-bg–5 カバーブロック(背景)に付与して 余白の量を5vwとする
(主なCSS・・・–vk-width-bg-offset: 5vw;)
余白の量を指定するクラス名

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

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

ずらしレイアウトのクラス変更後

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

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

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

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

クラス名CSSの効果
vk-bg-offset-bg–no-offset-mobilevk-bg-offset-bgと一緒にカバーブロック(背景)に付与。
スマホ(575.98px以下)では背景のずらし量をゼロとする
vk-bg-offset-bg–no-offset-tablet vk-bg-offset-bgと一緒にカバーブロック(背景)に付与。
タブレット(991.98px以下)では背景のずらし量をゼロとする

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

まとめ

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

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

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

Lightning G3 Pro Pack(アップデート期間1年)
Lightning G3 Pro Pack(アップデート期間3年)
Vektor WordPress Solutions
Lightning G3 Evergreen キット

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

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

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