【Cocoon】リスト(箇条書き)のカスタマイズ!おしゃれなアイコン機能も設定できる

リストの背景や文字の色付けをしたい

「リストの機能を設定する項目が表示されない」

CSSなしでおしゃれにカスタマイズしたい

この記事では、そんな方に向けて、Cocoonでリスト(箇条書き)をカスタマイズする方法をお話しします。

かめコンパス

こんにちは、かめコンパスです!

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください!

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

さっそく本題に入りましょう。

目次

Cocoonリスト(箇条書き)の使い方

Cocoonでリストの

をそれぞれ詳しく解説します。

リストの挿入方法

リストの挿入方法は、下記の通りです。

STEP

記事投稿画面で、+をクリックする

「ブロック挿入ツールを切り替え」がある場所
STEP

「リスト」をクリックする

「リスト」がある場所
STEP

これでリストの出来上がり!

リストのカスタマイズ機能を設定する方法

リストの機能を設定する方法は、下記の通りです。

STEP

挿入したリストを選択する

挿入したリストを選択している様子
STEP

設定ブロックの順にクリックし、表示された項目で機能設定!

「設定」、「ブロック」がある場所と、機能設定が表示される場所

リストの機能が表示されない場合は、後ほど解説します。

リストで使えるカスタマイズ機能は3つあります。

  • 点を数字に変更
  • インテンド
  • 文字や背景の色

それぞれ解説します。

点を数字に変更

数字のリスト」と「のリスト」の違いです。

数字

  1. かめコンパス
  2. かめコンパス
  3. かめコンパス

  • かめコンパス
  • かめコンパス
  • かめコンパス

「点」を「数字」に変更する方法は、下記の通りです。

STEP

リストを選択し、リストを選択をクリックする

リストを選択している様子と、「リストを選択」がある場所
STEP

順序付きリストをクリックする

順序付きリストがある場所
STEP

これで数字のリストの出来上がり!

数字のリストには、下記2つのカスタマイズ機能があります。

  • 最初の番号を1以外にする
  1. かめコンパス
  2. かめコンパス
  3. かめコンパス
  • 数字を逆順にする
  1. かめコンパス
  2. かめコンパス
  3. かめコンパス

上記2つの機能を使い方は、下記の通りです。

STEP

リストを選択する

リストを選択している様子
STEP

設定ブロック設定の順にクリックすると、機能の設定項目が表示される!

「設定」、「ブロック」と機能の設定項目がある場所

最初の番号を1以外にしたい場合は、初期値から変更します。
数字を逆順にしたい場合は、リストの数字を逆順にするから変更します。

インデント

リストにインデントを使うと、下記のようになります。

インデントとは…文章の頭に空白を入れることです。

  • かめコンパス
    • かめコンパス
    • かめコンパス
      • かめコンパス
  • かめコンパス

インデントの使い方は、下記の通りです。

STEP

リストを選択し、インデントをクリックする

リストを選択している様子と、「インデント」がある場所
STEP

これでインデントできた!

  1. かめコンパス
    • かめコンパス
  2. かめコンパス

インデントは、リストの2行目以降のみできます。

文字や背景の

リストの文字や背景の色をカスタマイズした場合、下記のようになります。

  • 色の変更なし
  • 文字のみ変更
  • 文字と背景を変更

リストの文字や背景の色を変更する方法は、下記の通りです。

STEP

リストを選択する

挿入したリストを選択している様子
STEP

設定ブロックの順にクリックすると、色の設定項目が表示される!

「設定」、「ブロック」と色を変更する場所

Cocoonリスト(箇条書き)が入ったボックスの作り方

Cocoonでリストが入ったボックスの作り方は、下記2つあります。

それぞれ詳しく解説します。

アイコンリストを使う

アイコンリストの使い方は、下記の通りです。

STEP

+をクリックする

「ブロック挿入ツールを切り替え」がある場所
STEP

アイコンリストをクリックする

「アイコンリスト」がある場所
STEP

アイコンリストの出来上がり!

アイコンリストができた様子
STEP

設定ブロックの順にクリックし、色設定にある「ボーダー色」をクリックする

「設定」、「ブロック」、「ボーダー色」がある場所
STEP

色を選ぶ

ボーダー色を選んでいる様子
STEP

リストが入ったボックスの出来上がり!

リストが入ったボックスができた様子

アイコンリストのカスタマイズ機能

アイコンリストで使えるカスタマイズ機能は5つあります。

  • アイコン
  • アイコン色
  • ボーダー色
  • 背景色
  • 文字色
アイコンリストの機能を設定する場所

下記、アイコンリストの機能を使った例です。

※準備中

任意のボックスにリストを入れる

任意のボックスにリストを入れる方法は、下記の通りです。

STEP

+をクリックする

「ブロック挿入ツールを切り替え」がある場所
STEP

白抜きボックスをクリックする

「白抜きボックス」がある場所

今回は「白抜きボックス」を選択しましたが、ボックスは全部で8種類あります。

ボックスの種類について詳しく知りたい場合は、下の記事を参考にしてください。

STEP

ボックスが挿入される

STEP

ボックス内のブロックを選択する

ボックス内のブロックを選択している様子
STEP

+リストの順にクリックする

「ブロック挿入ツールを切り替え」、「リスト」がある場所
STEP

これでリストが入ったボックスの出来上がり!

おしゃれなカスタマイズ機能付きリスト(箇条書き)1選

私がよく使っている、おしゃれなカスタマイズ機能付きリストは、アイコンリストです。

アイコンリストを使えば…

  • 好きなアイコンを付けられる
  • 色の細かい設定ができる
  • かんたんにリストが入ったボックスを作れる

というたくさんのメリットがあります。

使うリストを1つに絞れば、使うリストを選ぶ手間も省けるので、アイコンリストの使用をおすすめします。

かめコンパス

私も通常のリストではなく、アイコンリストの方が使用頻度は高いよ!

リスト(箇条書き)の機能が表示されない原因と対処法

リスト内の文字や背景の色付けはできるけど、リスト自体の機能を設定する項目が表示されない場合は、下の画像のようになっているかと思います。

リスト自体の機能を設定する項目が表示されない様子

リストの機能が表示されない原因は、リストではなく、リスト内の項目を選択しているからです。

リスト内の項目を選択している場合は、下の画像のようになり、

リスト内の項目を選択し、リスト内の項目の機能設定が表示されている様子

リスト自体を選択している場合は、下の画像ようになります。

リスト自体を選択し、リスト自体の機能設定が表示されている様子

リスト自体を選択すれば、リスト自体の機能を設定する項目が表示されます。

リスト自体を選択する方法は、下記の通りです。

STEP

リストが挿入されているブロックを選択する

リストが挿入されているブロックを選択している様子
STEP

リストを選択、または記事投稿画面下にあるリストをクリックする

「リストを選択」、「リスト」がある場所
STEP

リスト自体の機能を設定する項目が表示された!

リスト自体の機能を設定する項目が表示された様子

まとめ

今回は、Cocoonでリスト(箇条書き)をカスタマイズする方法を紹介しました。

以下の記事では、リスト以外のカスタマイズ方法も紹介しています。

また当ブログでは、Cocoonに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

Cocoonでリスト(箇条書き)のおしゃれな機能設定の記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次