Menu
カテゴリー
WordPressテーマ『SWELL』特化ブログ
  1. ホーム
  2. SWELL
  3. コアブロック
  4. 【SWELL】リストで使えるデザイン装飾と使い方【全24パターン】

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

広告
コアブロック

SWELLの購入やWordPressへのインストールがまだの方は以下の記事を参考に導入しましょう。

あわせて読みたい
SWELLの購入とインストール方法を解説 SWELLの購入とインストール方法を知りたいですか？本記事では、会員登録やDiscordコミュニティへの参加方法、SWELLを使うために必須な認証方法、未使用テーマを削除する理由まで解説しています。SWELLを使いたい方は是非ご覧ください。

こちらの記事で完了すること

  • 購入
  • 会員登録
  • Discordコミュニティ登録
  • WordPressへのインストール（親テーマと子テーマ）
  • ユーザー認証
  • 使わないテーマの削除

では、本題に入ります。

悩む人

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】リストの使い方

リストの挿入

管理画面メニューから、「投稿」＞「新規投稿を追加」を選択します。

（ブロック挿入ツールを切り替え）から、「ブロック」＞「テキスト」＞「リスト」を選択します。

「リスト」が挿入されました。

スタイルの設定

テキストを入力します。

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

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

インデント

※ ２段落目から「インデント」が使用できます。

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

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

インデント解除

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

これで解除されます。

インデントのスタイル

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

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

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

複数リストのブロック化

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

  • （グループ）
  • （横並び）
  • （縦積み）

グループ化されました。

今回は以上です。

コアブロック

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

よかったらシェアしてね！
  • URLをコピーしました！
目次