SWELLのグループ化の設定と使い方をまとめています。
グループ化とは?
グルプー化はWordPress共通の機能です。
グループ化することで、複数の異なるブロックを一つのグループとして編集できます。
一般的には、複数のブロックを1つのグループとして編集したい時に使う機能ですが、SWELLではブロック単体をグループ化して、段落ブロックで使えるオプションと組み合わせて使うこともできます。
例えば、本来ボーダーやスタイルを設定できないリストブロックにも、グループ化することでボーダーやスタイルを設定できます。メインのブロックを少し目立たせたい時に使うと便利です。
- リストブロックを挿入する
- リストブロックをグループ化する
- グループを編集する
グループ化した範囲はdiv
タグで囲まれ、wp-block-group
のクラス属性が付与されます。
<div class="wp-block-group">グループ化した範囲</div>
グループ化の使い方
ツールバーオプションからグループ化する方法を紹介します(操作方法は複数あります)。
ブロック単体
グループ化したいブロックを選択して、ツールバーオプションのメニューから「グループ化」を選択します。
他にも、ツールバー一番左のブロックアイコンやドキュメント概観からも同様にグループ化できます。
複数のブロック
マウスで複数のブロックを選択及びSift
キーを押しながらグループ化したい範囲を選択して、ツールバーオプションの「グループ化」アイコンをクリックします。
先ほど同様、ツールバーのグループ化アイコンやドキュメント概観からも同様にグループ化できます。
グループ化の解除
グループを選択して、ツールバーオプションの「グループ解除」からグループ化を解除できます。
他にも、ツールバー一番左のグループアイコンから「アンラップ」を選択、ドキュメント概観からオプションを開いて「グループ解除」でも同様にグループ化を解除することができます。
グループの編集
グループを選択して、ツールバー及びサイドバーのオプションからグループを編集できます。
難しく考える必要はありません。グループを1つのブロックだと思って編集して下さい。
- 配置【ツールバー】
- デバイスのコントロール【ツールバー&サイドバー】
- ブロックしたの余白量【ツールバー&サイドバー】
- 並び順変更【サイドバー】 ※使い勝手が悪い
- ボーダー設定【サイドバー】
- スタイル【サイドバー】
- テキスト色変更【サイドバー】
- 背景色変更【サイドバー】
- タイポグラフィ(フォント)【サイドバー】
SWELLの場合は、特定のブロック&範囲に段落ブロックのオプションを追加できるといった感じです。
最後に
SWELLを使っている方で、リストブロックにどうやってボーダーをつけるの?ステップブロックの背景色はどうやって変更するの?等、悩んでいる方は、今回紹介した「グループ化」の方法を試してみて下さい。
また、キャプションブロックでも同じことができるので(キャプションブロックは中にブロックを配置できるため)、特定のブロックを強調したい時は、グループ化やキャプションボックスを使ってみて下さい。
コメント