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