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

当ページのリンクには広告が含まれています。
初心者ブロガー

WordPress側で用意してくれている「コアブロック」のリストに対してSWELL独自のカスタマイズを加えて使いやすくした「デザイン装飾」について詳しく教えてほしいです。

こういった疑問にお答えします。

本記事で学べること

  • SWELLの「リスト」で使えるデザイン装飾【17パターン】が見れる
  • SWELLの「リスト」で使えるデザイン装飾【+αの6パターン】が見れる
  • リストの使い方

是非、最後まで読んでみて下さい。

本記事の内容

【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段落目から「インデント」が使用できます。

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

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

インデント解除

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

これで解除されます。

インデントのスタイル

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

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

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

複数リストのブロック化

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

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

グループ化されました。

以上で解説を終わります。

最後まで読んで頂きありがとうございました。

本記事が読者の疑問を解決する役に立つと幸いです。

また、色々と触ってみることで実装の幅を増やして頂ければと思います。

おわり。

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

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