【Cocoon】リストのカスタマイズ完全ガイド！箇条書きの行間を変更する方法も

この記事では、Cocoonでリストをカスタマイズする手順を詳しく解説します。あわせて箇条書きの行間を変更する方法もご案内します。

Cocoonのリストカスタマイズでまず押さえたいこと

Cocoonのリストカスタマイズを考えるときは、最初に「どこが気になっているのか」をはっきりさせることが大切です。というのも、箇条書きが読みにくく見える原因は一つではないからです。アイコンや枠の印象が強すぎることもあれば、項目どうしの間隔、本文の行の高さ、前後の余白が原因になっていることもあります。

まずは「どこを変えたいか」を切り分ける

まずは、気になっている部分をざっくり分けてみてください。

ここが曖昧なままだと、リストの装飾を変えたいのに本文設定を触ってしまったり、行間を整えたいのにデザインだけ変えて終わったりしやすくなります。

気になること	主に見る場所	考え方
見た目を整えたい	リストブロックの装飾	印象やデザインを調整する
箇条書きの行間が気になる	本文設定やCSS	読みやすさを調整する
リスト全体を目立たせたい	枠やボックス	重要な情報を目に入りやすくする
左右の余白が気になる	CSS	見た目の詰まり方を整える
本文とのバランスが悪い	本文設定とリスト設定	記事全体の統一感を見る

検索でCocoonのリストカスタマイズを調べる方は、装飾を整えたい気持ちが強いことが多いです。

一方で、Cocoonの箇条書きの行間を調べる方は、もっと読みやすくしたいという悩みが中心です。

この記事では、その両方を混ぜずに整理していきます。

標準機能でできることと、CSSが必要なこと

結論からお伝えすると、Cocoonは標準機能だけでもかなり使いやすいです。

リストブロックの装飾機能があり、本文の行の高さや行間の余白も設定画面から調整できます。

ただし、箇条書きの項目どうしの間隔だけを細かく変えたい、特定のリストだけ別の見た目にしたい、といった細かな調整ではCSSが向いています。

標準機能でやりやすいことは、次のような内容です。

• リストの雰囲気を変える
• 枠や装飾を付ける
• 本文全体の行の高さを整える
• 段落の上下の余白を調整する

反対に、CSSが向いているのは次のような場面です。

• 箇条書きの項目間だけを細かく変えたい
• 番号付きリストだけ別の見た目にしたい
• スマホだけ余白を少し詰めたい
• 特定のブロックだけ調整したい

最初から全部をCSSで何とかしようとすると、かえって遠回りになりやすいです。

まずは標準機能で土台を整えて、不足するところだけ補う流れが失敗しにくいです。

なぜ箇条書きの見た目で記事の印象が変わるのか

読者は記事を開いたとき、本文を一文字ずつ読む前に、まず全体をざっと見ています。

そのとき箇条書きが読みやすいと、それだけで「このページは分かりやすそう」と感じてもらいやすくなります。

逆に、項目が詰まりすぎていたり、余白が広すぎて間延びしていたりすると、内容を見る前に読みづらそうな印象を与えてしまいます。

• 項目が詰まっていて息苦しく見える
• 空きすぎてまとまりがない
• 装飾が強すぎて内容が入ってこない
• 本文と雰囲気が合っていない
• 要点なのに、逆に目に入りにくい

私は箇条書きを、ただ短い文を並べる場所ではなく、読者が内容を整理しながら読める場所だと考えています。

だからこそ、Cocoonの箇条書きは少し整えるだけでも、記事全体の読み心地が変わります。

Cocoonでリストをカスタマイズする基本手順

リストブロックを入れて、親ブロックを選ぶ

最初に大事なのは、箇条書きを作ったあとに、いまどのブロックを選んでいるかを確認することです。

設定が見つからないときは、文字の中にカーソルが入っているだけで、リスト全体のブロックを選べていないことがあります。

装飾を変えたいときは、リスト全体を選んだ状態で右側の設定を確認すると分かりやすいです。

基本の流れは次のとおりです。

