Cocoonの使い方｜ブログが見やすくなるボックス装飾まとめ

ブログ記事を書いていて、
「文章ばかりで読みにくい」
「どこが大事なのか伝わりにくい」
と感じたことはありませんか？

私は最近まで、タブボックスと白抜きボックスしか使っていませんでした。
でも、よく調べると、Cocoonには、記事を見やすく整理できるボックス装飾が豊富に用意されていました。
こんなにあるんだったら、もっと早く使えばよかった…
うまく使うことで、初心者でも読みやすく、伝わりやすい記事を作ることができます。

この記事では、

• Cocoonのボックス装飾の基本
• 種類ごとの特徴と使い分け
• 見出しボックスの使い方
  
  を初心者向けに分かりやすくまとめます。

Cocoonのボックス装飾とは？

Cocoonのボックス装飾とは、
文章を枠や背景で囲み、情報を目立たせる装飾機能のことです。

文章の中にメリハリをつけることで、

といった効果があります。

ボックスを使うメリット

Cocoonでボックス装飾を使うメリットは、主に次の3つです。

特に初心者ブログでは、ボックス装飾を使うだけで「ちゃんとした記事感」が出るのも大きなポイントです。

次では、実際に使えるボックスの種類を紹介します。

枠のみのボックス

案内ボックス

• 操作手順の説明
• 読んでほしいポイント

背景色付きで、読者の目を引きやすいボックスです。

色は全部で8種類あります。ボックスの色を決めると文字の色も決まります。

など、「ここは見てほしい」という場面で活躍します。

白抜きボックス

背景を白にすれば、周囲と自然になじむボックスです。

枠の色、背景の色、文字の色がアレンジできます。

• 記事の雰囲気を壊したくない
• さりげなく区切りたい

ときに便利です。

付箋風ボックス

付箋のようなデザインで、親しみやすい印象があります。

灰色、黄色、赤、青、緑の5種類から選べます。

• ワンポイントアドバイス
• ちょっとしたコツ

など、柔らかい内容におすすめです。

アイコンや定型句を選択するボックス

アイコンボックス

「i（情報）・？（質問）・！（アラート）」などのアイコンを選べるボックスです。
アイコンは10種類から選べます。ただし、アイコンの種類によって色は決まっていて、色のカスタマイズはできません。

• ポイント
• 補足
• 注意点

といった意味を、アイコンで直感的に伝えられるのが特徴です。

タブボックス

色付きのタブがついたボックスです。ラベルは16種類から選べます。ラベルは英語表記です。

枠の色、背景の色、文字の色がアレンジできます。
ただし、タイトルの文字の色は白なので、枠の色は濃い色を選びましょう。

• チェック（CHECK）
• ポイント（POINT）
• メモ（MEMO）

など、定型的な内容に向いています。

タイトルを自由につけられるボックス

見出しボックス

好きなタイトルを付けられる、汎用性の高いボックスです。アイコンは52種類から選べます。

枠の色、背景の色、文字の色がアレンジできます。
ただし、タイトルの文字の色は白なので、枠の色は濃い色を選びましょう。

• 使い方
• 手順
• まとめ

など、小見出し代わりとしても使えます。

タブ見出しボックス

見出しボックスに、タブ風のデザインが加わったものです。アイコンは52種類から選べます。タブボックスとの違いはタイトルに好きな文字を入れられる点です。

見出しボックスと同じく、枠の色、背景の色、文字の色がアレンジできます。
ただし、タイトルの文字の色は白なので、枠の色は濃い色を選びましょう。

• 視線を集めたい
• 強調したい見出し

におすすめです。

ラベルボックス

左上にタイトルが自由に入力できるボックスです。アイコンは52種類から選べます。

これも同じく、枠の色、背景の色、文字の色がアレンジできます。文字の色はタイトルと枠の中の文字の色が同じ色になります。

• 初心者向け
• 注意
• 重要

など、属性や意味付けに向いています。

「見出しボックス」の使い方

ここでは、よく使う見出しボックスを例に、実際の使い方を解説します。
今回は、下のような見出しボックスを作ってみます。

見出しボックスを挿入する

ブロックエディタで「＋」をクリックし、
ボックスと入力→「見出しボックス」をクリックします。

見出しボックスが表示されない場合は、すべて表示をクリックします。
すると、画面左側に表示されるので、見出しボックスをクリックします。

アイコンを選択する

見出しボックスが表示されるので、画面右側に表示されるアイコンを選択します。

もし、表示されない場合は、見出しボックスを選択した状態で、右上の設定をクリックし、ブロックを選択します。

アイコンは５２種類あります。見出しボックスに書く内容に合うものにしましょう。
また、noneを選択するとアイコンは表示されません。

枠の色、背景の色を選択する

色を変更することで、記事の雰囲気に合わせた装飾が可能です。

右側のブロックのところを下にスクロールすると、ボーダー色（枠の色）、背景色、文字の色（枠の中の文字のみ）が選べます。

まず、ボーダー色（枠の色）をクリックし、色を選択します。

次に、背景色をクリックし、色を選択します。

文字を入力する

同じようにして文字色も設定できますが、黒のままでいいので今回は設定しませんでした。タイトルの文字の色は、白で変更できません。

最後に文字を入力します。

入力した文字を選択し、一番左のマークをクリック

リストをクリックします

番号リストをクリック

完成です！

ボックス装飾を使うときの注意点

便利なボックス装飾ですが、使いすぎには注意が必要です。

「ここぞ」というポイントに絞って使うのがおすすめです。

まとめ｜Cocoonのボックスを使って読みやすい記事にしよう

Cocoonのボックス装飾を使うことで、ブログはぐっと見やすく、伝わりやすくなります。

• ボックスは目的別に使い分ける
• 見出しボックスは特に汎用性が高い
• 使いすぎず、記事全体のバランスを意識する

まずは1記事に1〜2種類から試してみると、Cocoonの便利さを実感できるはずです😊