Cocoonには、記事を見やすく整理できる装飾ブロックが数多く用意されています。
ただ、
と感じることもあります。
そこでこの記事では、Cocoon装飾ブロックを目的別に整理し、使い方・カスタマイズ記事をまとめました。
このページを見れば、Cocoon装飾ブロックの全体像が分かり、目的に合った装飾をすぐ探せるようになります。
Cocoon装飾ブロック一覧（目的別）
ここからは、Cocoonで使える装飾ブロックを目的別にまとめています。
気になるブロックがあれば、リンクから詳細記事へ進んでください。使い方やカスタマイズ方法まで詳しく解説しています。
このページを入口にして、気になる装飾ブロックから順番にチェックしてみてください。
情報を整理して見せるブロック
情報をコンパクトにまとめたり、切り替えて表示したりできるブロックです。
比較記事やFAQ、補足説明などに向いています。
タブブロック
- Tab 1
- Tab 2
タブのコンテンツ
内容を切り替えて表示できる便利なブロックです。
複数の情報をコンパクトに整理でき、記事の見やすさが大きく向上します。
比較・手順・カテゴリー分けなどにおすすめです。
→ タブブロックの使い方とカスタマイズ
アコーディオン（トグル）
クリックすると開閉できるブロックです。
FAQや補足情報、注意事項などを折りたたんで表示できるため、情報量が多い記事でもスッキリ整理できます。
→ アコーディオン（トグル）カスタマイズ
FAQブロック
- Q
質問
- A
回答
よくある質問をまとめて表示できるブロックです。
読者の疑問を解決しやすくなり、記事の信頼性や回遊率の向上にもつながります。
レビュー記事や解説記事におすすめです。
→ FAQブロックカスタマイズ
強調・説明に使うボックス系
重要なポイントや補足情報を目立たせる装飾ブロックです。
文章の読みやすさを大きく改善できます。
アイコンボックス
アイコン付きで情報を分かりやすく表示できるブロックです。
注意・補足・ポイント・解説などを視覚的に伝えられます。
解説記事やカスタマイズ記事でよく使われます。
→ アイコンボックスカスタマイズ
白抜きボックス
白抜きボックス
シンプルで見やすい装飾ボックスです。
文章・リスト・画像などをまとめて整理できます。
記事のデザインを整えたいときに便利です。
→ 白抜きボックスカスタマイズ
付箋風ボックス
メモや補足情報をやさしく表示できる装飾ボックスです。
ワンポイント解説や注意書きを入れたいときに便利です。
→ 付箋風ボックスカスタマイズ（準備中）
案内ボックス
補足説明やガイド情報を分かりやすくまとめられるブロックです。
読者に伝えたい注意点やポイントを整理するときに役立ちます。
→ 案内ボックスカスタマイズ（準備中）
Cocoon汎用ブロック
Cocoonの基本装飾として、幅広い記事で使えるブロックです。
シンプルで使いやすく、さまざまな場面で活用できます。
見出しボックス
ここに内容を入力
見出しと装飾を組み合わせて、情報を分かりやすく整理できます。
記事の構成を整えたいときに便利です。
→ 見出しボックスカスタマイズ
タブ見出しボックス
ここに内容を入力
見出しをタブ風デザインにできるブロックです。
セクションを分かりやすく区切ることができます。
→ タブ見出しボックスカスタマイズ
ラベルボックス
ここに内容を入力
注意・補足・ポイントなどをシンプルに強調できます。
文章の中で重要な情報を目立たせるのに最適です。
→ ラベルボックスカスタマイズ
手順・流れを見せるブロック
作業手順や登録の流れを分かりやすく表示できます。
タイムライン（ステップブロック）
- ラベルタイトル
- ラベルタイトル
- ラベルタイトル
手順をステップ形式で表示できるブロックです。
登録方法や設定手順などを、初心者でも迷わず読み進められる構成にできます。
→ タイムラインカスタマイズ
記事・コンテンツを表示するブロック
記事やページをカード形式で表示し、回遊率を高めるブロックです。
ブログカード
記事リンクを自動でカード表示できるブロックです。
URLを貼るだけで見やすいリンクになるため、記事内リンクに最適です。
→ ブログカードカスタマイズ
ナビカード
おすすめ記事や関連記事をカード形式で表示できます。
内部リンクとして非常に使いやすく、読者を次の記事へ自然に誘導できます。
→ ナビカードの使い方
新着記事・人気記事・カード表示
記事一覧をカード形式で表示できます。
トップページやピラーページ、まとめ記事などでよく使われ、サイト全体の回遊率を高める効果があります。
→ 新着・人気記事カスタマイズ（横並び方法）
人気記事ランキング
アクセス数をもとに人気記事を表示できるブロックです。
読者がよく読んでいる記事を見せることで、クリック率と滞在時間を伸ばせます。
→ 人気記事ランキングカスタマイズ
回遊・導線を作るブロック
読者を次の行動へ誘導するための重要なブロックです。
CTAボックス
アフィリエイトリンクやおすすめページを目立たせるブロックです。
申し込み・登録・詳細ページなどへの導線を作れます。
→ CTAボックスの作り方
ボックスメニュー
アイコン付きメニューを表示できるブロックです。
カテゴリ誘導やトップページの導線作りに便利です。
→ ボックスメニューカスタマイズ
WordPress関連（補助機能）
装飾ブロックと組み合わせて使うと便利な機能です。
パターン（再利用ブロック）
よく使う装飾やレイアウトを保存して、簡単に再利用できます。
作業時間を大きく短縮できる便利な機能です。
→ WordPressパターン機能の使い方
その他のCocoonブロック（補助機能）
必ず使うものではありませんが、記事デザインを整える補助機能として活用できます。
必要なものだけ取り入れるのがおすすめです。
インライン系ブロック
文章の中で使えるシンプルな装飾機能です。文字の強調や補足説明に役立ちます。
- マーカー（重要な部分を強調）
- バッジ（短いラベル表示）
- インラインボタン（文章内のリンク）
- フォントサイズ（文字サイズ変更）
- ルビ（ふりがな）
文章を読みやすくしたいときに便利です。
コンテンツ系ブロック
記事の内容を分かりやすく見せるためのブロックです。
- 吹き出し（会話形式）
- ボタン（リンク誘導）
- 囲みボタン（強調リンク）
- アイコンリスト（見やすいリスト）
- 検索案内（検索ページへの誘導）
- プロフィールボックス（運営者紹介）
レビュー記事や解説記事でよく使われます。
表（テーブル）
表や比較表を作成できるブロックです。
レビュー記事や比較記事、料金表などでよく使われます。
表示・分析系ブロック
データや情報を視覚的に表示できるブロックです。
- レーダーチャート（比較評価）
- ランキング（順位表示）
- テンプレート（再利用デザイン）
- 広告（広告表示）
比較記事やレビュー記事に向いています。
レイアウトブロック
記事の配置や構成を調整するためのブロックです。
- 2カラム
- 3カラム
画像や文章を横並びにしたいときに使います。
トップページやまとめ記事で活用できます。
装飾ブロックをカスタマイズする方法
装飾ブロックは、CSSを追加することでさらにおしゃれにできます。
基本の流れは次の通りです。
- 子テーマを使う
- CSSを追加する
- 必要に応じてPHPを追加
- ブロックスタイルを調整する
CSSの基本や編集方法については、こちらの記事で詳しく解説しています。
装飾ブロックをおしゃれにするコツ
- 色を統一する
サイトカラーを決めて統一すると、デザインが整います。
- 使いすぎない
装飾が多すぎると、逆に読みにくくなります。
- 余白を揃える
余白を整えるだけで、見た目が大きく変わります。
よくある質問｜Cocoon装飾ブロック
- Q
Cocoon装飾ブロックは無料ですか？
- A
無料で使えます。Cocoonに標準搭載されています。
- Q
CSSは必須ですか？
- A
基本は不要です。
デザインをカスタマイズしたい場合のみCSSを使います。
Cocoon装飾ブロックまとめ
Cocoon装飾ブロックを活用すると、
- 記事が読みやすくなる
- デザインが整う
- 回遊率が上がる
- SEOにも効果がある
というメリットがあります。
まずは気になる装飾ブロックから使ってみて、必要に応じてカスタマイズ記事をチェックしてみてください。
Cocoonのカスタマイズをさらに知りたい方はこちら
Comment 記事の感想を書き込んでいただけると幸いです