Menu
カテゴリー

【SWELL】リストで使えるデザイン装飾と使い方【全24パターン】

悩む人

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

番号付きのリスト設定

番号付きのリスト設定

インデント

数字

  1. List
  2. List
  1. List
    • item
  2. List
    • item

大文字

  1. List
  2. List
  1. List
    • item
  2. List
    • item

小文字

  1. List
  2. List
  1. List
    • item
  2. List
    • item

ローマ数字大文字

  1. List
  2. List
  1. List
    • item
  2. List
    • item

ローマ数字小文字

  1. List
  2. List
  1. List
    • item
  2. List
    • item

初期値:2

  1. List
  2. List
  1. List
    • item
  2. List
    • item

リストの数字を逆順にする:有効

  1. List
  2. List
  1. List
    • item
  2. 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

順序ありリスト

※「順序がある番号付きリスト」のことです。

  1. List
  2. List

様々な組み合わせ

「順序なしリスト」「順序なしリスト」

  • List
    • item
  • List
    • item

「順序なしリスト」「順序ありリスト」

  • List
    1. item
  • List
    1. item
    2. item

「順序ありリスト」「順序なしリスト」

  1. List
    • item
  2. List
    • item

「順序ありリスト」「順序ありリスト」

  1. List
    1. item
  2. List
    1. item
    2. item

【SWELL】リストの使い方

リストの挿入

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

(ブロック挿入ツールを切り替え)から、「ブロック」>「テキスト」>「リスト」を選択します。

「リスト」が挿入されました。

スタイルの設定

テキストを入力します。

ブロックツールバーから、「(リスト)」を選択します。

開いたスタイルの中からアイコンを選択します。

インデント

※ 2段落目から「インデント」が使用できます。

ブロックツールバーから、「(インデント)」を選択します。

「インデント」されました。

インデント解除

ブロックツールバーから、「(インデント解除)」を選択します。

これで解除されます。

インデントのスタイル

※ インデントされてないとスタイルの設定は行えません。

ブロックツールバーから、「(リスト)」を選択します。

開いたスタイルの中からアイコンを選択します。

複数リストのブロック化

複数のブロックを選択後、以下からグループ化します。

  • (グループ)
  • (横並び)
  • (縦積み)

グループ化されました。

News

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

今回は以上です。

※ 本記事を読んで「悩みが解決した」「参考になった」という方は、 (旧Twitter)でシェアして頂けると嬉しいです ^_^

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

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