SWELL：リスト入りグループの使い方と出来ること

この記事ではSWELL（スウェル）のリスト入りグループの使い方・できることについて初心者向けに解説しています。

SWELL：リスト入りグループで出来ること

SWELLのリスト入りグループ機能ではリスト入りのボックス表示を作成することができます。

こんな感じです。

リスト入りグループでは以下のことができます。

• ボックスのテキスト色や背景色が変更できる
• リストのスタイル変更ができる
• ボックス部分のスタイルの変更ができる

この３つを組み合わせることで色々なデザインのリスト入りボックスを作成することができます。

①　ボックスのテキスト色や背景色が変更できる

まず、下の矢印部分のタブを選択するとリスト入りグループのテキスト色や背景色を変更できます。

②　リストのスタイル変更ができる

作成したリスト入りグループのリスト部分もスタイルを変更することができます。

③　ボックス部分のスタイルの変更ができる

次に下の矢印部分のタブでリスト入りグループのボックス部分のスタイル変更などをすることができます。

①　ボーダー設定	カスタマイズしたボーダーを設定可能
②　スタイル	ボックスのスタイルを変更可能
③　デバイス制限	スマホとPCで表示制限が可能
④　ブロック下の余白量	ブロック下の余白量を設定可能

①　ボーダー設定

ボーダー設定ではカスタマイズしたボーダーのボックス表示をすることができます。

デフォルトでは上の画像のような４つが登録されていますが、これはカスタマイズして登録することができます。

カスタマイズするには「SWELL設定」→「エディター設定」の「ボーダーセット」タブにて設定可能です。

デフォルトで登録されているボーダーを選択するとこんな感じです。

②　スタイル

ボックス部分のスタイルを１２種類から選択可能です。

ストライプ	方眼
角に折り目	スティッチ
かぎ括弧	かぎ括弧（大）
窪み	浮き出し
ポイント	チェック
バツ印	はてな
アラート	メモ
ブラウザ風	デスクトップ風

ストライプ

ボックスのスタイルを「ストライプ」にし、背景色やテキスト色・リストタイプを変更してみるとこんな感じのボックス作成できます。

方眼

ボックスのスタイルを「方眼」にし、背景色やテキスト色・リストタイプを変更してみるとこんな感じのボックス作成できます。

角に折り目

ボックスのスタイルを「角に折り目」にし、背景色やテキスト色・リストタイプを変更してみるとこんな感じのボックス作成できます。

スティッチ

ボックスのスタイルを「スティッチ」にし、背景色やテキスト色・リストタイプを変更してみるとこんな感じのボックス作成できます。

かぎ括弧

ボックスのスタイルを「かぎ括弧」にし、背景色やテキスト色・リストタイプを変更してみるとこんな感じのボックス作成できます。

かぎ括弧（大）

ボックスのスタイルを「かぎ括弧（大）」にし、背景色やテキスト色・リストタイプを変更してみるとこんな感じのボックス作成できます。

窪み

ボックスのスタイルを「窪み」にし、背景色やテキスト色・リストタイプを変更してみるとこんな感じのボックス作成できます。

浮き出し

ボックスのスタイルを「浮き出し」にし、背景色やテキスト色・リストタイプを変更してみるとこんな感じのボックス作成できます。

ポイント

ボックスのスタイルを「ポイント」にし、背景色やテキスト色・リストタイプを変更してみるとこんな感じのボックス作成できます。

チェック

ボックスのスタイルを「チェック」にし、背景色やテキスト色・リストタイプを変更してみるとこんな感じのボックス作成できます。

バツ印

ボックスのスタイルを「バツ印」にし、背景色やテキスト色・リストタイプを変更してみるとこんな感じのボックス作成できます。

はてな

ボックスのスタイルを「はてな」にし、背景色やテキスト色・リストタイプを変更してみるとこんな感じのボックス作成できます。

アラート

ボックスのスタイルを「アラート」にし、背景色やテキスト色・リストタイプを変更してみるとこんな感じのボックス作成できます。

メモ

ボックスのスタイルを「メモ」にし、背景色やテキスト色・リストタイプを変更してみるとこんな感じのボックス作成できます。

ブラウザ風

ボックスのスタイルを「ブラウザ風」にし、背景色やテキスト色・リストタイプを変更してみるとこんな感じのボックス作成できます。

デスクトップ風

ボックスのスタイルを「デスクトップ風」にし、背景色やテキスト色・リストタイプを変更してみるとこんな感じのボックス作成できます。

③　デバイス制限

スマホとPCで表示制限をすることができます。

④　ブロック下の余白量

ブロック下の余白量を設定することができます。

SWELL（スウェル）のリスト入りグループの実際表示はSWELLで作成したサンプルサイトで確認できますので、そちらを参考にしてみてください。

→　SWELLで作成したサンプルサイト（リスト入りグループ）

SWELLのリスト入りグループではブロックのスタイルやリストのスタイルなどを組み合わせることで、色々なボックス表示を作成できるのでとても便利な機能です。

組み合わせパターンが多い分、戸惑ってしまうかもしれないですが色々と作成していくうちに慣れていくと思います。

SWELLの使い方

SWELL：関連記事