【初心者向け】CocoonのCocoonブロック要素まとめ【Ver1.8】

CODE
のり
のり

WordPressのテーマ「Cocoon」って色々ブロック要素があるけど、どんなものがあるのか一覧で見たい!

そんな質問に答えます。というか学習用です。一覧で何ができるのかわかる記事があったら良いなということで書きました。

前回、一般ブロック要素については以下でまとめました。

今回は、Cocoonの以下の4つのブロックについてまとめていきたいと思います。

  • Cocoonブロック
  • Cocoon汎用ブロック
  • Cocoonマイクロコピー
  • Cocoonレイアウト

Cocoonブロック

吹き出し

まずは、吹き出しです。人物、吹き出しスタイル、人物位置、アイコンスタイルの4つが設定出来ます。

男性
男性

SAMPLE001 男性(左)

女性
女性

SAMPLE002 女性(右)

ビジネスマン
ビジネスマン

SAMPLE003 ビジネスマン(左)

ビジネス<br>ウーマン
ビジネス
ウーマン

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

悩むおじさん
悩むおじさん

SAMPLE005 悩むおじさん(左)

悩むおばさん
悩むおばさん

SAMPLE006 悩むおばさん(右)

男性医師
男性医師

SAMPLE007 男性医師(左)

女性医師
女性医師

SAMPLE008 女性医師(右)

どや顔男性
どや顔男性

SAMPLE009 どや顔男性(左)

どや顔女性
どや顔女性

SAMPLE010 どや顔女性(右)

付箋風ボックス

付箋風ボックスは、目立つ濃いめの色で付箋風にメッセージを伝えるためのボックスです。灰色、黄色、赤色、青色、緑色の全部で5色あります。

このスペースは段落と同じです

このスペースは段落と同じです

このスペースは段落と同じです

このスペースは段落と同じです

このスペースは段落と同じです

アイコンリスト

アイコンリストは、リストのポイントにアイコンを適用した非順序リストです。約40種類あるアイコンを選ぶことができ、それぞれ色設定ができます。また、ボーダーの色も変えたり、タイトルも入力できます。タイトルの入力するには右上のエリアをクリックするというコツがいるようです。

タイトルも入力できます
  • ここはリストと同じ
    • ここはリストと同じ
      • ここはリストと同じ
アイコンリストのスタイルと色
アイコンリストのスタイルと色
Cocoon 1.7.4.7公開。アイコンリストブロック追加。色設定をカラーパレットに統一。
Cocoon 1.7.4.7のアップデート情報。ブロックエディターで色の取り扱い方法の変更。

案内ボックス

ボックスの背景色により、直感的にメッセージ内容を伝えるためのボックスです。内容は文章または、ブロックを選択することができます。

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

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

インフォ(濃い青)

サクセス(濃い緑)

ワーニング(濃い黄色)

デンジャー(濃い赤色)

ライト(白色)

ダーク(暗い灰色)

ブログカード

ブログカード表示用の入力ブロックを表示します。URLは複数入力可能です。選べるラベルは以下の8つあります。

選べるラベル
  • 関連記事
  • 参考記事
  • 人気記事
  • あわせて読みたい
  • 詳細はこちら
  • チェック
  • ピックアップ
  • 公式サイト

アイコンボックス

アイコンを用いて直感的にメッセージ内容を伝えるためのボックスです。内容は文章または、ブロックを選択することができます。全部で10種類あります。

補足情報(i)

補足情報(?)

補足情報(!)

メモ

コメント

OK

NG

GOOD

BAD

プロフィール

タブボックス

タブにメッセージ内容を伝えるための文字が書かれているボックスです。全部で16種類あります。

選べるタイプ
  • チェック
  • コメント
  • ポイント
  • ティップス
  • ヒント
  • ピックアップ
  • ブックマーク
  • メモ
  • ダウンロード
  • ブレイク
  • Amazon
  • OK
  • NG
  • GOOD
  • BAD
  • プロフィール

チェック

コメント

ポイント

ティップス

ヒント

ピックアップ

ブックマーク

メモ

ダウンロード

ブレイク

Amazon

OK

GOOD

ボタン

一般的なリンクボタンが作成できます。

トグルボックス

クリックすることでコンテンツ内容の表示を切り替えることができるボックスです。

ブロック要素を配置することが出来ます。

白抜きボックス

コンテンツを囲むだけのブランクボックスを表示します。ボーダー色は変えることができます。

ブロック要素を配置することが出来ます。

囲みボタン

リンクタグやショートコードをボタン化します。アフィリエイトリンクを使うなら囲みボタンを使う必要があります。

アフィリエイトリンクがないため、表示出来ません。

検索案内

訪問者に検索を促すためのボックスです。検索をクリックすることで検索結果にとびます。

タイムライン

タイムラインは、時系列を表示するためのブロックです。内容は文章または、ブロックを選択することができます。

タイムラインのタイトル
  • 2019.X.X
    タイトル

    タイムラインの本文

  • 2019.X.X
    タイトル

    文章または、ブロックが追加できます

  • 2019.X.X
    タイトル

    文章または、ブロックが追加できます

  • 2019.X.X
    タイトル

    文章または、ブロックが追加できます

Cocoon汎用ブロック

見出しボックス

ボックスに「見出し」を入力できる汎用ボックスです。アイコンは52種類、色は18種類あります。

汎用ボックスのアイコンと色
見出しボックスのアイコンと色
見出し

文章または、ブロックが追加できます

Amazon
  • Amazonで買った商品などを書いたり

スケジュール

9:00 集合

12:00 ランチ

17:00 解散

ラベルボックス

ボックスに「ラベル見出し」入力できる汎用ボックスです。

汎用ボックスのアイコンと色
ラベルボックスのアイコンと色
見出し

文章または、ブロックが追加できます

チェック

アイコンの色は変わらないみたいです

タブ見出しボックス

ボックスに「タブ見出し」を入力できる汎用ボックスです。

汎用ボックスのアイコンと色
見出し

文章または、ブロックが追加できます

マイルストン
  • 今年中にCocoonの使い方をマスターする

Cocoonマイクロコピー

↓マイクロコピーテキストでボタンの補足情報を追記できます
↑マイクロコピーテキストでボタンの補足情報を追記できます

マイクロバルーン

マイクロコピーバルーンでボタンの補足情報を追記できます。色も変更可能。
マイクロコピーバルーンを円形にすることも可能

Cocoonレイアウト

2カラム(1:1)

2カラム(1:2)

2カラム(2:1)

2カラム(1:3)

2カラム(3:1)

3カラム

最後に

いかがでしたか?

書いている時に公式ページで同じような記事を発見してしまいました。。。でもこの記事を作成してかなり勉強になりました!

ほんと色々できてCocoon最高ですね。他のブロック要素については、こちらでまとめていますので参考にしてください!では!

コメント

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