【募集中】WordPressテーマ『SWELL』で作ったコーポーレートサイトやブログを掲載させて頂ける方

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

当ページのリンクには広告が含まれています。
悩む人

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

こういった悩みにお答えします。

本記事で解決できること

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

是非、最後までご覧ください。

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

あわせて読みたい
【SWELL】ブロックエディタの使い方【テーマ専用機能まとめ】 SWELLでのブロックエディタの使い方を知りたいですか?本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。
本記事の内容

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

グループ化

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

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

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

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

グループ化されました。

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

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

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

OPEN

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

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

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

グループ化

横並び

縦積み

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

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

段落を選択しました。

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

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

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

ボーダー設定

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

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

スタイル

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

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

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

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

背景

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

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

  • RGB
  • HSL
  • Hex

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

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

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

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

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

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

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

グループ解除

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

変換

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

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

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

配置

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

  • なし
  • 幅広
  • 全幅

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

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

あわせて読みたい
【SWELL】ブロックエディタの使い方【テーマ専用機能まとめ】 SWELLでのブロックエディタの使い方を知りたいですか?本記事では、ブロックツールバーで使えるSWELL専用機能やWordPress標準搭載のブロックをカスタマイズしたブロック、SWELL専用のカスタムブロックの使い方を解説しています。SWELLでのブロックエディタの使い方を知りたい方は是非ご覧ください。

今回は以上です。

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

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