• ブロックエディタでリストを追加する
• 項目を入力する
• リスト全体を選択する
• 右側の設定パネルを見る
• スタイルや装飾の項目を確認する

私も最初は、設定が見つからずに何度も迷いました。

ですが、親ブロックを選ぶ意識を持ってからは、どこを触ればいいかがかなり分かりやすくなりました。

見た目を変える基本は「装飾」と「枠」の組み合わせ

Cocoonのリストカスタマイズでは、細かい装飾を盛るより、まずどんな印象にしたいかを決めるほうがうまくいきます。

たとえば、手順を整理したいのか、メリットをやわらかく見せたいのかで、合う見せ方は変わります。

使いたい場面	向いている見せ方	印象
手順を説明したい	シンプルなリスト	整理されて見える
注意点をまとめたい	枠ありのリスト	見落としにくい
メリットを並べたい	やわらかい装飾	親しみやすい
結論を目立たせたい	ボックス併用	要点が伝わりやすい

装飾は便利ですが、増やしすぎると内容より見た目が勝ってしまいます。

読者が知りたいのは、凝ったデザインそのものではなく、知りたい内容がスッと頭に入ることです。

迷ったときは、少し物足りないくらいのシンプルさから始めるほうがまとまりやすいです。

リストだけでなく、周りとのバランスも整える

箇条書きは単体で見るとよく見えても、前後とのつながりが悪いと急に浮いて見えます。

そのため、リストだけではなく、その前後も一緒に整えることが大切です。

私は編集のとき、リストの前後を読んで、急に始まっていないか、読み終わったあとに置いていかれないかをよく確認します。

このひと手間だけでも、全体の流れがぐっと自然になります。

箇条書きの行間が気になるときに見るポイント

行間には実はいくつか種類がある

行間という言葉はひとつですが、実際には複数の意味が混ざっています。

ここを分けて考えると、必要な調整がはっきりします。

気になる間隔	意味	見直す方向
文字の行の高さ	1項目の中で折り返した行の高さ	本文設定やCSSを見る
項目どうしの間隔	1つの箇条書きと次の箇条書きの距離	リスト側の余白を考える
前後の空き	リストと本文や見出しの間の距離	全体の流れを見る
記事全体の行間	本文全体の読みやすさ	本文設定を見直す

よくあるのは、項目どうしの距離を直したいのに、本文全体の設定を大きく変えてしまうケースです。

そうすると、ほかの部分まで見え方が変わってしまい、かえって調整が難しくなります。

まずは、どの間隔が気になっているのかを見分けるところから始めてみてください。

本文全体の行間を整えると、箇条書きも見やすくなる

箇条書きだけを触る前に、本文全体のバランスを見直したほうが早く解決することがあります。

Cocoonには本文の行の高さと、段落の上下の余白を調整できる設定があります。

本文そのものが詰まりすぎていたり、逆にゆるすぎたりすると、箇条書きだけ整えても記事全体の印象は揃いません。

• 本文が詰まっていて、全体に圧迫感がある
• 本文はちょうどいいのに、リストだけ窮屈に見える
• 本文は読みやすいのに、リストだけ間延びする
• 見出しとリストの距離が近すぎる
• リストのあとだけ不自然に空いて見える

私も、箇条書きが気になるたびにリストだけ直していた時期がありました。

ですが、本文全体の行の高さを少し整えただけで、箇条書きまで自然に見えることが意外と多かったです。

読みやすい箇条書きに見える行間の目安

行間のちょうどよさは、文字サイズや記事全体のデザインでも変わります。

それでも共通して言えるのは、詰まりすぎず、空きすぎない中間を目指すと失敗しにくいということです。

• 短い項目が続くなら、間隔は少しだけ空ける
• 一項目が二行以上になるなら、行の高さは少しゆとりを持たせる
• スマホ中心なら、空きすぎるより少し締まって見えるほうがまとまりやすい
• 注意点や手順は、詰めすぎると読み落としやすい
• 本文より少し整理されて見えるくらいがちょうどいい

