ブロクエディタでリストを使っていて、リストの中にリストを入れたいことってありますよね?
箇条書きが一番わかりやすいですから。
そのやり方に微妙につまづいたので、この記事で説明します。
この記事に書かれた方法は、WordPressテーマのSANGOのみに適用可能な内容があります。ご了承くささい。
リストをネストさせる方法
まず、リストブロックを追加し、ネストさせたい行も含めて箇条書きにします。

次に、ネストさせたい行を選択して、上部の右シフトボタンを押すとネストされます。

リストのネストができました。

さらに、ネストさせたい場合は、行を選んで、右シフトボタンを2回押すとできます。

1回目の右シフトでこうなります。

2回目の右シフトでさらなる入れ子にすることができます。

では、プレビューを見てみましょう。
リストの入れ子はできていますが、外枠の枠線が気になりますね。

リストを装飾する方法
外枠の枠線を消す
リストブロックの右上にある「リストブロックを選択」をクリック。
リストブロックが選択された状態になります。

方法1:その他設定で枠を消す
右MENUの ブロック>設定>その他設定 で「枠線を表示しない」をONにします。
このときリストブロックのスタイルはデフォルトのままです。

ブロックエディタ上では枠線は見えたままなのですが、プレビューすると消えています。

方法2:スタイルで枠を消す
右MENUの ブロック>設定>スタイル で枠のスタイルを選べます。
「シンプル」、「メイン」、「アクセント」にすると枠なしになります。

スタイルを「シンプル」に設定して、プレビューを見てみます。
方法1と方法2では、余白に違いがありそうです。

箇条書きのマークを順序番号に変える
リストブロックの右上にある「リストブロックを選択」をクリック。
上部の「順序付きリスト」をクリック。

箇条書きのマークを番号に変更できました。

リストの背景色を変える
背景色は、リストブロックの右上にある「リストブロックを選択」をクリックして、右MENUの ブロック>スタイル>背景 で選べます。

背景色が変わりました。

上の状態でプレビューすると、こうなります。
