Cocoon装飾ブロック完全ガイド｜使い方・一覧・カスタマイズまとめ

Cocoonには、記事を見やすく整理できる装飾ブロック（ボックス・カード・FAQ・タイムラインなど）が数多く用意されています。

ただ、

• どの装飾ブロックを使えばいいのか分からない
• Cocoonのブロックを一覧で確認したい
• 使い方やカスタマイズ方法まで知りたい

と感じることもあります。

そこでこの記事では、Cocoon装飾ブロックを目的別に一覧で整理し、使い方・カスタマイズ記事までまとめて解説します。

Cocoon装飾ブロック一覧（目的別まとめ）

ここからは、Cocoonで使える装飾ブロックを目的別にまとめています。

気になるブロックがあれば、リンクから詳細記事へ進んでください。使い方やカスタマイズ方法まで詳しく解説しています。

このページを入口にして、気になる装飾ブロックから順番にチェックしてみてください。

用途に合わせて使い分けると、記事が見やすくなります。

Cocoon汎用ブロックの特徴・使い方・カスタマイズ

Cocoon汎用ブロックは、エディタでアイコン選択・色設定（ボーダー色・背景色・文字色）が自由にできるのが特徴。

Cocoonの基本装飾としてシンプルで使いやすく、さまざまな場面で活用できます。

見出しボックス

Cocoonの見出しボックスは、見出しと装飾を組み合わせて情報を分かりやすく整理できます。

記事の構成を整えたいときに便利です。

おすすめ用途

• セクションまとめ
• 重要ポイント整理
• 補足情報の表示
• 小見出しとして使用

→ 見出しボックスカスタマイズ

タブ見出しボックス

Cocoonのタブ見出しボックスは、見出しをタブ風デザインにできるブロックです。

セクションを分かりやすく区切ることができます。

おすすめ用途

• セクション区切り
• 重要ポイント整理
• 注意・補足の表示
• 見出し装飾

→ タブ見出しボックスカスタマイズ

ラベルボックス

Cocoonのラベルボックスは、注意・補足・ポイントなどをシンプルに強調できます。

文章の中で重要な情報を目立たせるのに最適です。

おすすめ用途

• 注意点表示
• 補足説明
• ポイント強調
• 重要情報の表示

→ ラベルボックスカスタマイズ

Cocoonボックス系装飾ブロック一覧と使い方

重要なポイントや補足情報を目立たせるCocoon装飾ブロックです。

文章の読みやすさを大きく改善できます。

白抜きボックス

Cocoonの白抜きボックスは、シンプルで見やすい装飾ボックスです。

文章・リスト・画像などをまとめて整理できます。

おすすめ用途

• 注意表示
• 情報補足
• 重要ポイント
• 読者へのメッセージ

ボーダー色や背景色を自由に変更でき、最もカスタマイズしやすいボックスです。

→ 白抜きボックスカスタマイズ

アイコンボックス

Cocoonのアイコンボックスは、アイコン付きで情報を分かりやすく表示できるブロックです。

i（情報）・!（アラート）・?（質問）などを視覚的に伝えられます。

アイコン + ボックス色の組み合わせはテーマ側で固定されています。

おすすめ用途

• 注意表示
• 情報補足
• 重要ポイント
• 読者へのメッセージ

→ アイコンボックスカスタマイズ

タブボックス

Cocoonタブボックスは複数の補足情報やポイントを整理して表示できるボックスです。

見出し付きで情報を切り替えて表示できるため、注意点・ポイント・補足などをコンパクトにまとめられます。

見出し文言はテーマ側で設定されており、数種類から選べます。

おすすめ用途

• MEMO表示
• 注意ポイント
• 補足整理
• 重要情報の強調

案内ボックス

Cocoonの案内ボックスは補足説明やガイド情報を分かりやすくまとめられるブロックです。

ボックス+文字色の組み合わせはテーマ側で固定されており、数種類から選べます。

おすすめ用途

• 補足説明
• ガイド表示
• 注意事項
• 関連情報

付箋風ボックス

Cocoonの付箋風ボックスはメモや補足情報をやさしく表示できる装飾ボックスです。

ボックス色はテーマ側で固定されており、数種類から選べます。

おすすめ用途

• ワンポイント
• メモ
• 注意書き
• 補足情報

Cocoon情報整理ブロック一覧（タブ・FAQ・タイムライン）

情報をコンパクトにまとめたり、切り替えて表示したりできるブロックです。

比較記事やFAQ、手順、補足説明などに向いています。

タイムライン（ステップブロック）

Cocoonのタイムラインは、手順をステップ形式で表示できるブロックです。

おすすめ用途

• 手順記事
• 設定ガイド
• 登録方法
• ステップ解説

→ タイムラインカスタマイズ

タブブロック

Cocoonのタブブロックは内容を切り替えて表示できる便利なブロックです。

複数の情報をコンパクトに整理でき、記事の見やすさが大きく向上します。

おすすめ用途

• 比較記事
• カテゴリー整理
• 機能説明
• 複数パターン紹介

→ タブブロックの使い方とカスタマイズ

アコーディオン（トグル）

Cocoonのアコーディオンはクリックすると開閉できるブロックです。

FAQや補足情報、注意事項などを折りたたんで表示できるため、情報量が多い記事でもスッキリ整理できます。

おすすめ用途

• FAQ
• 補足説明
• 注意事項
• 詳細情報の収納

→ アコーディオン（トグル）カスタマイズ

FAQボックス

CocoonのFAQボックスはよくある質問をまとめて表示できるブロックです。

角型ラベル・アコーディオンスタイルにも切り替えできます。

