Cocoonのボックスの種類と使い方｜案内・注意・補足を使い分けて、入稿を速くするコツ

公開日: 2026年10月14日 ／ カテゴリ: WordPress入稿 ／ 執筆: エラバレル

「Cocoonのボックスが種類が多すぎて、どれを使えばいいか分からない」「記事ごとにボックスの使い方がばらばらで、サイト全体の統一感がない」。WordPressの無料テーマCocoonを使っているブロガーや、オウンドメディアの担当者から、よく聞く悩みです。

先に結論をお伝えします。Cocoonのボックスは、「アイコンボックス」「案内ボックス」「白抜きボックス」「付箋風ボックス」などの種類がありますが、ふだんの記事で使うのは、補足（情報）・注意・メモの3つと、見出しつきの白抜きボックスくらいで十分です。 大切なのは種類を覚えることより、「どんな内容のときに、どのボックスを使うか」をサイトのルールとして決めておくことです。ルールが決まれば、原稿の段階でボックスを指定でき、入稿も速くなります。

この記事では、Cocoonのボックスの種類と見た目の違い、案内・注意・補足の使い分けのルール、ブロックエディタでの入れ方、よくある失敗、原稿から自動でボックスにする方法までを説明します。

Cocoonのボックスとは？

Cocoonは、日本で広く使われている無料のWordPressテーマです。Cocoonには、記事の中の一部分を枠で囲んで目立たせる「ボックス」の機能が、最初から用意されています。

ボックスを使うと、次のような情報を、本文と区別して見せられます。

• 本文の補足や、知っておくと得な情報
• 読み飛ばしてほしくない注意点
• 手順のまとめや、チェックリスト
• 良い例・悪い例の比べ方

本文が長い記事でも、ボックスがあると、読む人は大事な部分を見つけやすくなります。特にスマートフォンで読む人は、画面をすばやく流し読みすることが多いため、枠や色で区切られた部分に目が止まりやすくなります。ただし、使いすぎると、どれが大事なのか分からなくなります。ボックスは「ここだけは読んでほしい」という場所の目印だと考えてください。

Cocoonのボックスの種類

Cocoonのボックスには、主に次の種類があります。名前や中の選択肢は、Cocoonの版によって少し違うことがあります。

アイコンボックスの主な種類

アイコンボックスは、アイコンで内容の性質が伝わるので、いちばん使いやすい種類です。主に次のものがあります。

• 補足情報（i）：本文を補う情報。「ちなみに」「豆知識」
• 補足情報（？）：疑問や質問の形の補足
• 補足情報（！）：注意してほしいこと
• メモ：覚えておきたいこと、まとめ
• コメント：筆者の一言
• OK・NG／GOOD・BAD：良い例と悪い例

アイコンボックスは、アイコンだけで内容の性質が伝わるので、ボックスに見出しをつけなくても読む人が迷いにくいのが長所です。サイトの中で「i は補足、！は注意」のように決めておけば、読む人も記事を読むうちに意味を覚えてくれます。

案内ボックスの主な種類

案内ボックスは、色の違いで意味を伝えます。英語の名前（プライマリー・インフォ・サクセス・ワーニング・デンジャーなど）で並んでいることが多く、「インフォ＝案内」「サクセス＝成功・完了」「ワーニング＝警告」「デンジャー＝危険」のように覚えておくと選びやすくなります。

白抜きボックス

白抜きボックスは、線の色を選べるシンプルな枠です。背景が白いので、中の文章が読みやすいのが長所です。見出しの行をつけて「この章のまとめ」「手順の要点」のように使うと、記事の中の区切りとして役立ちます。

案内・注意・補足の使い分けのルール

ボックスの種類がたくさんあると、書く人によって使い方がばらばらになりがちです。サイトの中で、次のように「内容」と「ボックス」の組み合わせを決めておくと、記事全体に統一感が出ます。

「注意」は本当に読み飛ばしてほしくない内容にだけ使うのがコツです。何でも注意のボックスに入れると、読む人は注意のボックスを読み飛ばすようになってしまいます。

1記事に入れるボックスの数の目安

ボックスの数に決まりはありませんが、1つの章（見出し2の区切り）に1つ程度が読みやすい目安です。続けて2つ以上のボックスが並ぶと、どちらが大事なのか分からなくなり、どちらも読まれにくくなります。ボックスとボックスの間には、必ず本文の段落をはさむようにしましょう。

ブロックエディタでボックスを入れる手順

Cocoonのボックスを、ブロックエディタで入れる手順です。

1. 記事の編集画面で、ボックスを入れたい場所の段落を選ぶ
2. 上の帯の「＋」（ブロック挿入ツール）を押すか、空の段落で「/」を入力する
3. 一覧の中の「Cocoonブロック」などのまとまりから、使いたいボックス（例：「アイコンボックス」）を選ぶ
4. 右側の設定サイドバーの「ブロック」のタブで、ボックスの種類（補足情報（i）、メモなど）や色を選ぶ
5. ボックスの中をクリックして、文章を入力する
6. プレビューで、パソコンとスマートフォンの見た目を確かめる

