リストで使えるデザイン装飾一覧

この記事では、SWELLのエディタで使用できるリストのデザイン装飾機能について解説していきます。

クラシックエディター・ブロックエディターのどちらからも、簡単に使用できますので、ぜひご活用ください。

リストデザイン一覧

はじめに、どのようなリストが使用できるのか紹介しておきます。

番号なしリスト【ulタグ】

デフォルト

• デフォルト状態のリストです
• リストの項目１
  • 子リストの項目１
  • 子リストの項目２
• リストの項目２

目次風

• 目次風リストです
• リストの項目１
  • 子リストの項目１
  • 子リストの項目２
• リストの項目２

チェックリスト

• チェックリストです
• リストの項目１
  • 子リストの項目１
  • 子リストの項目２
• リストの項目２

Goodリスト

• Goodリストです
• リストの項目１
  • 子リストの項目１
  • 子リストの項目２
• リストの項目２

Badリスト

• Badリストです
• リストの項目１
  • 子リストの項目１
  • 子リストの項目２
• リストの項目２

注釈リスト

• 注釈リストです
• リストの項目１
  • 子リストの項目１
  • 子リストの項目２
• リストの項目２

番号付きリスト【olタグ】

デフォルト

1. デフォルト状態の番号付きリストです
2. リストの項目１
   1. 子リストの項目１
   2. 子リストの項目２
3. リストの項目２

目次風

1. デフォルト状態の番号付きリストです
2. リストの項目１
   1. 子リストの項目１
   2. 子リストの項目２
3. リストの項目２

番号塗りつぶしスタイル

1. 塗りつぶしスタイルの番号付きリストです
2. リストの項目２
   1. 子リストの項目１
   2. 子リストの項目２
3. リストの項目２
   • 子リストをulタグにすると
   • こんな感じ

追加装飾

上記のベースとなるリスト装飾に加え、追加装飾も可能です。

「下線を加える」追加スタイル

• リストの項目１
• リストの項目２

1. リストの項目１
2. リストの項目２

「横並びにする」追加スタイル

• リストの項目１
• リストの項目２

1. リストの項目１
2. リストの項目２

リスト装飾の使い方

ブロックエディターの場合

「リストブロック」を使用してリストを作成し、サイドバーの「スタイル」パネルから使用したいデザインを選択していくだけでOKです！

クラシックエディターの場合

リストを作成し、ツールバーの「スタイル」->「リスト装飾」から使用したい装飾を選択してください。