読者の疑問を解決しやすくなり、記事の信頼性や回遊率の向上にもつながります。

おすすめ用途

• レビュー記事
• 解説記事
• よくある質問ページ

→ FAQブロックカスタマイズ

Cocoon記事カード・ナビカード一覧と使い方

記事やページをカード形式で表示し、回遊率を高めるブロックです。

ブログカード

Cocoonのブログカードは記事リンクを自動でカード表示できるブロックです。

URLを貼るだけで見やすいリンクになるため、記事内リンクに最適です。

おすすめ用途

• 関連記事紹介
• 内部リンク
• 参考記事表示
• 詳細記事誘導

→ ブログカードカスタマイズ

ナビカード

Cocoonのナビカードはおすすめ記事や関連記事をカード形式で表示できます。

内部リンクとして非常に使いやすく、読者を次の記事へ自然に誘導できます。

おすすめ用途

• カテゴリー紹介
• 関連記事誘導
• まとめ記事導線
• 回遊率向上

→ ナビカードの使い方

人気記事ブロック

Cocoonの人気記事はアクセス数をもとに人気記事を表示できるブロックです。

読者がよく読んでいる記事を見せることで、クリック率と滞在時間を伸ばせます。

おすすめ用途

• トップページ表示
• サイドバー表示
• ピラーページ導線
• 回遊率向上

→ 人気記事ランキングカスタマイズ

新着記事・人気記事・カード表示

記事一覧をカード形式で表示できます。

おすすめ用途

• トップページ構成
• カテゴリー記事一覧
• ピラーページ表示
• 回遊導線

→ 新着・人気記事カスタマイズ（横並び方法）

Cocoon CTA・ボックスメニュー一覧と使い方

読者を次の行動へ誘導するための重要なブロックです。

CTAボックス

CocoonのCTAボックスはアフィリエイトリンクやおすすめページを目立たせるブロックです。

おすすめ用途

• 記事誘導
• 登録案内
• アフィリエイト導線
• まとめCTA

→ CTAボックスの自作カスタマイズを見る

ボックスメニュー

Cocoonのボックスメニューはアイコン付きメニューを表示できるブロックです。

おすすめ用途

• カテゴリー導線
• トップページ導線
• 記事一覧表示
• ナビゲーション

→ ボックスメニューカスタマイズ

Cocoonパターン・再利用ブロック

装飾ブロックと組み合わせて使うと便利な機能です。

パターン（再利用ブロック）

よく使う装飾やレイアウトを保存して、簡単に再利用できます。

作業時間を大きく短縮できる便利な機能です。

おすすめ用途

• テンプレート化
• よく使う装飾の保存
• 作業時間短縮
• デザイン統一

→ WordPressパターン機能の使い方

Cocoon補助ブロック・細かな機能

必ず使うものではありませんが、記事デザインを整える補助機能として活用できます。

必要なものだけ取り入れるのがおすすめです。

文字装飾・文章補助ブロック

文章の中で使えるシンプルな装飾機能です。読みやすさや強調に役立ちます。

• マーカー（重要な部分を強調）
• バッジ（短いラベル表示）
• インラインボタン（文章内のリンク）
• フォントサイズ（文字サイズ変更）
• ルビ（ふりがな）

文章を読みやすくしたいときに便利です。

コンテンツ表示・リンク導線ブロック

記事の内容を分かりやすく見せたり、リンク誘導に使うブロックです。

• 吹き出し（会話形式）
• ボタン（リンク誘導）
• 囲みボタン（強調リンク）
• アイコンリスト（見やすいリスト）
• 検索案内（検索ページへの誘導）
• プロフィールボックス（運営者紹介）
• テーブル（表）
  • テーブルにボタン
  • 記号（○△✕）付きテーブル

レビュー記事や解説記事でよく使われます。

レイアウト・データ表示ブロック

記事の構成やデータ表示を整えるためのブロックです。

• レーダーチャート（比較評価）
• ランキング（順位表示）
• テンプレート（再利用デザイン）
• 広告（広告表示）
• 2カラム
• 3カラム

トップページや比較記事、まとめ記事で活用できます。

装飾ブロックをカスタマイズする方法

装飾ブロックは、CSSを追加することでさらにおしゃれにできます。

基本の流れは次の通りです。

• 子テーマを使う
• CSSを追加する
• 必要に応じてPHPを追加
• ブロックスタイルを調整する

CSSの基本や編集方法については、こちらの記事で詳しく解説しています。

装飾ブロックをおしゃれにするコツ

• 色を統一する
  サイトカラーを決めて統一すると、デザインが整います。

• 使いすぎない
  装飾が多すぎると、逆に読みにくくなります。

• 余白を揃える
  余白を整えるだけで、見た目が大きく変わります。

よくある質問｜Cocoon装飾ブロック

まとめ｜Cocoon装飾ブロックは目的に合わせて使い分けよう

Cocoonには多くの装飾ブロックがありますが、重要なのは目的に合わせて使い分けることです。

構成整理 → 見出しボックス・ラベルボックス
補足説明 → アイコンボックス・案内ボックス
情報整理 → タブ・FAQ・タイムライン
回遊導線 → ナビカード・CTA・ボックスメニュー

このように使い分けることで、記事の読みやすさと回遊率が大きく向上します。

さらにデザインを整えたい場合は、CSSカスタマイズもあわせて確認してみてください。

Cocoonブロックを活用すると、サイトのデザインやレイアウトを柔軟に調整できます。

よりデザインを細かく調整したい方は「CSSカスタマイズガイド」、サイト全体の構成を作る場合は「Cocoonサイト型トップページの作り方」もあわせて参考にしてみてください。