理想は、読者が行間を意識せずに読み進められる状態です。

目立たせようとしすぎず、でも窮屈には見せない、そのくらいの自然さを目指すと整いやすいです。

読みやすいリストにするための実践ルール

1項目は短く、1テーマ1メッセージにする

箇条書きが重たく見える原因は、行間よりも一項目の長さにあることがよくあります。

一つの項目に説明を詰め込みすぎると、見た目を整えても読みやすさは戻りません。

• 一つの項目に情報を入れすぎない
• 説明と結論を一緒にしすぎない
• 一息で読める長さを意識する
• 長くなるなら二つに分ける
• 箇条書きの中で段落のように書かない

私は、項目を見たときに一息で読めるかどうかをよく見ています。

そこで息が切れるようなら、内容を分けたほうがきれいに伝わることが多いです。

似た形で並べると、一気に読みやすくなる

箇条書きは、文の形がそろっているだけでかなり読みやすくなります。

見た目の装飾より、この効果のほうが大きいと感じることも少なくありません。

そろえたいポイント	意識すること
文末	「〜しやすい」「〜できる」など形をそろえる
情報の種類	全部メリット、全部注意点のように分ける
長さ	一つだけ極端に長くしない
視点	読者目線か書き手目線かを混ぜすぎない

見た目が少し整わないと感じるときも、文の形をそろえるだけで印象がガラッと変わることがあります。

行間ばかりに目が行くときほど、この基本を見直すと効果的です。

行間を調整したいときほど、装飾は控えめにする

行間が気になっているときに装飾まで一気に強くすると、何が読みづらさの原因なのか分かりにくくなります。

そのため、最初はなるべくシンプルな状態で整えるのがおすすめです。

• 枠や色を一度に増やしすぎない
• 本文の行間とリストの余白を同時に大きく変えない
• スマホ表示を見ながら調整する
• リストだけ目立たせすぎない
• 長文項目に強い装飾を重ねない

私は調整のとき、まず読みやすさが出るかを確認して、そのあとで必要なぶんだけ装飾を足します。

その順番にしたほうが、結果として自然にまとまりやすいです。

Cocoonで使いやすいリストデザインの考え方

手順解説に向く「すっきり整理型」

手順を説明する記事では、派手さよりも順番の分かりやすさが大切です。

そのため、シンプルで整理された見た目がいちばん使いやすいです。

• 装飾は控えめにする
• 余白は少しだけ確保する
• 一項目ごとの区切りを見やすくする
• 本文とのつながりを自然にする
• 長文でも疲れにくい形を選ぶ

操作方法や設定の流れを説明する記事では、この見せ方がもっとも安定します。

メリット紹介に向く「やわらか強調型」

メリットやおすすめポイントを並べるなら、少しやわらかい印象のリストが合います。

読者の不安をやわらげたい記事や、初心者向けの記事とも相性がいいです。

• やさしい印象の装飾を選ぶ
• 行間を少しゆったり見せる
• 項目数が多いときは広げすぎない
• 文章を短めにして軽く読めるようにする

ただし、やわらかく見せたいからといって、余白を広げすぎると間延びして見えます。

読みやすさとやさしさのバランスが大切です。

結論を目立たせる「ボックス併用型」

重要な結論や要点だけを印象に残したいなら、リスト単体よりボックスと組み合わせるほうが効果的です。

とくに、記事のまとめや結論パートでは使いやすい形です。

• 記事の要点を短く整理できる
• 読者の目が止まりやすい
• 長文の途中で区切りを作りやすい
• 持ち帰ってほしい情報を強調しやすい

ただし、どこでも多用すると全体がうるさく見えます。

ここぞという場所に絞って使うと、きれいに効きます。

箇条書きの行間を整えるときの注意点

スマホで見たときの詰まり方を必ず確認する

パソコンではちょうどよく見えても、スマホでは印象がかなり変わります。

一行で収まっていた項目が二行、三行に折り返すと、行間の見え方も大きく変わるからです。

