リストと見出しをグループボックス化して囲み枠を付ける方法

こんにちは、今回の第41回のウェブ講座では、
Lightningでの「見出し付きリストのグループブロック」の作り方
そしてそのグループブロックに囲み線(枠線)を付ける方法について解説していきたいと思います。

前回の第40回ウェブ講座では、リストブロックの設定方法について解説いたしました。
そのリストブロックのワンランクアップ的な使い方として、今回のウェブ講座を参考にして頂ければと思います。

リストブロックで作ったリストに、見出しブロックで見出しを付けて、見出しブロックとリストブロックをグループブロックとして一体化します。そして、そのグループブロックにスタイル設定で囲み線(枠線)を適用します。
例えば、下図のように、ステッチの囲み線(枠線)を付けると、可愛い感じのデザインになります。

グループブロックに囲み枠を付けた例

このようなリストブロックと見出しブロックをグループブロック化して、囲み枠(枠線)を適用させる過程を、キャプチャ画像(スクリーンショット)を交えながら解説していきたいと思います。

尚、キャプチャ画像を撮った作例はこちらのデモサイトでご覧いただけます。
https://d-elephant.com/demo_7th/archives/336

ステッチ囲み線は表示されない可能性も

今回のウェブ講座では囲み線として「ステッチ」をスタイルで選びましたが、「ステッチ」はページ編集画面では表示できているのに、公開画面では表示されない場合もございます。ですので、「ステッチ」以外のスタイルを設定することをおすすめいたします。「ステッチ」に似た点線の罫線を施したい場合は、「Dashed」を設定すると良いです。

見出しとリストのグループブロック化の手順

グループブロック化する前段階として、
まずは、見出しブロックで見出しを、
リストブロックでリストを作ります。

では、はじめていきましょう~!

見出しブロックで見出しを作ります

ページに見出しブロックを挿入します。
今回は、①のWordPress標準の見出しブロックを選びました。
①の下の見出しはLightningのVKブロックの見出しブロックです。

見出しブロックを挿入するキャプチャ画像

WordPress標準の見出しブロックについては、第20回ウェブ講座で解説しています。
https://d-elephant.com/archives/2329

※LightningのVKブロックの見出しブロックについては、第28回ウェブ講座で解説しています。
https://d-elephant.com/archives/2660


見出しとして「お得なコーヒー&ケーキセット」と入力してみました。
選んだ見出しスタイル(装飾)は「左右線」です。
※見出しの挿入やスタイルの選び方については、第20回ウェブ講座で解説していますので、ご参照ください。

リストブロックでリストを作ります

リストブロックの挿入方法やリストブロックのカスタマイズ、テキストの入力方法などにつきましては、前回の第40回ウェブ講座で解説していますのでご参照ください。

見出しの下に、リストブロックを挿入します。
①の「リスト」をクリックします。

リストブロックを挿入するキャプチャ画像

リストにテキストを入力しました。


リストのスタイルは①[矢印]を選びました。
②リストアイコンが[矢印]になりました。


①リストアイコンの色を選択しました。
②リストアイコンが選択した色になりました。

見出しブロックとリストブロックをグループブロック化します

見出しとリストができましたので、
この二つのブロックをグループブロックにします。

①見出しブロックを選択している状態で
②パソコンの[Shift]キーを押したままリストブロックをクリックします。
見出しブロックとリストブロックの両方が選択されている状態であるとして両方の背景が薄青色になります。
③ツールバーの[グループ化]ボタンをクリックします。

グループブロック化する3ステップのキャプチャ画像

①グループ化されたとして青枠で囲まれて表示されます。
②のツールバーも[グループアイコン]になりました。
③のブロックパネルも[グループアイコン]表示されました。

グループブロック化されたことを確認できる3つの方法

グループブロックに囲み枠を付けます

Lightningには、グループブロックにスタイル(装飾)で囲み枠などを付けることができます。

リストブロックと見出しブロックをグループブロック化しましたので、そのグループブロックに囲み枠を付けてみたいと思います。

スタイルで装飾を選びます(囲み線など)

グループ化されましたので、
グループブロックに装飾を施すスタイルを選択してみたいと思います。
囲み枠(罫線)や背景色を付ける装飾など13種類あります。

ここでは[ステッチ]という囲み線を選択しました。
②グループブロックにステッチ罫線が反映されました。

グループブロックに囲み枠を適用したキャプチャ画像

グループブロックに背景色を付けます

グループブロックを選択している状態で、
ブロックパネルの「色」
[背景]をクリックします。
すると②の「カラーパレット」が開きますので、
③で任意の色をクリックして選択します。
ここでは[淡いシアンブルー]を選んでみました。
④グループブロックに背景色として[淡いシアンブルー]が反映されました。

グループブロックに背景色を付ける方法のキャプチャ画像

グループブロックにパディングを設定してみました

グループブロックを選択している状態で、
ブロックパネルの「サイズ」
[パディング]を2コマ分設定してみました。
②ステッチ罫線の外の背景色範囲が少し広がってバランス的に良くなったと思います。

グループブロックに背景にパディングを設定したキャプチャ画像

グループブロックの囲み線の色変更もできます

スタイルで選択した囲み線のステッチの色変更もできますのでやってみようと思います。

グループブロックを選択している状態で、
ブロックパネルの①[Settings]をクリックして選択します。
続いて[線の色]をクリックします。


[線の色]をクリックすると、
①[カラーパレット]が開きますので、
任意の色をクリックして選択します。
(ここでは「鮮やかな赤」を選択してみました)
ステッチ罫線の色が黒から選択した「鮮やかな赤」へ変更されました。

グループブロックの囲み枠の罫線の色を変更したキャプチャ画像

段落ブロックと見出しブロックもグループブロック化できます

ここまで、見出しブロックとリストブロックをグループブロック化して囲み線などで装飾しましたが、同じことを、段落ブロックと見出しブロックのグループブロックでもできます。

やり方は同じです。
リストブロックが段落ブロックに変わっただけです。

やってみたのがこちらです。

見出しブロックと段落ブロックをグループブロック化した例

以上で、第41回のウェブ講座、
「Lightning 見出し付きリストのグループブロックに囲み線(枠線)スタイルを施す方法」は終了です。

大変お疲れ様でした。

それでは、次回の第42回ウェブ講座でまたお会いいたしましょう~^^