WordPressの「Cocoon」テーマでは、「リスト」（WordPressのデフォルトのブロック）と「アイコンリスト」（Cocoonブロック）で、50＋種類のアイコンリストと7種類のナンバーリストが作れます。
さらに、アイコンやボーダーをカスタマイズしたり、「ボックス」（Cocoonブロック）と組み合わせたりすれば、CSSを編集しなくても他とは一線を画す印象的なリスト（箇条書き）が作成できます。
「リスト」の基本的な使い方とカスタマイズの仕方
「リスト」の基本的な使い方
「リスト」はWordPressのブロックエディターにデフォルトで入っているブロックです。
「リスト」の挿入
１．（編集画面で）左上にある「＋（ブロックインサーター）」をクリックするか、挿入したい行の右端にある「＋（ブロックを追加する）」をクリックする。
「ブロックを追加する」ボタンをクリックした際、ポップアップで出てきたウィンドウの中に「リスト」がなければ、「すべて表示」をクリック。
２．「リスト」をクリック。
デフォルトの「●」が表示されます。
「リスト」の操作
項目を増やす
「●」の横（リストと透けているところ）にテキストを入力し、「Enter」キーをクリック。
リストを終わらせる（これ以上項目を増やさない）ときは、「Enter」キーを2回クリック。
インデント（字下げ）
インデント（字下げ）は、次の段（列）の先頭を右にずらす（下げる）ことです。
１．普通にリストを作る。
- 項目
- 項目の説明
- 項目の説明
- 項目
- 項目の説明
- 項目の説明（詳細）
２．インデントしたい段（列）に、①クリックでカーソルを動かしたのち、➁ツールバーの「インデント（矢印の向きが右）」をクリック。
３．さらに先頭を下げたいときは、「インデント（矢印の向きが右）」を2回クリック。
先頭を左に戻したい（変更したい）ときは、「インデント（矢印の向きが左）」を、戻したい位置に移動するまでクリック。
インデントすると、デフォルトのアイコンが変わります。
- 1回インデントしたとき「（小さい）○」
- 2回したとき「■」
アイコンなしのテキストの挿入
以下のように、項目と項目の間に、アイコンなしのテキストを先頭をずらして挿入したい場合は、「Shift」キーを押しながら「Enter」キーをクリック。
「リスト」のカスタマイズ
「リスト」でCSSを編集せずにカスタマイズできるのは、
の４つです。
ナンバーリストへの変更
ナンバーリストは、アイコンの代わりに番号やアルファベット等を使って、項目の順序を明示したリストです。
- 普通にリストを作成したのち、画面左下の「ナビ」の「リスト」をクリックするか、リスト全体を囲む青枠が出るように、上図の「X」あたりをクリック。
- ツールバーに「数字リスト（デフォルト）」アイコンが出てくるのでクリック。
- 数字以外に変えたいときは、右側の「設定」内にある「リストスタイル」からお好みのスタイルを選択。
「リストスタイル」の下にある「初期値」はリストのいちばん最初の数字（またはアルファベット）です。
アイコンの変更
１．ナンバーリストに変更したときと同様に、アイコンを変えたい列がアイコンごと青枠で囲まれるように「X」あたりをクリック。
＊「ナビ」の「リスト」をクリックした場合は、リスト全体が青枠で囲まれ、上の場合だと、一番左の「●」を変更する形になります。
２．右のリストブロックの中にある「スタイル」をクリック。
３．お好みのアイコンをクリックして選択。
- 最初の2つはナンバーリストです。
- インデントした列ごとのアイコンも変更可能です。
- アイコンなしにはできません。（CSSの編集が必要です。）
ボーダー（囲み枠）の追加
１．アイコンを変更したときと同じように、「ナビ」の「リスト」か、「X」あたりをクリックして、右側に出てきたリストブロックの中にある「ボーダー」をクリック。
２．27種類ある選択肢の中からお好みのボーダーをクリック。
- ボーダーもインデントごとに挿入が可能です。
- 項目
- 項目の説明
- 項目の説明
- 項目
- 項目の説明
- 項目の詳細な説明
- 項目の説明
- ボーダーの色は変更できません。
テキストの色と背景色の変更
１．「ナビ」の「リスト」か、「X」あたりをクリックして、右側に出てきたリストブロックの中のある「スタイル」タブをクリック。
２．「色」の中の「テキスト」または「背景色」をクリックし、「テーマ」や「デフォルト」の中から好きな色を選ぶか、テーマの上の青枠内をクリックして、パレットにない他の色を選択。
- 「背景色」には単色だけでなく、グラデーションを選ぶことも可能です。
- インデントごとに違う色を選択することもできます。（背景色もテキストもすべて違う色を選んだら、すごいことになります。）
- 項目
- 項目の説明
- 項目の説明
- 項目
- 項目の説明
- 項目の詳細な説明
- 項目の説明
- デフォルトのアイコンを使っている場合のみ、テキストの色を変えるとアイコンの色も変わります。
「アイコンリスト」の基本的な使い方とカスタマイズの仕方
「アイコンリスト」の基本的な使い方
「アイコンリスト」はアイコン付きのリストが作れる「Cocoon」テーマ独自のブロックです。
「アイコンリスト」の挿入
１．左上にある「＋（ブロックインサーター）」をクリックするか、挿入したい行の右端にある「＋（ブロックを追加する）」→ポップアップで出てきたウィンドウの下部にある「すべて表示」をクリック。
２．左に出てきた検索ウィンドウに「アイコンリスト」と入力するか、スクロールして「Cocoonブロック」の中にある「アイコンリスト」を選択してクリック。
デフォルトのアイコン「▶」が表示されます。
「アイコンリスト」の操作
基本的な操作は「リスト」と同じですが、「アイコンリスト」にはリストのタイトルを入力する
箇所があります。
「アイコンリスト」のカスタマイズ
「アイコンリスト」でCSSを編集せずにカスタマイズできるのは、
の2つだけですが、中のリスト部分に関しては、
等のカスタマイズも可能です。
アイコンの変更
アイコンリストの「タイトルがある場合は入力」あたりをクリックすると、右に「アイコンリスト」ブロックが出てくるので、「スタイル設定」内の40種類のアイコンの中から好みのアイコンをクリック。
- アイコンは1種類しか選べません。（インデントした列ごとに変えることはできません。）
- アイコンなしにはできません。（CSSの編集が必要です。）
色の変更（アイコン・ボーダー・背景・文字）
１．アイコンを変更したときと同様に、「タイトルがある場合は入力」あたりをクリックし、表示された右の「アイコンリスト」ブロックの中にある「色設定」から変更したい項目を選んでクリック。
２．「テーマ」や「デフォルト」の中から好きな色を選ぶか、テーマの上にある枠内をクリックして、パレットにない他の色を選択。
- 文字色はタイトルからテキストまで1色しか選べません。
- ボーダーの種類は実践のみです。
ナンバーリストへの変更
「アイコンリスト」の中にナンバーリストはないので、「リスト」の「数字リスト」アイコンをツールバーに表示して使います。
「アイコンリスト」のリスト部分だけが青枠で囲まれるように、「X」あたりをクリックし、ツールバーに出てきた「数字リスト」アイコンをクリック。
その後の手順は「リスト」でのカスタマイズと同じです。
ボーダーの追加とテキストの色と背景の色の変更
ナンバーリストに変更したときと同様に、リスト部分だけが青枠で囲まれるようにクリックすると、「アイコンリスト」ブロックではなく、「リスト」ブロックが表示されます。
その後の手順は「リスト」でのカスタマイズと同じです。
- ボーダーの種類変更：「設定」内の「ボーダー」をクリック
- テキストの色と背景色の変更：「スタイル」タブをクリックしたのち、「テキスト」「背景」「リンク」をクリック。
リンクの色の変更（設定）は「リスト」ではデフォルトになっていません。（「アイコンリスト」の「リンク」ブロック→「スタイル」タブとクリックしたときだけ有効のようです。）
「ボックス」とリストの組み合わせ
「ボックス（囲み枠）」も「Cocoon」テーマ独自のブロックで、コンテンツを際立たせるのに役立ちます。
「ボックス」の種類
Cocoonには、CocoonブロックとCocoon汎用ブロックの中に、リストと組み合わせられる「ボックス」が8種類用意されています。
Cocoonブロック
- アイコンボックス
- アイコン付きボックス
- コンテンツに合わせて選べるアイコンは11種類
- 案内ボックス
- 色付きのボックス
- コンテンツに合わせて選べる色は9色
- 白抜きボックス
- 実線で囲まれたボックス
- 線の色は変更可能
- 付箋風ボックス
- 付箋のような枠で囲まれた色付きのボックス
- 選べる色は5色
- タブボックス
- タブ付きのボックス
- コンテンツに合わせて選べるタブは16種類
Cocoon汎用ブロック
- 見出しボックス
- テキストを自由に入力できる見出し付きのボックス
- 「アイコンリスト」で使うのと同じアイコンリストから、お好みのアイコンを見出しの前に挿入可能
- タブ見出しボックス
- テキストを自由に入力できる見出し用のタブがついたボックス
- 「アイコンリスト」で使うのと同じアイコンリストから、お好みのアイコンを見出しの前に挿入可能
- ラベルボックス
- テキストを自由に入力できる見出し用ラベルがついたボックス
- 「アイコンリスト」で使うのと同じアイコンリストから、お好みのアイコンを見出しの前に挿入可能
ボックスとリストの組み合わせ方
１．使いたい「ボックス」を挿入する。（「リスト」や「アイコンリスト」を挿入したときと同じように、左のブロックから選択。）
２．選んだボックスの枠内に表示される「＋」をクリックし、左のブロックの中から「リスト」（または「アイコンリスト」を選択してクリック。
ボックスの中に以下のようにリストが挿入されます。
挿入したリストもリストだけで使うときと同じようにカスタマイズできます。
まとめ
今回は、Wordpressの「Cocoon」テーマで、CSSを編集せずにインパクトのあるリストを作る方法を紹介しました。
「リスト」と「アイコンリスト」の2つのブロックのうち、どちらを使うかは、
- 使いたいアイコンがどちらにあるか
- どんなカスタマイズをしたいか
次第だと思います。
「ボックス」と組み合わせるかどうかも含め、いろいろと試してみてください。
WordPressのテーマ選びで悩んでいるなら、断然Cocoonがおすすめです！
Cocoonは無料テーマであるにもかかわらず、
- 内部SEO対策、レスポンシブ対応、表示速度の高速化、収益化といった様々な機能を搭載している
- 日本人が開発しているため、利用者が多く、ハウツー記事も多い
- エラー等が出た際、無料のCocoonフォーラムで開発者他に相談できる
- ConoHa WINGから簡単にセットアップできる
といったメリットがたくさんあります。
- 「リスト」で作れるリスト（箇条書き）の種類
- 「アイコンリスト」で作れるリスト（箇条書き）の種類
- 「リスト」の基本的な使い方とカスタマイズの仕方
- 「アイコンリスト」の基本的な使い方とカスタマイズの仕方
- 「ボックス」とリスト（箇条書き）の組み合わせ
