第42回 Lightning グループブロックの作り方と枠線(囲み枠)の付け方を解説

こんにちは、今回の第42回のウェブ講座では、

1－Lightningでの「グループブロック」の作り方
2－グループブロックへ枠線(囲み線)を付ける方法
3－グループブロックに付けられる枠線などのスタイル(装飾)全種類のご紹介

以上について解説していきたいと思います。

前回の第41回のウェブ講座では
リストブロックと見出しブロックをグループブロック化して、スタイルで「ステッチ」枠線を付ける過程を解説しました。

今回は他バターンでの複数ブロックのグループブロック化を2例と、
グループブロックに付けられるスタイル(装飾)全13種類のご紹介をしていきたいと思います。

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

では、グループブロックの作り方から解説したいと思います。

グループブロックの作り方

下図に
①見出しブロック
②段落ブロック
③リストブロック
この順で各ブロックにテキストを入力してみましたので、
これをグループブロック化してみたいと思います。

---

①の見出しブロックのどこでもいいのでPCのカーソルを置きます。
その状態でPCの[Shift]キーを押しながら
②の段落ブロックをクリック
続いて
③のリストブロックをクリックします。
すると見出しブロック、段落ブロック、リストブロックの３つのブロックが選択されている状態ですよ、ということで３つのブロックに薄い青色が付きます。
この状態で、④ツールバーの[グループ化]ボタンをクリックします。

※3つのブロックの選択方法として、見出しブロックから段落ブロック、リストブロックとカーソルをドラッグしても行えます。

---

すると、
①3つのブロックが青枠で囲まれてグループブロック化されとの表示がされます。
②のツールバーもグループブロックのツールバーとなりました。
③のブロックパネルもグループブロックの表示となりました。

---

試しに枠線を付けてみます。
(※枠線などスタイルの種類については後述で全種類のご紹介をいたします)

①ブロックパネルで[Styles]をクリックします。
②のスタイルで、③[直線 角丸]をクリックして選択してみました。
④グループブロックに[直線 角丸]の枠線が付きました。

グループブロック化の例 - No2

もう一つグループブロック化の例題をやってみようと思います。

①見出しブロック
②段落ブロック
③画像ブロック
この順で各ブロックを作り、
この３つのブロックをグループブロック化して、
[直線]の枠線も付けてみました。

枠線に角丸を付けられます

例 - No2では枠線として[直線]を選択しましたが、
この[直線]に角丸を付けることができます。

画面右側のブロックパネルをずうっと下まで行くと
①「角丸」がありますので、
角丸具合を数値で入力するかスライドバーで設定します。
(ここでは20px/ピクセルにしてみました)
すると、②枠線の4隅が角丸になりました。

枠線の太さを変更できます

上記の「角丸」のすぐ上に
①「枠線」がありますので、
枠線の太さを数値で入力するかスライドバーで設定できます。
(ここでは4px/ピクセルにしてみました)
すると、②の枠線が4ピクセルの太さになりました。

枠線の色も変更できます

上記の「枠線」の設定で、枠線の太さの他に、
「枠線の色」も変更できます。

①の枠線の太さ指定の左の円をクリックすると
②カラーパレットが開きますので任意の色を選択します。
カラーパレット以外の色を設定したい場合は③の部分をクリックするとカラーピッカーが開きますので自由に色を選択して指定できます。

---

①カラーパレットで[鮮やかなシアンブルー]をクリックして指定しました。
②枠線の色が[鮮やかなシアンブルー]に変更されました。

枠線の色を変更するもう一つの方法も

画面右側のブロックパネルで
①[Settings]をクリックします。
②「線の色」をクリックすると、
③カラーパレットが開きます。
④設定したい任意の色をクリックします。ここでは[鮮やかな赤]を選択してみました。
(ここに表示されている色に限られます。上記の色変更時のようにカラーピッカーは開きません)
⑤枠線が選択した鮮やかな赤の色に変更されました。

パディングで枠線内の余白を調整できます

画面右側のブロックパネルで[Styles]の方を表示させている状態で、
①「サイズ」の「パディング」で枠線内余白幅を設定します。
(ここではスライダーで4目盛を設定してみました)
②の部分をクリックすると数値での設定もできます。
その隣をクリックすると上下左右を個別で余白幅指定できます。
③設定した分だけ枠線内側に余白ができました。

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

画面右側のブロックパネルで[Styles]の方を表示させている状態で、
①「色」の「背景」をクリックすると、
②カラーパレットが開きますので任意の色をクリックして選択します。
カラーパレットの色ではどれも濃すぎるので
③ここではカラーピッカーを開いて色を指定してみました。
④グループブロックに設定した背景色が付きました。

以上で、グループブロックの作り方、
そして、枠線の付け方などについて解説いたしました。

次に、グループブロックに付けられる枠線などのスタイル(装飾)全種類のご紹介をしたいと思います。

グループブロックのスタイル(装飾)全種類の紹介

スタイルの「デフォルト」以外、
全12種類をご紹介していきたいと思います。

画面右側のブロックパネルで[Styles]の方を表示させると、
すぐのところに「スタイル」があります。

直線

直線 角丸

点線

Dashed

二重線

ステッチ

直線 上下

シャドウ

Info

Success

Warning

Danger

---

以上で、第42回のウェブ講座、
「Lightning グループブロックの作り方と枠線(囲み枠)の付け方」は終了です。

大変お疲れ様でした。

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