【SWELL非公式マニュアル】リスト装飾の使い方

この記事では、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. リストの項目２

リスト装飾の使い方

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

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

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

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

SWELL公式マニュアル：リストで使えるデザイン装飾一覧