SWELLのグループ化はデフォルトではできない装飾ができる

当ページのリンクには広告が含まれています。
初心者ブロガー

SWELLのグループ化の使い方を教えてほしいです。

こういった疑問にお答えします。

本記事で学べること

  • グループ化する方法
  • グループ化したブロックの装飾方法

是非、最後まで読んでみて下さい。

本記事の内容

SWELLのグループ化はデフォルトではできない装飾ができる

グループ化

上から順に以下のブロックを挿入しました。

  • 段落
  • リスト
  • SWELLボタン

グループ化したいブロックを選択します。

(グループ化)を選択します。

グループ化されました。

グループ化したいブロックを選択後、ブロックツールバーから、「(オプション)」>「グループ化」を選択しても同じようにグループ化できます。

グループブロックを使ったブロック化

ブロック化とは逆で、先に用意したグループブロックの中にブロックを集めます。
個人的に使う場面はないかなぁとか思っていますので気になる方のみ開いてご覧ください。

OPEN

管理画面メニューから、「投稿」>「新規投稿を追加」を選択します。

(ブロック挿入ツールを切り替え)から、「ブロック」>「デザイン」>「グループ」を選択します。

レイアウトを選択します。

グループ化

横並び

縦積み

グループ化を選択しました。

(ブロックを追加)をクリックするとブロック挿入ツールの一部が表示されます。

段落を選択しました。

テキストを入力せずに改行するとグループブロックの外に出ます。

テキストの入力後だとグループブロック内で改行されます。

SWELLのグループ化でできる装飾

ボーダー設定

グループを選択すると自動的にボーダー設定が表示されます。

ボーダー設定から、「01」を選択するとグループ化したブロックに適応されます。

スタイル

グループを選択すると自動的にスタイルが表示されます。

スタイルから、「ポイント」を選択するとグループ化したブロックに適応されます。

ボーダー設定スタイルの組み合わせ

ボーダー設定とスタイルを選択するとグループ化したブロックに適応されます。

背景

(設定)から、「ブロック」>「(スタイル)」を選択します。

色から、「背景」>「カスタムカラーピッカー」を開き、以下から色を決めます。

  • RGB
  • HSL
  • Hex

カラーコードを入力すると背景色が付きます。

様々なブロックをグループ化

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「リッチカラム」を選択します。

スタイルから、ボーダーを選択すると適応されます。

ブロックツールバーから、「オプション」>「グループ化」を選択します。

リッチカラムがグループ化されました。

グループ化したブロックを選択すると自動的にボーダー設定が表示されますので「01」を選択するとリッチカラムの外側にボーダーが付きます。

グループ解除

ブロックツールバーから、「オプション」>「グループ解除」を選択します。

変換

(グループ)から以下に変換できます。

  • 横並び
  • 縦積み
  • カラム
  • カバー

以下のタブから変換後の状態を確認できます。

配置

(配置)から以下の幅を選択できます。

  • なし
  • 幅広
  • 全幅

以下のタブから幅を確認できます。

以上で解説を終わります。

最後まで読んで頂きありがとうございました。

本記事が読者の疑問を解決する役に立つと幸いです。

また、色々と触ってみることで実装の幅を増やして頂ければと思います。

おわり。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容