ボックスの中には、段落だけでなく、リストのブロックも入れられます。チェックリストのように、箇条書きでまとめたい内容に便利です。ボックスの外に文章を続けたいときは、ボックスの下の何もない部分をクリックするか、リスト表示でボックスの次の位置を選んでから、新しい段落を追加します。

すでにある段落を、ボックスで囲む

先に書いた段落を、あとからボックスで囲むこともできます。

1. 囲みたい段落のブロックを選ぶ（複数なら、Shiftを押しながら選ぶ）
2. ブロックツールバーのいちばん左のアイコン（ブロックの種類の変更）を押す
3. 一覧にボックスが出ていれば、選んで変換する

変換の一覧にボックスが出ない場合は、新しくボックスを入れて、中に段落を移すか、文章を貼り直してください。

よく使うボックスは「パターン」に登録しておく

毎回同じ種類・同じ見出しのボックスを使うなら、WordPressのパターン（再利用できるブロックのまとまり）に登録しておくと、呼び出すだけで使えます。

1. 設定を済ませたボックスを選ぶ（中の文章は「ここに注意を書く」などの仮の文でよい）
2. ブロックツールバーの「︙」（オプション）から「パターンを作成」を選ぶ
3. 「注意ボックス」など、分かりやすい名前をつけて保存する
4. 次からは、「＋」の一覧の「パターン」から名前で呼び出し、中の文章だけを書き換える

登録するときに「同期」の設定を選べる場合は、同期しない（呼び出すたびに独立したコピーになる）ほうを選んでください。同期する設定にすると、1つの記事で中身を書き換えたときに、ほかの記事のボックスまで同じ文章に変わってしまいます。ブロックエディタの基本の操作は、WordPressのブロックエディタの使い方で説明しています。

クラシックエディタの場合

クラシックエディタを使っている場合は、ボックスにしたい段落を選び、ツールバーのスタイルのメニュー（「スタイル」や「Cocoonスタイル」など）から、ボックスの種類を選びます。

ボックスの中の文章の書き方

ボックスは目に入りやすい分、中の文章が読みにくいと、かえって記事全体の印象を悪くします。ボックスの中の文章は、本文よりも短く、はっきり書くのがコツです。

1. 最初の一文で、言いたいことを言い切る

ボックスを見た人は、まず最初の一文だけを読んで、続きを読むかどうかを決めます。「〜な場合は、〜してください」「〜は、〜です」のように、最初の一文で結論を書きます。

• 読まれにくい例：「WordPressにはいろいろな設定があり、人によって使い方も違いますが、ここで気をつけたいのは…」
• 読まれやすい例：「ログインのパスワードは、外注先にも教えないでください。専用のアカウントを作って渡します。」

2. 3〜5行に収める

ボックスの中が長くなると、スマートフォンでは縦に長い枠になり、読む気がなくなります。3〜5行に収まらない内容は、本文で説明し、ボックスには要点だけを残します。

3. 項目が3つ以上なら箇条書きにする

「AとBとCに気をつけてください」のように、項目が3つ以上並ぶ場合は、箇条書きにします。チェックリストのように使うボックスは、1行に1つのことだけを書くと、読む人が自分で確かめやすくなります。

4. 本文と同じことをくり返さない

ボックスに、直前の本文と同じ内容を書く記事をよく見かけます。ボックスは「本文に書ききれなかった補足」か「本文の中で特に大事な一点」に使い、同じ説明のくり返しにはしないようにしましょう。

5. 太字やマーカーを重ねすぎない

ボックスの中の文章をさらに太字にしたり、マーカーを引いたりすると、強調が重なって、どこが大事なのか分からなくなります。ボックスに入れた時点で十分に目立っているので、中の文章の強調は、多くても1か所にしておきます。

よくある失敗と直し方

テーマを変えるときの注意

Cocoonのボックスは、Cocoonのテーマが持っている見た目の指定（デザインの設定）で表示されています。ほかのテーマに変えると、ボックスの枠や色が消えて、ただの段落のように見えることがあります。

テーマを変える予定がある場合は、次の点に気をつけてください。

• テーマを変える前に、ボックスを使っている記事がどれくらいあるかを確かめる
• 新しいテーマにも似たボックスの機能があるかを確かめる（SWELLの「キャプションボックス」など）
• 変えたあとに、ボックスを使っていた記事の表示を確認し、必要なら新しいテーマのボックスに置き換える

ボックスを使いすぎていない記事ほど、テーマを変えるときの手直しも少なくて済みます。