• 二行以上になったときに苦しく見えないか
• 項目どうしの間隔が空きすぎていないか
• 見出しの直後で窮屈になっていないか
• リストの前後が不自然に離れていないか
• 長い言葉で崩れていないか

私は記事を書いたあと、スマホ表示で箇条書きを見て、想像以上に印象が違うことによく気づきます。

行間は、必ずスマホでも確認したいポイントです。

本文全体を変えすぎると、別の場所が崩れることがある

箇条書きだけが気になっているのに、本文全体の設定を大きく変えると、ほかの場所まで見え方が変わります。

そのため、全体設定は少しずつ触るのが安心です。

変えすぎた内容	起こりやすいこと	考えたいこと
本文全体の行の高さ	全体が間延びする	少しずつ調整する
段落の上下余白	本文とリストの切り替わりが不自然になる	前後の流れを見る
リストだけ極端に詰める	圧迫感が出る	項目の長さも見直す
左余白を減らしすぎる	箇条書きらしさが薄れる	目印が残る程度にする

少し変えて、表示を見て、また少し調整する。

地味ですが、この進め方がいちばん崩れにくいです。

装飾より先に、内容の整理をする

行間に悩んでいると、つい見た目の設定ばかり触りたくなります。

ですが、実際には内容の整理だけで読みやすさが戻ることもかなり多いです。

• 一項目を短くする
• 手順と注意点を分ける
• メリットとデメリットを別にする
• 長い説明は本文に戻す
• 一つのリストに情報を詰め込みすぎない

私も編集で迷ったときは、まず「この内容は本当に箇条書き向きか」を考えます。

ここが整うと、行間の悩みまで一緒に小さくなることが多いです。

CSSを使うべき場面と考え方

CSSが向いているのは「部分的な微調整」

CSSが本領を発揮するのは、全体の方向性が決まったあとです。

土台が整っていれば、細かな違和感をつぶすための手段としてとても便利です。

• 項目どうしの間隔だけ少し変えたい
• 番号付きリストだけ雰囲気を変えたい
• スマホだけ余白を調整したい
• 左右の詰まり方を少し整えたい
• 特定の場所だけ見せ方を変えたい

反対に、全体の形が決まっていないうちにCSSを増やすと、どこを直したのか自分でも分からなくなりやすいです。

追加する前に決めておくと迷わないこと

CSSに入る前に、次のことを言葉にしておくと、作業がかなりぶれにくくなります。

• 何を直したいのか
• どこにだけ効かせたいのか
• スマホでも同じ見え方でよいのか
• 本文全体まで変えてよいのか
• 見た目と読みやすさのどちらを優先するのか

この整理がないまま進めると、少し直しては別の場所が気になり、終わりが見えにくくなります。

小さな調整ほど、目的を先に決めておくことが大切です。

初心者ほど「小さく試す」のが正解

CSSと聞くと身構えてしまう方もいますが、いきなり大きく変えなければ心配しすぎなくて大丈夫です。

むしろ、初心者のうちは小さく試すほうが結果的にきれいに整います。

• まずは標準機能で整える
• それでも気になる部分を一つ決める
• 小さく試して見え方を確認する
• パソコンとスマホの両方で見る
• 問題がなければ次に進む

私もこの順番で進めるようになってから、迷う時間がかなり減りました。

一度で完成を目指すより、違和感を一つずつ減らしていくほうがうまくいきます。

Cocoonのリストカスタマイズでよくある失敗

設定場所が分からず、違うところを触ってしまう

リストの見た目を変えたいのに本文全体の設定を触ってしまったり、行間を整えたいのに装飾ばかり見てしまったりすることはよくあります。

迷ったときは、次の順番で整理してみてください。

• 見た目を変えたいのか
• 読みやすさを変えたいのか
• 全体を変えたいのか、一部だけ変えたいのか

この三つを切り分けるだけで、見る場所がかなり絞れます。

派手にしすぎて逆に読みにくくなる

Cocoonは見た目を整えやすいぶん、やろうと思えばかなり飾れます。

でも、実際によく読まれる記事は、意外とシンプルです。

