Cocoonブロックはどれ使う？｜種類・使い方・デザインカスタマイズまとめ

Cocoonには、記事を見やすく整理できる装飾ブロックがたくさんそろっています。

ただ実際に使おうとすると、

• どれを使えばいいのかちょっと迷う
• 一覧でざっくり確認したい
• 使い方や違いも知りたい

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

そこでこの記事では、Cocoonの装飾ブロックを「目的別」にまとめて整理しました。まずは「結局どれを使えばいいの？」がスッキリするように、全体像から見ていきますね。

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

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

気になるものがあれば、そのまま詳細記事へ進めるようになっています。使い方やカスタマイズ方法もあわせて紹介しているので、必要なところから見てみてください。

このページを「入口」にして、気になるものから少しずつ触っていくのがおすすめです。

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

Cocoon汎用ブロック（まずはここから）

• 見出しボックス
• タブ見出しボックス
• ラベルボックス

見出しボックス

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

おすすめ用途

• セクションをスッキリまとめたいときに使いやすい
• 補足や注意をちょっと目立たせたいときに
• 小見出しとして使っても〇

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

タブ見出しボックス

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

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

おすすめ用途

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

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

ラベルボックス

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

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

おすすめ用途

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

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

Cocoon｜強調・説明に使うボックス系

• 白抜きボックス
• アイコンボックス
• タブボックス
• 案内ボックス

このあたりはちょっとした説明や補足を見せたいときに便利です。「ここだけは伝えたい」という情報を、自然に目立たせることができます。

白抜きボックス

Cocoonの白抜きボックスは、シンプルで一番使いやすい装飾のひとつです。

文章・リスト・画像などもまとめやすく情報整理に向いています。

おすすめ用途

• 注意点をまとめるとき
• 補足情報を入れるとき
• 大事なポイントを整理したいとき

余白や色を調整すれば、とても自由度が高く使えます。

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

アイコンボックス

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

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

おすすめ用途

• 注意点
• 情報補足
• 重要ポイント

同じ情報でも、少し見せ方を変えるだけで印象が変わります。

アイコン + ボックス色の組み合わせはテーマ側で固定されていまが、CSSを使えば色や形を自由に変更できます。

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

タブボックス

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

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

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

おすすめ用途

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

案内ボックス

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

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

おすすめ用途

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

付箋風ボックス

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

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

おすすめ用途

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

Cocoon｜情報を整理して見せるブロック（タブ・FAQ・タイムライン）

• タイムライン（ステップブロック）
• タブブロック
• アコーディオン（トグル）
• FAQボックス

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

うまく使えば長い記事でも読みやすくなります。

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

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

おすすめ用途

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

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

タブブロック

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

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

おすすめ用途

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

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

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

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

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

おすすめ用途

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

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

FAQボックス

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

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

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

おすすめ用途

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

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

Cocoon｜記事・コンテンツを表示するブロック

• ブログカード
• ナビカード
• 人気記事
• 新着記事・人気記事（横並び）

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

自然に別の記事へ誘導できるのでサイト全体の流れを作りやすくなります。

ブログカード

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

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

おすすめ用途

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

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

ナビカード

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

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

おすすめ用途

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

→ ナビカードの使い方

人気記事ブロック

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

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

おすすめ用途

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

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

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

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

おすすめ用途

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

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

Cocoon｜CTA・ボックスメニュー・導線系ブロック

• CTAボックス
• ボックスメニュー

読者に「次の行動」を促したいときに使うブロックです。

記事の最後や途中に入れると、流れがスムーズになります。

CTAボックス

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

おすすめ用途

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

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

ボックスメニュー

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

おすすめ用途

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

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

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

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

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

よく使うレイアウトを保存しておける機能です。

一度作っておけば、何度でも呼び出せるのでかなり時短になります。

おすすめ用途

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

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

Cocoon｜その他の補助ブロック

Cocoonには、細かい補助機能もいろいろあります。

文章の強調や装飾、レイアウト調整などに使えるものです。

必要なときだけ使うイメージでOKです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Cocoonにはたくさんの装飾ブロックがありますが、全部を覚える必要はありません。

まずは用途ごとにざっくり分けて、

• 整理したいとき
• 補足したいとき
• 導線を作りたいとき

この3つを意識するだけでも、かなり記事が見やすくなります。

もし迷ったら、

• 見出しボックス
• アイコンボックス
• タブボックス

このあたりから使ってみるのがおすすめです。

少しずつ慣れていけば、自然と記事全体の見せ方も整っていきますよ。

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

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