WordPressのブロックエディタでリストの中にリストを入れる方法と装飾のやり方

ブロクエディタでリストを使っていて、リストの中にリストを入れたいことってありますよね?
箇条書きが一番わかりやすいですから。

そのやり方に微妙につまづいたので、この記事で説明します。

この記事に書かれた方法は、WordPressテーマのSANGOのみに適用可能な内容があります。ご了承くささい。

リストをネストさせる方法

まず、リストブロックを追加し、ネストさせたい行も含めて箇条書きにします。

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

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

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

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

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

では、プレビューを見てみましょう。

リストの入れ子はできていますが、外枠の枠線が気になりますね。

リストを装飾する方法

外枠の枠線を消す

リストブロックの右上にある「リストブロックを選択」をクリック。
リストブロックが選択された状態になります。

方法1:その他設定で枠を消す

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

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

方法2:スタイルで枠を消す

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

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

箇条書きのマークを順序番号に変える

リストブロックの右上にある「リストブロックを選択」をクリック。
上部の「順序付きリスト」をクリック。

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

リストの背景色を変える

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

背景色が変わりました。

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