リスト（箇条書き）は文章ばかりの記事をより読みやすくするために絶対必要な要素です。
文字文字してる記事は読みたくないよぅ
リストを使うことで、ある程度記事を読みやすく（見やすく）することができます。
本記事ではWordPressテーマCocoonを使っているあなたへ
- ブロックエディタにおけるリストの簡単な使い方
- リストをボックスに入れる方法
これらを画像付きで分かりやすく説明していきます。
カスタマイズ不要！CSSの知識ゼロで全然余裕です
それでは見ていきましょう
リストの基本的な使い方
まずはリストの基本的な使い方から確認していきましょう。
リストブロックを呼び出す
ワードプレスの投稿画面からブロックの追加（⊕）→一般ブロック→リストと進んでください。※今のバージョンだとテキストっていうくくりにリストはあります。
そうすると「・」のブロックが出ますね。
そこに文字を書いてenterを押すと改行されて２個めの「・」が出てきます。2つ目を書いたらまたenter。っていう風にして箇条書きを書くことができます。
- 文字を書いてenter
- 2個目の文字を書いてまたenter
- そうすると箇条書きが書ける
番号付きリストに変換＆インデント
リストブロックを選択しているときにツールバーに出てくる機能があります。
説明は上の画像のまんまで、実際にやってみると下のような感じです。
- こんな感じで
- 箇条書きが番号になる
- インデントすると（２－１）みたいになる
- いんでんと
- インデント（２－２－１）
- 戻すこともできる
- 終わり
フォントの大きさ、色の変換
リストブロックを選択しているときにサイドバーに注目していただくと、フォントとテキストおよび背景の色を変更できます。
この機能を使うと下のようなリストができますね。
- 特大文字
- 青色文字
- 背景つけるだけで結構いい感じ
- 背景はグラデーションもできる
リストの基本は以上です。使い方ばっちりですね！
箇条書きをボックスに入れる方法：１
では基本がわかったところでちょっとだけ応用編です。リストだけだと味気ないので、ボックスの中に突っ込みます。
ブロックの追加（⊕）→Cocoonブロック→白抜きボックスと進みましょう
白抜きボックス
そしたら画面右側のサイドバーから、白抜きボックスの枠線・文字・背景の色を決めましょう。
これでボックスができたので、ボックスの中の「文章を入力、または/でブロックを選択」のところを左クリック。
そこで基本のやり方の通りにリストブロックを追加しましょう。ブロックの追加→一般ブロック→リストです。
これでボックスの中にリストが入りました。いくつか例を作ってみたので見てみてください。
- 実際にボックスの中にリストを入れています。
- こんな感じ
- ボックス内にリストの例２です。
- 色を工夫すれば黒板風にもできますね
- あなたもあなたのブログにあったリストを作ってみましょう
- リストはこんな風に
- 白抜きボックス以外の
- あらゆるブロックの中に
- 入れることができます
- 工夫してみましょう
- 白抜きボックスではなく
- タブ見出しボックスを使用した時の
- ボックスとリストの感じはこれ
- 白抜きボックスではなく
- ラベルボックスを使用した時の
- ボックスとリストの感じはこれ
箇条書きをボックスに入れる方法：２
2つ目の方法は「アイコンリスト」ブロックを使用します。ブロックの追加（⊕）→Cocoonブロック→アイコンリストを選択してください。
アイコンリストブロックを選択し、画面右側のサイドバーからアイコンの種類・アイコンの色・枠線・背景・文字の色を決めましょう。今回はチェックマークを使います。
これで箇条書きをボックスに入れる方法：２の説明は終了です。
WordPress/Cocoonのリスト機能を使いこなそう！
本記事では【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
ということで、Cocoonではどうやって箇条書きを上手につかうの？というところを説明してきました。
意外と簡単ですよね。あなたのブログにも箇条書きをたくさん使って、見やすい記事をめざしていきましょう！
Cocoonの「困った」を解決する記事
Cocoonの使い方
当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。
記事の書き方
特に本記事のように、記事を書くときに使うものについては下の記事で取りまとめています。読めばあなたの記事の幅が広がることでしょう。
あわせて読みたい【Cocoon】記事の書き方！投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
コメント