• リストごとに違う装飾を使う
• 色や枠や強調を重ねすぎる
• 重要でない部分まで目立たせる
• 余白を広げすぎる
• 強調したい場所が多すぎてメリハリがなくなる

読者にとって大切なのは、迷わず読めることです。

迷ったら、足し算より引き算を意識するとまとまりやすいです。

行間だけで解決しようとしてしまう

見づらさの原因が、必ずしも行間とは限りません。

一項目が長すぎたり、情報の種類が混ざっていたりすると、行間を調整しても根本は変わりません。

見え方の悩み	原因になりやすいこと	見直したいこと
重たく見える	一項目が長い	文章を分ける
間延びして見える	余白が広すぎる	間隔を少し詰める
ごちゃついて見える	情報が混ざっている	リストを分ける
流し読みされる	強弱がない	見出しや補足を加える

見た目の設定は大切ですが、それだけでは足りないこともあります。まず内容、その次に見た目という順番で考えると、整えやすくなります。

読者に伝わる箇条書きを作るコツ

箇条書きの前に「何の一覧か」を一文で伝える

箇条書きは便利ですが、いきなり始まると読者が置いていかれることがあります。

そのため、前に短い一文を置くだけで流れがかなり自然になります。

• まずは基本の流れを確認しましょう
• ここではよくある原因をまとめます
• 次のポイントを意識すると整えやすくなります

ほんのひとことでも、「これから何が並ぶのか」が分かると読者は安心して読み進められます。

多すぎる箇条書きは分けて見せる

項目が多いと、一つのリストに全部まとめたくなります。

ですが、情報量が多すぎる箇条書きは、それだけで読みにくくなります。

• 数が多いときは小見出しで分ける
• 手順と注意点を別にする
• 似た内容どうしでまとめる
• 長い説明は本文に戻す
• 重要な順に並べる

私は、箇条書きが長くなったら、まず「同じ種類の情報だけでまとまっているか」を見ます。

それだけでも整理しやすくなります。

「読ませる箇条書き」と「流し読みしやすい箇条書き」を使い分ける

箇条書きには、じっくり読んでほしいものと、ざっと把握してほしいものがあります。

この違いを意識すると、行間や装飾の決め方も迷いにくくなります。

• 手順や注意点は、少し余白を持たせて読み落としにくくする
• メリット一覧は、一覧性を優先して少しコンパクトにする
• 結論のまとめは、印象に残る見せ方を選ぶ

同じ箇条書きでも、役割に合わせて見せ方を変えると、記事全体の完成度が上がります。

よくある質問

Cocoon リスト カスタマイズはCSSなしでもできますか？

はい、できます。Cocoonのリスト カスタマイズは、リストブロックの装飾や本文設定だけでもかなり整えられます。ただし、箇条書きの項目どうしの細かな間隔や、特定のリストだけに調整をかけたい場合は、CSSを使ったほうがやりやすいことがあります。

Cocoon 箇条書き 行間が気になるときは、どこから見直せばいいですか？

まずは、Cocoonの箇条書き 行間の悩みが、本文全体の行の高さなのか、項目どうしの間隔なのかを分けて考えるのがおすすめです。そのうえで、一項目が長すぎないか、前後の余白が広すぎないかも一緒に確認すると、原因が見つかりやすくなります。

cocoon リスト カスタマイズと cocoon 箇条書き 行間は同じ考え方で直せますか？

似ている部分はありますが、まったく同じではありません。

cocoonのリスト カスタマイズは見た目の印象を整える話が中心で、cocoonの箇条書き 行間は読みやすさを整える話が中心です。まずは標準機能で全体を整え、そのあとで必要な部分だけ細かく調整する流れが進めやすいです。

まとめ｜Cocoonの箇条書きは見た目と読みやすさを分けて整える

今日から最初にやってほしいのは、自分の記事の箇条書きを一つ開いて、「見た目を変えたいのか」「行間を整えたいのか」を切り分けることです。

ここがはっきりするだけで、Cocoonのリストカスタマイズはずっと進めやすくなります。