【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です。
  • 色を工夫すれば黒板風にもできますね
  • ボックス内にリストの例3です
  • 枠線と背景の色を同じ色にしています
  • 僕はこのボックスリストを多用しています
  • あなたもあなたのブログにあったリストを作ってみましょう
  • リストはこんな風に
  • 白抜きボックス以外の
  • あらゆるブロックの中に
  • 入れることができます
  • 工夫してみましょう
タブ見出しボックス
  • 白抜きボックスではなく
  • タブ見出しボックスを使用した時の
  • ボックスとリストの感じはこれ
ラベルボックス
  • 白抜きボックスではなく
  • ラベルボックスを使用した時の
  • ボックスとリストの感じはこれ
▼Cocoonにはまだあなたの知らないブロックがある▼

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

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

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

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

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

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

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

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

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

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

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ブログをツイッターと連携する具体的な手順
【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】おすすめカードでトップページ等をカスタマイズしよう!
【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント