悩む人WordPress側で用意してくれている「コアブロック」のリストに対してSWELL独自のカスタマイズを加えて使いやすくした「デザイン装飾」について詳しく教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- SWELLの「リスト」で使えるデザイン装飾【17パターン】が見れる
- SWELLの「リスト」で使えるデザイン装飾【＋αの6パターン】が見れる
- リストの使い方
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
【SWELL】リストで使えるデザイン装飾【17パターン】
スタイル
※ インデント（字下げ）とは：文章の先頭の文字を左または右に押しやることで行頭を空白にすることです。
- List
- item この状態が「インデント」です。
スタイル
インデント
デフォルト
- List
- List
- List
- item
- List
- item
目次風
- List
- List
- List
- item
- List
- item
チェック
- List
- List
- List
- item
- List
- item
マル
- List
- List
- List
- item
- List
- item
三角
- List
- List
- List
- item
- List
- item
バツ
- List
- List
- List
- item
- List
- item
丸数字
- List
- List
- List
- item
- List
- item
注釈
- List
- List
- List
- item
- List
- item
リストの追加スタイル
リストの追加スタイル
インデント
下線を付ける
- List
- List
- List
- item
- List
- item
横並び
- List
- List
- List
- item
- List
- item
番号付きのリスト設定
番号付きのリスト設定
インデント
数字
- List
- List
- List
- item
- List
- item
大文字
- List
- List
- List
- item
- List
- item
小文字
- List
- List
- List
- item
- List
- item
ローマ数字大文字
- List
- List
- List
- item
- List
- item
ローマ数字小文字
- List
- List
- List
- item
- List
- item
初期値：2
- List
- List
- List
- item
- List
- item
リストの数字を逆順にする：有効
- List
- List
- List
- item
- List
- item
【SWELL】リストで使えるデザイン装飾【7パターン】
「スタイル」と「インデントのスタイル」の組み合わせ
組み合わせ①
インデントされていないリスト項目（List）がデフォルト時のみインデントされたリスト項目（item）のスタイルのアイコンが反映されます。
- List
- item
- item
- List
- item
- item
組み合わせ②
インデントされていないリスト項目（List）がデフォルト以外では、インデントされたリスト項目（item）のスタイルはアイコンカラーのみ反映されます。
- List
- item ※ スタイルの「マル」を選択しました。
- item
- List
- item ※ スタイルの「バツ」を選択しました。
- item
※ インデントされていないリスト項目（List）が「目次風」のときのみインデントされたリスト項目（item）のスタイルは操作できません。
組み合わせ③
基本的には、インデントされていないリスト項目（List）は異なるスタイルにできませんがブロック化することで可能になります。
- List
- item
- item
- List
- item
- item
「順序なしリスト」と「順序ありリスト」の様々な組み合わせ
順序なしリスト
※「順序がない箇条書きリスト」のことです。
- List
- List
順序ありリスト
※「順序がある番号付きリスト」のことです。
- List
- List
様々な組み合わせ
「順序なしリスト」「順序なしリスト」
- List
- item
- List
- item
「順序なしリスト」「順序ありリスト」
- List
- item
- List
- item
- item
「順序ありリスト」「順序なしリスト」
- List
- item
- List
- item
「順序ありリスト」「順序ありリスト」
- List
- item
- List
- item
- item
【SWELL】リストの使い方
リストの挿入
管理画面メニューから、「投稿」＞「新規投稿を追加」を選択します。
（ブロック挿入ツールを切り替え）から、「ブロック」＞「テキスト」＞「リスト」を選択します。
「リスト」が挿入されました。
スタイルの設定
テキストを入力します。
ブロックツールバーから、「（リスト）」を選択します。
開いたスタイルの中からアイコンを選択します。
インデント
※ ２段落目から「インデント」が使用できます。
ブロックツールバーから、「（インデント）」を選択します。
「インデント」されました。
インデント解除
ブロックツールバーから、「（インデント解除）」を選択します。
これで解除されます。
インデントのスタイル
※ インデントされてないとスタイルの設定は行えません。
ブロックツールバーから、「（リスト）」を選択します。
開いたスタイルの中からアイコンを選択します。
複数リストのブロック化
複数のブロックを選択後、以下からグループ化します。
- （グループ）
- （横並び）
- （縦積み）
グループ化されました。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
今回は以上です。