また、ボックスの中だけに大事な情報を書いていると、テーマを変えて枠が消えたときに、本文の流れの中で浮いた文章になってしまいます。ボックスを外しても意味が通じる文章にしておくと、どのテーマでも読みやすい記事になります。これは、検索エンジンやAIが記事を読むときにも同じです。AIは枠の見た目ではなく文章を読んでいるので、ボックスの中の文章も、前後の本文とつながる形で書いておくのが理想です。

原稿から、ボックスを自動で作る方法

記事の原稿をGoogleドキュメントで書いている場合、入稿のたびに、ボックスにする部分を探して、1つずつボックスを入れ直すのは手間がかかります。

手作業でやる場合のコツ

手作業で入稿するなら、原稿の段階で、ボックスにする部分を分かるようにしておくと、入稿の時間が減ります。

1. 原稿の中で、ボックスにしたい段落の前に【補足】【注意】【まとめ】のような目印を書く
2. 入稿するときは、目印のある段落だけをボックスに入れる
3. 目印の文字は、ボックスに入れたあとで消す

自動にする方法

エラバレルのドクポスを使うと、Googleドキュメントの原稿に決まった書き方でボックスを指定しておけば、WordPressに投稿するときに、Cocoon・SWELLのボックスに自動で変換されます。

[ボックス 種類=注意 タイトル=ここに気をつけて]
ログインのパスワードは、人に教えないでください。
[/ボックス]

種類には「情報」「注意」「質問」「メモ」「ポイント」「OK」「NG」などや、「赤」「青」「緑」「黄」などの色の名前を書けます。Cocoonの場合、タイトルを書かないと「注意」は補足情報（！）、「情報」は補足情報（i）のようなアイコンボックスになり、タイトルを書くと、見出しの行がついた白抜きボックスになります。

ドクポスは、GoogleドキュメントのURLを貼ると、WordPressの記事（下書き・予約・公開）を作るウェブサービスです。見出し・太字・リンク・箇条書き・表・画像も、WordPressのブロックに変換されます。吹き出しも [吹き出し 名前=太郎 位置=右]〜[/吹き出し] と書くだけで作れます。AIは使っていないので、文章は書き換わりません。5記事まで、カード登録なしで試せます。

吹き出しの使い方は、Cocoonの吹き出しの使い方で詳しく説明しています。SWELLを使っている方は、SWELLのふきだしの使い方もご覧ください。

よくある質問

Cocoonのボックスの色は変えられますか？

ボックスの種類によっては、右側の設定サイドバーで、線や背景の色を選べます。サイト全体の色を変えたい場合は、Cocoonの設定や、追加のCSS（デザインを指定するコード）で調整します。色を変えるときは、文字が読みにくくならないように注意してください。

ボックスは、検索の評価に影響しますか？

ボックスそのものが、検索の評価を上げたり下げたりすることはないと考えられます。ただし、ボックスの中に見出しを入れて構造が崩れたり、大事な情報がボックスの中だけに書かれていたりすると、記事の組み立てが伝わりにくくなります。本文で伝えるべきことは本文に書き、ボックスは補助として使ってください。

ボックスの中に画像や表を入れられますか？

ボックスの種類によっては、中に画像や表のブロックを入れられます。ただし、スマートフォンでは枠の中が狭くなるので、大きな表は、ボックスの外に置くほうが読みやすくなります。

吹き出しとボックスは、どう使い分ければいいですか？

吹き出しは、人物の一言や、読者との会話のような雰囲気を出したいときに使います。ボックスは、補足や注意など、情報を整理して見せたいときに使います。どちらも使いすぎると読みにくくなるので、1つの章にどちらか1つ程度が目安です。

Cocoonを更新したら、ボックスの見た目が変わりました。

テーマの更新で、見た目の指定が変わることがあります。気になる場合は、Cocoonの公式サイトの更新情報を確認してください。自分でCSSを追加している場合は、更新後に効いているかも確かめてください。

ライターに原稿を頼むとき、ボックスの指定はどう伝えればいいですか？

原稿の中で、ボックスにしたい段落の前後に、決まった目印を書いてもらうのが確実です。たとえば【注意】〜【/注意】のように囲んでもらえば、入稿の担当者は目印を探すだけで済みます。目印の書き方と、どの内容をどのボックスにするかのルールは、執筆マニュアルに例をつけて書いておきましょう。ルールがあいまいだと、ライターごとにボックスの使い方がばらばらになります。

過去の記事のボックスを、まとめて直す方法はありますか？

標準の機能では、記事をまとめて置き換える方法はありません。記事が多い場合は、よく読まれている記事から順に直していくのが現実的です。今後の記事でルールを守ることを優先しましょう。

まとめ

Cocoonのボックスの使い方のポイントをまとめます。

ドクポスなら、Googleドキュメントに書いたボックスや吹き出しの指定を、CocoonやSWELLのボックス・吹き出しに変換して、WordPressの記事を作れます。5記事まで、カード登録なしで試せます。

参考にした資料

• Cocoon（公式サイト）
• WordPress Block Editor（WordPress.org・英語）