リスト カスタムクラス

テーマのリストブロックの表示

リストブロックで、リストを作成すると以下のように表示します

番号付きリスト

  1. hello world
  2. hello world
  3. hello world
    1. hello world
      1. hello world

番号なしリスト

  • hello world
  • hello world
  • hello world
    • hello world
      • hello world

カスタマイズ クラス

ブロックメニューの高度な設定/追加CSSクラスにクラス名を追加することで、リストアイコンのカスタマイズができます。

list-style-none

リストアイコンを非表示にします。

hide list icon

  • hello world
  • hello world
  • hello world

list-style-initial

テーマのスタイルを使用しないで通常のリスト表示をします。

reset list icon

  1. hello world
  2. hello world
  3. hello world

circle

番号付きリストで、iconを丸に変更します。

  1. hello world
  2. hello world
  3. hello world

icon-alert

iconの色は五種類準備しています。

OL

  1. hello world
  2. hello world
  3. hello world

UL

  • hello world
  • hello world
  • hello world

icon-info

OL

  1. hello world
  2. hello world
  3. hello world

UL

  • hello world
  • hello world
  • hello world

icon-notice

OL

  1. hello world
  2. hello world
  3. hello world

UL

  • hello world
  • hello world
  • hello world

icon-cool

OL

  1. hello world
  2. hello world
  3. hello world

UL

  • hello world
  • hello world
  • hello world

icon-dark

OL

  1. hello world
  2. hello world
  3. hello world

UL

  • hello world
  • hello world
  • hello world

list-style-tab

Requires a nested list and a custom class
  • hello tab 1
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  • tab 2
    • Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

リストブロックの他の設定が行われた場合の表示

リストブロックで番号付きリストの開始番号が指定された場合の表示

OL has start attribute

  1. hello world
  2. hello world
  3. hello world

番号付きリストで、逆順が指定された場合の表示

OL has reversed attribute

  1. hello world
  2. hello world
  3. hello world

Additional CSS Class: list-style-inline

Additional CSS Class: list-style-tab

  • title1
    • content1
    • content grand child
  • title2
    • content2