「リストの背景や文字の色付けをしたい」
「リストの機能を設定する項目が表示されない」
「CSSなしでおしゃれにカスタマイズしたい」
この記事では、そんな方に向けて、Cocoonでリスト(箇条書き)をカスタマイズする方法をお話しします。
かめコンパスこんにちは、かめコンパスです！
どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！
また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。
さっそく本題に入りましょう。
当ブログ愛用のWordPressテーマ
＼もっと早く乗り換えればよかった…／
使い心地バツグン、高機能でオシャレ！
Cocoonリスト(箇条書き)の使い方
Cocoonでリストの
をそれぞれ詳しく解説します。
リストの挿入方法
リストの挿入方法は、下記の通りです。
記事投稿画面で、+をクリックする
「リスト」をクリックする
これでリストの出来上がり！
リストのカスタマイズ機能を設定する方法
リストの機能を設定する方法は、下記の通りです。
挿入したリストを選択する
リストで使えるカスタマイズ機能は3つあります。
- 点を数字に変更
- インテンド
- 文字や背景の色
それぞれ解説します。
点を数字に変更
「数字のリスト」と「点のリスト」の違いです。
数字
- かめコンパス
- かめコンパス
- かめコンパス
点
- かめコンパス
- かめコンパス
- かめコンパス
「点」を「数字」に変更する方法は、下記の通りです。
リストを選択し、リストを選択をクリックする
順序付きリストをクリックする
これで数字のリストの出来上がり！
数字のリストには、下記2つのカスタマイズ機能があります。
- 最初の番号を1以外にする
- かめコンパス
- かめコンパス
- かめコンパス
- 数字を逆順にする
- かめコンパス
- かめコンパス
- かめコンパス
上記2つの機能を使い方は、下記の通りです。
リストを選択する
設定⇒ブロック⇒設定の順にクリックすると、機能の設定項目が表示される！
インデント
リストにインデントを使うと、下記のようになります。
- かめコンパス
- かめコンパス
- かめコンパス
- かめコンパス
- かめコンパス
インデントの使い方は、下記の通りです。
リストを選択し、インデントをクリックする
これでインデントできた！
- かめコンパス
- かめコンパス
- かめコンパス
文字や背景の色
リストの文字や背景の色をカスタマイズした場合、下記のようになります。
- 色の変更なし
- 背景のみ変更
- 文字のみ変更
- 文字と背景を変更
リストの文字や背景の色を変更する方法は、下記の通りです。
リストを選択する
設定⇒ブロックの順にクリックすると、色の設定項目が表示される！
Cocoonリスト(箇条書き)が入ったボックスの作り方
Cocoonでリストが入ったボックスの作り方は、下記2つあります。
それぞれ詳しく解説します。
アイコンリストを使う
アイコンリストの使い方は、下記の通りです。
+をクリックする
アイコンリストをクリックする
アイコンリストの出来上がり！
設定⇒ブロックの順にクリックし、色設定にある「ボーダー色」をクリックする
色を選ぶ
リストが入ったボックスの出来上がり！
アイコンリストのカスタマイズ機能
アイコンリストで使えるカスタマイズ機能は5つあります。
- アイコン
- アイコン色
- ボーダー色
- 背景色
- 文字色
下記、アイコンリストの機能を使った例です。
※準備中
任意のボックスにリストを入れる
任意のボックスにリストを入れる方法は、下記の通りです。
+をクリックする
白抜きボックスをクリックする
今回は「白抜きボックス」を選択しましたが、ボックスは全部で8種類あります。
ボックスの種類について詳しく知りたい場合は、下の記事を参考にしてください。
ボックスが挿入される
ボックス内のブロックを選択する
+⇒リストの順にクリックする
これでリストが入ったボックスの出来上がり！
おしゃれなカスタマイズ機能付きリスト(箇条書き)1選
私がよく使っている、おしゃれなカスタマイズ機能付きリストは、アイコンリストです。
アイコンリストを使えば…
- 好きなアイコンを付けられる
- 色の細かい設定ができる
- かんたんにリストが入ったボックスを作れる
というたくさんのメリットがあります。
使うリストを1つに絞れば、使うリストを選ぶ手間も省けるので、アイコンリストの使用をおすすめします。
かめコンパス私も通常のリストではなく、アイコンリストの方が使用頻度は高いよ！
リスト(箇条書き)の機能が表示されない原因と対処法
リスト内の文字や背景の色付けはできるけど、リスト自体の機能を設定する項目が表示されない場合は、下の画像のようになっているかと思います。
リストの機能が表示されない原因は、リストではなく、リスト内の項目を選択しているからです。
リスト内の項目を選択している場合は、下の画像のようになり、
リスト自体を選択している場合は、下の画像ようになります。
リスト自体を選択すれば、リスト自体の機能を設定する項目が表示されます。
リスト自体を選択する方法は、下記の通りです。
リストが挿入されているブロックを選択する
リストを選択、または記事投稿画面下にあるリストをクリックする
リスト自体の機能を設定する項目が表示された！
当ブログ使用「SWELL」はリスト(箇条書き)がオシャレ！
当ブログでは、2024年4月からWordPressテーマ「SWELL」を使っています。
SWELLでは、以下8パターンからリストのスタイルを選べます。
- デフォルト
- 目次風
- チェック
- マル
- 三角
- ×
- 丸数字
- 注釈
Cocoonと同じように、
- 点を数字に変更
- インテンド
- 文字や背景の色を変更
もできます。
点を数字に変更
- 数字
- 初期値の変更
- 逆順に変更
- 大文字
- 小文字
- ローマ数字大文字
- ローマ数字小文字
かめコンパスSWELLでは数字の種類が豊富だよ
インテンド
文字や背景の色を変更
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
- リスト
また、以下のようなSWELL独自のスタイルもあります。
- デフォルト
- 下線をつける
- 横並び
私は「下線をつける」リストのスタイルがお気に入りで、行間が広くなることで窮屈さがなくなります。
かめコンパス文字が詰まっていると読みにくいよね
リストをよりおしゃれにカスタマイズしたい人は、SWELLもおすすめですよ。
まとめ
今回は、Cocoonでリスト(箇条書き)をカスタマイズする方法を紹介しました。
以下の記事では、リスト以外のカスタマイズ方法も紹介しています。
また当ブログでは、Cocoonに関する記事をいくつか書いてます。
下のカテゴリーページにまとめていますので、のぞいてみてください。
かめコンパスためになったという人は“コメント”してくれると嬉しいです！
コメント