エディターで使える簡単デザイン! – リスト装飾編

2019 10/26
エディターで使える簡単デザイン! - リスト装飾編
記事上のウィジェットエリア

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

今回はその中でも「リスト装飾」に焦点を当てて解説していきます。

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

目次前広告表示エリア
目次

リストデザイン一覧

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

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

デフォルト

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

目次風

  • 目次風リストです
  • リストの項目1
    • 子リストの項目1
    • 子リストの項目2
  • リストの項目2

チェックリスト

  • チェックリストです
  • リストの項目1
    • 子リストの項目1
    • 子リストの項目2
  • リストの項目2

注釈リスト

  • 注釈リストです
  • リストの項目1
    • 子リストの項目1
    • 子リストの項目2
  • リストの項目2

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

デフォルト

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

目次風

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

番号塗りつぶしスタイル

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

追加装飾

上記のベースとなるリスト装飾に加え、追加装飾も可能です。
※現在はまだ「下線をつける」しか実装していませんが、今後追加していく予定です。

  • リストの項目1
  • リストの項目2
  1. リストの項目1
  2. リストの項目2

リスト装飾の使い方

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

通常の「リストブロック」を使用してリストを作成し、「スタイル」から使用したい装飾を選択してください。

リストブロックのスタイル

また、「スタイル」の下にある「– 追加スタイル –」と書かれたセレクトボックスから、追加装飾を選択可能です。(現在は「下線をつける」のみ)

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

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

リスト装飾のスタイル選択
記事下のウィジェットエリア

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

目次
目次