WordPressテーマ「Cocoon」で、リストブロックやボックス（囲み枠）を使って、目を引き、分かりやすい箇条書きを作る方法をご紹介します。
ブロックエディターを使って初心者でも簡単にできます。
文章だけだと単調になる記事をリストを使うことで、アクセントをつけ、要点を一目で分かるようにできます。
ここでは、リストブロック（ブロックエディター）の基本的な使い方と、ボックスとリストブロックの組み合わせを中心にご紹介します。
リストブロック（箇条書き）の基本的な使い方（WordPress標準）
リストブロック（箇条書き）の挿入方法
ブロックエディターのブロック追加ボタン「＋」をクリックし、開いたウィンドウ下の「すべて表示」をクリック。
ブロックのリストから「リスト」を選択してクリック
以下のように点が表示されます。
点の後にテキストを書き、Enterキーを押すと、2つ目の点が表示されます。
Enterキーを押して、項目を増やしていきます。
以下のようなリストができます。
リストブロック（箇条書き）の基本操作
先頭が数字のリストにする
デフォルトでは先頭が点のリストになっていますが、ワンタッチで先頭が数字のリストにもできます。
リストの項目を選択した状態で、上に表示されるツールバーの数字リストのアイコンをクリックすると、数字のリストになります。
各項目の下に説明文などを入れる
リストでEnterキーを押すと、リストの項目が増えていきますが、項目の下に説明文を入れたい場合は、Shiftキーを押しながらEnterキーを押すと、項目（先頭の点）が増えずに、改行できます。そこに説明文などを入れることができます。
背景色を付ける
リストブロックに背景色を付けることができます。
リストブロックを選択した状態で、右側の「色」＞「背景」をクリックすると、色のパレットが表示されるので、色を選択します。
以下のように背景色が付きます。
テキストをコピペしてから箇条書きにする方法
テキストをコピペしてから箇条書きにする場合、まず、段落ブロックにテキストを入れて、その後にリストにすることもできます。
例えば、以下のようなテキストが段落ブロックに入っている場合
段落ブロックを選択した状態で、上部ツールバーの左端にあるアイコン「段落ブロックタイプまたはスタイルを変更」をクリックします。
「リスト」を選択してクリック。
以下のようにリストに変更されます。
ボックスにリストブロック（箇条書き）を入れる方法（Cocoon）
リストブロックに背景色を付けるだけで、目を引く箇条書きになりますが、ボックスの中に入れることで、さらに見やすい箇条書きを作ることができます。
白抜きボックスにリストを入れる
「白抜きボックス」と「リスト」の組み合わせは、シンプルで使いやすい箇条書きです。
まず、白抜きボックスを挿入します。
ブロックエディターのブロック追加ボタン「＋」から「白抜きボックス」を追加します。
白抜きボックス内のブロック追加ボタン「＋」をクリックし、「リスト」ブロックを追加します。
白抜きボックスの中にリストブロックが追加されました。
リストブロックのボーダー色、背景色、文字色は、リストブロックを選択した状態で、右の「色設定」で設定できます。
ボックスやリストの選択がうまくいかない時
ボックスの中にリストブロックが入った状態で、それぞれをうまく選択できない場合、ナビを使うと、簡単に選択できます。
編集画面の下の方にある、ブロックの階層を表示するナビで、目的のブロックをクリックすると、選択できます。
以下の画像はリストブロックを選択した状態ですが、ナビの「白抜きボックス」をクリックすると、「白抜きボックス」を選択した状態に変わります。
見出し・タブ見出し・ラベルボックスにリストを入れる
「見出しボックス」「タブ見出し」「ラベルボックス」をリストブロックに入れて、キレイな箇条書きを作ることができます。
ブロック一覧の中の「Cocoon汎用ブロック」から選択、挿入します。
▼「見出しボックス」の中に「リストブロック」
▼「タブ見出しボックス」の中に「リストブロック」
▼「ラベルボックス」の中に「リストブロック」
「タブ見出しボックス」「ラベルボックス」にアイコンを表示する方法
「タブ見出しボックス」と「ラベルボックス」は、見出し前にアイコンを表示できます。
右の「アイコン」で選択します。
アイコンリストを使う
Cocoonの「アイコンリスト」を使うと、先頭がアイコンのリストを作ることができます。
アイコンリストの挿入方法です。
「アイコンリスト」ブロックを追加します。
アイコンの種類、アイコン色、ボーダー色、文字色の選択は、右側の設定を使います。
▼「アイコンリスト」による箇条書きの一例です。
ボックスの中に「アイコンリスト」を入れる
また、ボックスと組みあわせて、様々な箇条書きができます。
▼「見出しボックス」の中に「アイコンリスト」を入れた例です。
リストの点を消す方法
「リスト（箇条書き）は使いたいが、先頭の点や数字が必要ない」という場合の対応方法です。
リストブロックは、ツールバーで、先頭の表示を「点」と「数字」に切り替えられますが、「表示なし」はないので、CSSを使います。
例えば、以下のような場合に先頭の点を消します。
まず、子テーマのCSS（または「追加CSS」）に以下のコードを記載します。
/* リスト スタイルなし */
.list-style-none {
list-style: none;
}次に、該当のリストブロックを選択し、右側の設定内「高度な設定」＞「追加CSSクラス」にlist-style-none を記載します。
以下のように、先頭の点が消えました。
まとめ
以上、リスト（箇条書き）の作成方法をご紹介しました。
CSSを使わずに、キレイで見やすい箇条書きが簡単にできます。
また、Cocoonは、数種類のボックスと組みあわせることで、バリエーションに富んだ箇条書きを作成できます。
リストブロックを使いこなして、読みやすい記事を作成しましょう。
