【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】

Cocoonリスト(箇条書き)ボックスに入れる Cocoon

リスト(箇条書き)は文章ばかりの記事をより読みやすくするために絶対必要な要素です。

文字文字してる記事は読みたくないよぅ

リストを使うことで、ある程度記事を読みやすく(見やすく)することができます。

本記事ではWordPressテーマCocoonを使っているあなたへ

  • ブロックエディタにおけるリストの簡単な使い方
  • リストをボックスに入れる方法

これらを画像付きで分かりやすく説明していきます。

カスタマイズ不要!CSSの知識ゼロで全然余裕です

それでは見ていきましょう

▼Cocoonにはまだあなたの知らないブロックがある▼

リストの基本的な使い方

まずはリストの基本的な使い方から確認していきましょう。

リストブロックを呼び出す

ワードプレスの投稿画面からブロックの追加(⊕)一般ブロックリストと進んでください。※今のバージョンだとテキストっていうくくりにリストはあります。

リストブロック

そうすると「・」のブロックが出ますね。

リストブロックの表示

そこに文字を書いてenterを押すと改行されて2個めの「・」が出てきます。2つ目を書いたらまたenter。っていう風にして箇条書きを書くことができます。

▼こんな感じでリスト(箇条書き)ができます▼
  • 文字を書いてenter
  • 2個目の文字を書いてまたenter
  • そうすると箇条書きが書ける

番号付きリストに変換&インデント

リストブロックを選択しているときにツールバーに出てくる機能があります。

番号付きリスト&インデント

説明は上の画像のまんまで、実際にやってみると下のような感じです。

  1. こんな感じで
  2. 箇条書きが番号になる
    1. インデントすると(2-1)みたいになる
    2. いんでんと
      1. インデント(2-2-1)
    3. 戻すこともできる
  3. 終わり

フォントの大きさ、色の変換

リストブロックを選択しているときにサイドバーに注目していただくと、フォントとテキストおよび背景の色を変更できます。

リストブロック選択中のサイドバー

この機能を使うと下のようなリストができますね。

  • 特大文字
  • 青色文字
  • 背景つけるだけで結構いい感じ
  • 背景はグラデーションもできる

リストの基本は以上です。使い方ばっちりですね!

箇条書きをボックスに入れる方法:1

では基本がわかったところでちょっとだけ応用編です。リストだけだと味気ないので、ボックスの中に突っ込みます。

ブロックの追加(⊕)Cocoonブロック白抜きボックスと進みましょう

白抜きボックス

白抜きボックス

白抜きボックス表示

そしたら画面右側のサイドバーから、白抜きボックスの枠線・文字・背景の色を決めましょう。

枠線・文字・背景の色を決める

これでボックスができたので、ボックスの中の「文章を入力、または/でブロックを選択」のところを左クリック。

文章を入力

そこで基本のやり方の通りにリストブロックを追加しましょう。ブロックの追加一般ブロックリストです。

これでボックスの中にリストが入りました。いくつか例を作ってみたので見てみてください。

  • 実際にボックスの中にリストを入れています。
  • こんな感じ
  • ボックス内にリストの例2です。
  • 色を工夫すれば黒板風にもできますね
  • あなたもあなたのブログにあったリストを作ってみましょう
  • リストはこんな風に
  • 白抜きボックス以外の
  • あらゆるブロックの中に
  • 入れることができます
  • 工夫してみましょう
タブ見出しボックス
  • 白抜きボックスではなく
  • タブ見出しボックスを使用した時の
  • ボックスとリストの感じはこれ
ラベルボックス
  • 白抜きボックスではなく
  • ラベルボックスを使用した時の
  • ボックスとリストの感じはこれ
▼Cocoonにはまだあなたの知らないブロックがある▼

箇条書きをボックスに入れる方法:2

2つ目の方法は「アイコンリスト」ブロックを使用します。ブロックの追加(⊕)Cocoonブロックアイコンリストを選択してください。

アイコンリストブロック

アイコンリストブロックを選択し、画面右側のサイドバーからアイコンの種類・アイコンの色・枠線・背景・文字の色を決めましょう。今回はチェックマークを使います。

アイコン選択や色の決定
このリストはタイトルが入力できます
  • 枠線に色を付ければ
  • ボックスの中に箇条書きができます
  • アイコンも50種類ほどありますので
  • いろいろ選んでみましょう
    • インデントはできますが
      • アイコンを「・」や「数字」
  • にはできないので注意が必要です

これで箇条書きをボックスに入れる方法:2の説明は終了です。

WordPress/Cocoonのリスト機能を使いこなそう!

本記事では【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】

ということで、Cocoonではどうやって箇条書きを上手につかうの?というところを説明してきました。

意外と簡単ですよね。あなたのブログにも箇条書きをたくさん使って、見やすい記事をめざしていきましょう!

▼Cocoonにはまだあなたの知らないブロックがある▼

Cocoonの「困った」を解決する記事

Cocoonの使い方

当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。

  • WordPressの初期設定
  • Cocoonのダウンロードとインストール
  • Cocoonの初期設定
  • 記事の書き方
  • カテゴリー・タグ・固定ページの作成
  • 外観・デザインの整え方
  • 収益化

記事の書き方

特に本記事のように、記事を書くときに使うものについては下の記事で取りまとめています。読めばあなたの記事の幅が広がることでしょう。
あわせて読みたい【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】

上記記事でまとめています

  • 記事作成の一連の流れ
  • 具体的な記事の書き方
  • リスト(箇条書き)の使い方
  • 吹き出しの使い方
  • ブログカードの使い方
  • テーブル(表)の使い方
  • 各種ボタンの使い方
  • ショートコードの使い方
  • しっておきたい投稿画面でよく使う機能

コメント