【Cocoon】使えるブロック一覧・機能紹介

当サイトはプロモーションを含みます
ブログ運営

WordPressの無料テーマのひとつであるCocoonには、記事を作成する上で便利なブロックがいくつも用意されています。

しかし、どのブロックがどんなものなのか、ぱっと見でわからないものもあるかと思います。

ブロックを選択してプレビューでどんなスタイルになるかを確認して、探しているものと違ったらまた別のものを試して……といちいち試行錯誤するのは手間も時間もかかって面倒です。

ということで、今回は数多くあるCocoonのブロックがそれぞれどんなものなのかを一覧にまとめてみました。

ただし、段落や見出しなど、明らかに詳細がわかるものについては省いてあります。

色は基本的に初期値のままです。ほとんどのブロックで、文字色や背景色、ボーダー色(枠)を変更することができます。

なお、お使いのスキンによっては、アイコンボックスの描写や案内ボックスの色が異なってきますのでご注意ください。

Cocoonで記事を書く際に、ぜひ参考にしてみてください。

※この記事の情報は2022年2月11日時点のものです。

テキスト

整形済みテキスト

ここにテキストが入ります。

プルクオート

ここに引用文が入ります。

ここに引用元が入ります。

ここにテキストが入ります。

COCOONブロック

アイコンボックス

補足情報(i)

補足情報(?)

補足情報(!)

メモ

コメント

OK

NG

GOOD

BAD

プロフィール

案内ボックス

プライマリー(濃い水色)

セカンダリー(濃い灰色)

インフォ(薄い青)

サクセス(薄い緑)

ワーニング(薄い黄色)

デンジャー(薄い赤色)

ライト(白色)

ダーク(暗い灰色)

白抜きボックス

ここにテキストが入ります。

付箋風ボックス

灰色

黄色

赤色

青色

緑色

タブボックス

チェック

コメント

ポイント

ティップス

ヒント

ピックアップ

ブックマーク

メモ

ダウンロード

ブレイク

Amazon

OK

NG

GOOD

BAD

プロフィール

吹き出し

男性(左)
男性(左)

吹き出しスタイル:デフォルト

アイコンスタイル:丸(枠線あり)

女性(右)
女性(右)

吹き出しスタイル:フラット

アイコンスタイル:丸(枠線なし)

ビジネスマン(左)
ビジネスマン(左)

吹き出しスタイル:LINE風

アイコンスタイル:四角(枠線あり)

ビジネスウーマン(右)
ビジネスウーマン(右)

吹き出しスタイル:LINE風

アイコンスタイル:四角(枠線あり)

悩むおじさん(左)
悩むおじさん(左)

吹き出しスタイル:考え事

アイコンスタイル:四角(枠線なし)

アイコンの画像は自分でアップロードしたものも使用できます。

ブログカード

ラベルの一覧は以下の通りです。

  • なし
  • 関連記事
  • 参考記事
  • 参考リンク
  • 人気記事
  • あわせて読みたい
  • 詳細はこちら
  • チェック
  • ピックアップ
  • 公式サイト
  • ダウンロード
  • 前回の記事
  • 続きの記事

ボタン

アコーディオン(トグル)

好きなブロックを追加できます。

検索案内

タイムライン

タイムラインのタイトル
  • ラベル1
    タイトル1

    ここに好きなブロックを追加することができます。

  • ラベル2
    タイトル2

    ここに好きなブロックを追加することができます。

スタイル設定のアイテム数から、タイムライン上のポイント数を増やすことができます。上記はアイテム数が2の場合です。

アイコンリスト

ここにタイトルが入ります。
  • リスト
  • リスト
    • リスト

リストと似ていますが、アイコンリストでは各リストの先頭にアイコンをつけることができます。

COCOON汎用ブロック

見出しボックス

見出し

ここにテキストが入ります。

タブ見出しボックス

見出し

ここにテキストが入ります。

ラベルボックス

見出し

ここにテキストが入ります。

COCOONマイクロコピー

マイクロコピーバルーン

ここにテキストが入ります。

マイクロテキスト

ここにテキストが入ります。

COCOONレイアウト

2カラム

左カラム

好きなブロックを追加することができます。

右カラム

好きなブロックを追加することができます。

わかりやすいように背景色を設定しています。

選択可能な左右のカラムの比率一覧は以下の通りです。

  • 1:1
  • 1:2
  • 2:1
  • 1:3
  • 3:1

3カラム

左カラム

好きなブロックを追加することができます。

中央カラム

好きなブロックを追加することができます。

右カラム

好きなブロックを追加することができます。

わかりやすいように背景色を設定しています。

最後に

ブロックを使いこなせれば、より見やすい記事を作ることができるようになります。

ぜひお試しください。

以上で紹介を終わります。

コメント

タイトルとURLをコピーしました