体調不良のため長らくお休みしていました、過去をさかのぼって更新していきます。

Cocoonブロックのサンプル全一覧

[PR] 記事内には広告が含まれています。

無料テーマCocoon(コクーン)には、Wordpressのブロックエディタに対応した多彩なブロックが用意されています。

どんなブロックがあるか、一覧にしてみました。

Cocoonブロック

吹き出し

山田太郎
山田太郎

右側詳細設定でキャラクターなどが選べます。

案内ボックス

右側詳細設定で、色を選ぶことができます。

アイコンボックス

右側の詳細設定で、アイコンや色を選ぶことができます。

白抜きボックス

右側の詳細設定で、線と背景色が選べます。

付箋風ボックス

付箋(ポストイット風)のボックスです。
右側の設定で色が変えられます。

タブボックス

左上にタブのようなものがついたボックスです。
右側の設定で、色やタブの中の文字も変えられます。

ブログカード

※段落ブロックにURLコピペの方が楽なので割愛します。

ボタン

設定で、大きさ、色を変えたり、光らせたりできます。

囲みボタン

アフィリエイトリンクのタグ等、コピペしてボタン化することができます。

トグルボックス

Q&Aなどの答えを入れて表示させることができます。

設定で色を変えられます。

検索案内

Google検索を置くことができます。

タイムライン

当サイトの歴史
  • 2011
    ドメイン取得

    誰も見てないブログとしてスタート

  • 2012
    はじめてのアクセス

    ある記事がバズる

  • 2021
    サイト統廃合

    今に至る

タイムライン(年表)を作ることができます。

アイコンリスト

アイコンリストのタイトル
  • このように
  • アイコンの付いた
  • リストを作ることができます

色やアイコンは右側詳細で変更できます。

Cocoon汎用ブロック

タブ見出しボックス

見出し

見出しタブのついたボックスを作ることができます。

色はもちろん変えられます。

見出しボックス

見出し

見出しのついたボックスを作ることができます。

色はもちろん変えられます。

ラベルボックス

見出しが↑のように表示されるボックスです。

もちろん色は変えられます。

Cocoonマイクロコピー

マイクロコピーテキスト

小さい文字で注意文などを書くときに便利です。

マイクロコピーバルーン

吹き出し状のマイクロコピーです

Cocoonレイアウト

2カラム

2カラムの左側です。

2カラムの右側です。

本文を左右カラムに分けます。オプションでカラム比率を変更できます。

↓編集画面でみたところ

標準でついてるカラムよりも、編集画面の色が分かれていて見やすいです。

3カラム

3カラムの左側です

3カラムの中央です

3カラムの右側です。

本文を左・中央・右カラムに分けます。

↓編集画面でみたところ

Cocoonブロックは使いやすくて豊富

Cocoonは無料とは思えないほどの多彩なブロックが用意されています。

色やアイコンをカスタマイズして、オリジナルな見た目を作ることができますね。

ぜひ、活用してください!