![](https://hrdyuic.com/wp-content/uploads/8335d558d151e09a696fb916ebabfbd5.png)
SWELLのグループ化の使い方を教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- グループ化する方法
- グループ化したブロックの装飾方法
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
SWELLのグループ化はデフォルトではできない装飾ができる
グループ化
上から順に以下のブロックを挿入しました。
- 段落
- リスト
- SWELLボタン
![](https://hrdyuic.com/wp-content/uploads/649ffff0353076cf5b1753dbdd3f0902.jpg)
![](https://hrdyuic.com/wp-content/uploads/649ffff0353076cf5b1753dbdd3f0902.jpg)
グループ化したいブロックを選択します。
![](https://hrdyuic.com/wp-content/uploads/5bf7c167ef49ca1e00b47bf82fe81a87.jpg)
![](https://hrdyuic.com/wp-content/uploads/5bf7c167ef49ca1e00b47bf82fe81a87.jpg)
(グループ化)を選択します。
![](https://hrdyuic.com/wp-content/uploads/accd2bc355294cd5aae6c29ff73589c3.jpg)
![](https://hrdyuic.com/wp-content/uploads/accd2bc355294cd5aae6c29ff73589c3.jpg)
グループ化されました。
![](https://hrdyuic.com/wp-content/uploads/5ec0199deff87bba225036928a38fe13.jpg)
![](https://hrdyuic.com/wp-content/uploads/5ec0199deff87bba225036928a38fe13.jpg)
グループ化したいブロックを選択後、ブロックツールバーから、「
(オプション)」>「グループ化」を選択しても同じようにグループ化できます。![](https://hrdyuic.com/wp-content/uploads/3d98c6f37b3cc103e7a55398032c7520.jpg)
![](https://hrdyuic.com/wp-content/uploads/3d98c6f37b3cc103e7a55398032c7520.jpg)
グループブロックを使ったブロック化
ブロック化とは逆で、先に用意したグループブロックの中にブロックを集めます。
個人的に使う場面はないかなぁとか思っていますので気になる方のみ開いてご覧ください。
OPEN
管理画面メニューから、「投稿」>「新規投稿を追加」を選択します。
![](https://hrdyuic.com/wp-content/uploads/b715d22697a4da45593509e356c92e37.jpg)
![](https://hrdyuic.com/wp-content/uploads/b715d22697a4da45593509e356c92e37.jpg)
(ブロック挿入ツールを切り替え)から、「ブロック」>「デザイン」>「グループ」を選択します。
![](https://hrdyuic.com/wp-content/uploads/e745e7f93a95c7916c7a51a0d68a53b2.jpg)
![](https://hrdyuic.com/wp-content/uploads/e745e7f93a95c7916c7a51a0d68a53b2.jpg)
レイアウトを選択します。
グループ化
![](https://hrdyuic.com/wp-content/uploads/82a179f45236e76f48c32da0621fb5c2.jpg)
![](https://hrdyuic.com/wp-content/uploads/82a179f45236e76f48c32da0621fb5c2.jpg)
横並び
![](https://hrdyuic.com/wp-content/uploads/e581fb0c9898d31ad600406cbebfba4e.jpg)
![](https://hrdyuic.com/wp-content/uploads/e581fb0c9898d31ad600406cbebfba4e.jpg)
縦積み
![](https://hrdyuic.com/wp-content/uploads/8644a54ed1c93535a4957fa9f5ae58e5.jpg)
![](https://hrdyuic.com/wp-content/uploads/8644a54ed1c93535a4957fa9f5ae58e5.jpg)
グループ化を選択しました。
![](https://hrdyuic.com/wp-content/uploads/c27130c5c35bf5a0873597322c8ee8c7.jpg)
![](https://hrdyuic.com/wp-content/uploads/c27130c5c35bf5a0873597322c8ee8c7.jpg)
(ブロックを追加)をクリックするとブロック挿入ツールの一部が表示されます。
![](https://hrdyuic.com/wp-content/uploads/f6af959d5584aec865b88f935e464264.jpg)
![](https://hrdyuic.com/wp-content/uploads/f6af959d5584aec865b88f935e464264.jpg)
段落を選択しました。
![](https://hrdyuic.com/wp-content/uploads/3d701000d7260a7254629cb790b88d7b.jpg)
![](https://hrdyuic.com/wp-content/uploads/3d701000d7260a7254629cb790b88d7b.jpg)
テキストを入力せずに改行するとグループブロックの外に出ます。
![](https://hrdyuic.com/wp-content/uploads/721ae2f0514e231d5adab8f3e5eb6ec9.jpg)
![](https://hrdyuic.com/wp-content/uploads/721ae2f0514e231d5adab8f3e5eb6ec9.jpg)
テキストの入力後だとグループブロック内で改行されます。
![](https://hrdyuic.com/wp-content/uploads/5c1eee579f1701ed0344d9b865c8448a.jpg)
![](https://hrdyuic.com/wp-content/uploads/5c1eee579f1701ed0344d9b865c8448a.jpg)
SWELLのグループ化でできる装飾
ボーダー設定
グループを選択すると自動的にボーダー設定が表示されます。
![](https://hrdyuic.com/wp-content/uploads/f0d5fbe63c70f29b96887a50aa8e3a9b.jpg)
![](https://hrdyuic.com/wp-content/uploads/f0d5fbe63c70f29b96887a50aa8e3a9b.jpg)
ボーダー設定から、「01」を選択するとグループ化したブロックに適応されます。
![](https://hrdyuic.com/wp-content/uploads/ef3be104e3946cf0e7bd4c946597eff2.jpg)
![](https://hrdyuic.com/wp-content/uploads/ef3be104e3946cf0e7bd4c946597eff2.jpg)
スタイル
グループを選択すると自動的にスタイルが表示されます。
![](https://hrdyuic.com/wp-content/uploads/61f5fbb7ed6197b4c72a417fa6f0cc31.jpg)
![](https://hrdyuic.com/wp-content/uploads/61f5fbb7ed6197b4c72a417fa6f0cc31.jpg)
スタイルから、「ポイント」を選択するとグループ化したブロックに適応されます。
![](https://hrdyuic.com/wp-content/uploads/03c4ec6b4ee77ce9de8884469d38b12b.jpg)
![](https://hrdyuic.com/wp-content/uploads/03c4ec6b4ee77ce9de8884469d38b12b.jpg)
ボーダー設定 スタイルの組み合わせ
ボーダー設定とスタイルを選択するとグループ化したブロックに適応されます。
![](https://hrdyuic.com/wp-content/uploads/4f94e3939a42e1d03770f2625586f2af.jpg)
![](https://hrdyuic.com/wp-content/uploads/4f94e3939a42e1d03770f2625586f2af.jpg)
背景
(設定)から、「ブロック」>「 (スタイル)」を選択します。
![](https://hrdyuic.com/wp-content/uploads/7ea07083937ec5b548027e8a473f9142.jpg)
![](https://hrdyuic.com/wp-content/uploads/7ea07083937ec5b548027e8a473f9142.jpg)
色から、「背景」>「カスタムカラーピッカー」を開き、以下から色を決めます。
- RGB
- HSL
- Hex
![](https://hrdyuic.com/wp-content/uploads/25af4aa7e5334087c185a4f75492984d.jpg)
![](https://hrdyuic.com/wp-content/uploads/25af4aa7e5334087c185a4f75492984d.jpg)
カラーコードを入力すると背景色が付きます。
![](https://hrdyuic.com/wp-content/uploads/0a31edbe409a41be7ab2993259f49780.jpg)
![](https://hrdyuic.com/wp-content/uploads/0a31edbe409a41be7ab2993259f49780.jpg)
様々なブロックをグループ化
(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「リッチカラム」を選択します。
![](https://hrdyuic.com/wp-content/uploads/dbd8b50b5751984d2c7ed6f5f2a0803c.jpg)
![](https://hrdyuic.com/wp-content/uploads/dbd8b50b5751984d2c7ed6f5f2a0803c.jpg)
スタイルから、ボーダーを選択すると適応されます。
![](https://hrdyuic.com/wp-content/uploads/d753c082a9608256aabf9bdf2de04e2f.jpg)
![](https://hrdyuic.com/wp-content/uploads/d753c082a9608256aabf9bdf2de04e2f.jpg)
ブロックツールバーから、「オプション」>「グループ化」を選択します。
![](https://hrdyuic.com/wp-content/uploads/1f15e2ac8c4eea3f6edbd25e545b527f.jpg)
![](https://hrdyuic.com/wp-content/uploads/1f15e2ac8c4eea3f6edbd25e545b527f.jpg)
リッチカラムがグループ化されました。
![](https://hrdyuic.com/wp-content/uploads/2024c705c43d14fcf76c7723b7264d0b.jpg)
![](https://hrdyuic.com/wp-content/uploads/2024c705c43d14fcf76c7723b7264d0b.jpg)
グループ化したブロックを選択すると自動的にボーダー設定が表示されますので「01」を選択するとリッチカラムの外側にボーダーが付きます。
![](https://hrdyuic.com/wp-content/uploads/ad10c96b6c7a470c19fe06911d9b7c8b.jpg)
![](https://hrdyuic.com/wp-content/uploads/ad10c96b6c7a470c19fe06911d9b7c8b.jpg)
グループ解除
ブロックツールバーから、「オプション」>「グループ解除」を選択します。
![](https://hrdyuic.com/wp-content/uploads/4ea577215384ce495849ea2b4dd708cd.jpg)
![](https://hrdyuic.com/wp-content/uploads/4ea577215384ce495849ea2b4dd708cd.jpg)
変換
(グループ)から以下に変換できます。
- 横並び
- 縦積み
- カラム
- カバー
![](https://hrdyuic.com/wp-content/uploads/77c8845e1299a03476c6b3b027eca81f.jpg)
![](https://hrdyuic.com/wp-content/uploads/77c8845e1299a03476c6b3b027eca81f.jpg)
以下のタブから変換後の状態を確認できます。
![](https://hrdyuic.com/wp-content/uploads/1a597b94949bae12a134b874a9f18ef1.jpg)
![](https://hrdyuic.com/wp-content/uploads/1a597b94949bae12a134b874a9f18ef1.jpg)
配置
(配置)から以下の幅を選択できます。
- なし
- 幅広
- 全幅
![](https://hrdyuic.com/wp-content/uploads/373d4be3919d25546bed55e31ce70281.jpg)
![](https://hrdyuic.com/wp-content/uploads/373d4be3919d25546bed55e31ce70281.jpg)
以下のタブから幅を確認できます。
![](https://hrdyuic.com/wp-content/uploads/51ef628a54223c1269231279f9a92354.jpg)
![](https://hrdyuic.com/wp-content/uploads/51ef628a54223c1269231279f9a92354.jpg)
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
今回は以上です。