この記事では、Cocoonのリストの使い方やカスタマイズ方法をご紹介します。
塾長
リストにアイコンをつけたり、リストをボックスに入れる簡単なやり方もご紹介するから是非参考にしてみてね！
スマホのみでも編集できますよ。
【スマホでできる！】Cocoonのリストの使い方
まずはCocoonのリストの基本的な使い方をご紹介します。
- +マークをタップ
- ①検索窓に｢リスト｣と入力して②リストのマークをタップ
- 文字を入力しましょう
- スマホの｢改行｣ボタンを押せばリストが追加されます
- こんな感じでリストが作成できますよ
塾長
これがリストの基本的な使い方だよ！
Cocoonのリストカスタマイズ方法
それではこれからCocoonのリストのカスタマイズ方法をご紹介していきます。
塾長
リストにアイコンをつけたり、リストをボックスに入れるとっても簡単なやり方もご紹介するよ！
リストの基本的なカスタマイズ方法
まずは色を変えたり、リストを数字にしたりと、基本的なカスタマイズ方法からご紹介していきます。
リストの色を変える
リストは以下の方法で色を変えることができます。
- ①検索窓に｢リスト｣と入力して②リストのマークをタップ
- ③｢リスト｣のブロックを選択して④四角い設定マークをタップ
- ｢テキスト｣をタップして好きな色を選択しましょう
- こんな感じで色が変わりました！
リストを数字にする
リストは以下の方法で数字にできます。
①｢リスト｣のブロックを選択→②数字リストマークをタップ
▼こんな感じで数字のリストができました。
- ここに文字が入るよ
- ここに文字が入るよ
- ここに文字が入るよ
リストにアイコンをつける
次に、リストにアイコンを付けるやり方をご説明します。
- +マークをタップ
- ①検索窓に｢アイコンリスト｣と入力し②アイコンリストのマークをタップ
- ③｢アイコンリスト｣のブロックを選択して④四角い設定マークをタップ
- ⑤好きなアイコンを選びましょう！
⑥アイコンの色を変えることもできますよ
- こんな感じでアイコンリストが作成できました！
リストをボックスに入れる
▼続いてこんな感じでリストをボックスに入れる方法をご紹介します。
塾長
CSSコードをいじらずにできる簡単な方法だよ！
手順は先ほどのアイコンリストを使う時と同じです。
- +マークをタップ
- ①検索窓に｢アイコンリスト｣と入力し②アイコンリストのマークをタップ
- ③｢アイコンリスト｣のブロックを選択して④四角い設定マークをタップ
- ⑤好きなアイコンを選びます
⑥｢ボーダー色｣をタップしてボックスの色を選びましょう
塾長背景色などはお好みでカスタマイズしてみてね！
- こんな感じでアイコンリストがボックスの中に入りました！
ちなみに、｢アイコンリスト｣ではなく通常の｢リスト｣をボックスの中に入れる方法もご紹介します。
- +マークをタップ
- ①検索窓に｢ボックス｣と入力して②｢白抜きボックス｣のアイコンをタップ
- ③ボックスを選択して④四角い設定マークをタップ
- ⑤ボックスの色や背景色などを好きな色に設定
- 作成したボックスの中にある+マークをタップ
- ⑦検索窓に｢リスト｣と入力して⑧リストのマークをタップ
- これで通常のリストをボックスの中に入れることができたよ！
▼ボックスの種類と使い方について詳しく知りたい方はこちらを参考にしてみてください。
スマホでできる！Cocoonのリストカスタマイズ方法【アイコンをつけたりボックスに入れる簡単なやり方】まとめ
記事内でリストやアイコンリストを適宜使用すると、見やすくて読みやすい記事が作れます。
数字のリストを作ったり、色を変えたり…。アイコンの種類もいろいろあるので是非自分の好きなようにカスタマイズして使ってみてくださいね。
塾長
リストは読者の目を惹き大事なことを箇条書きで伝えやすいよ！
使いこなして見やすい記事を作ろう！