Cocoonブロック一覧!全機能まとめ【初心者向け】

Cocoon ブロック 一覧ブログ

WordPressテーマCocoonのブロックエディターで使用できるブロックの一覧です。

ブロックエディター(Gutenbergグーテンベルク)初心者はもちろん、使い方に慣れている人も知らないブロック(機能)があるかもしれません。

紹介していく順番は下の順番でいきます。

  1. Cocoonブロック
  2. Cocoon汎用ブロック
  3. Cocoonマイクロコピー
  4. Cocoonレイアウト

一般ブロック類は外部リンクGutenbergの使い方!WordPress初心者でもわかる図解ありに詳しくのっていますのでそちらをご覧ください

▼下画像のCocoonブロックから順に紹介していきます▼

ツールバーの機能一覧については関連記事【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】をご覧ください。

どんどん見ていきましょう!目次から好きなところに飛べます!!

本記事はブロックの紹介記事です。その機能をどうやって使うかの説明は省略しております。ご了承ください。

Cocoonブロック

吹き出し

キャラクターがしゃべっているようにできます。

SAMPLE1
SAMPLE1

こんな感じで吹き出しを出せます。

SAMPLE2
SAMPLE2

吹き出しの色・形、人物の位置、アイコンの形(丸・四角)なんかを自由に設定できます。

アイコン画像もサンプル10種類に加え、好きなものを自由に設定できます。

吹き出しでいじれる設定一覧
枠・背景・文字に使える色

詳細の使い方は別記事に書きましたので、下のリンクからご覧ください

白抜きボックス

白抜きボックスです

枠線・文字・背景の色を変えることができます

黒板風

僕は枠線も背景もこの色が好き。

枠・背景・文字に使える色

ブログカード

内部リンク・外部リンクともに

  • サムネイル
  • タイトル
  • 本文の抜粋
  • 投稿日
  • 「あわせて読みたい」などのラベル
  • サイト名

これらを見やすく表示したリンクになります。詳細の使い方やカスタマイズについては別記事に書いていますので、そちらをご覧ください。

▼これがブログカード・詳細はこちらから▼
ブログカードに使えるラベル一覧

アイコンボックス

アイコンボックスは10種類あります。

補足情報(!)の青

ちょこっと注意するともっといいことになるときに使ってあげましょう

補足情報(?)

読者の疑問がありそうなときにそれを言葉にして書いてあげましょう

補足情報(!)の赤

注意した方がいいところ、ポイントを書きましょう

メモ

忘れるとまずいことを書くといいかもしれません

  • リスト(箇条書き)を
  • 入れるのも
  • 有りですよね

コメント

セリフとして使ってみてもいいと思います。

OK

ちゃんと許可をとって使用していれば大丈夫ですよ。とか書けます

NG

著作権の侵害になるので、やってはいけません。とか書けます

GOOD

毎日運動してるなんて!いいですね!!

BAD

今日一日寝て過ごしてしまいましたか!やってしまいましたね

プロフィール

私の名前はとうげといいます。本業はサラリーマン。副業で峠の雑記ブログというブログを運営しています

状況にあわせてワンポイントとして使ってみてください

ボタン

簡単にリンクボタンを作ることができます。ボタンや文字の大きさ・色・形(丸、四角)・光る等を設定できます

光るボタンはいかにもって感じ

ボタンの枠・背景・文字に使える色

囲みボタン

アフィリエイト用のリンクタグやショートコードを入力して、アフィリエイト用のボタンを作ることができます。

前項のボタンと変更できる形や色は同じです。

囲みボタンの例A8の無料登録はブロガー必須
囲みボタンの枠・背景・文字に使える色

案内ボックス

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

こんな感じでボックスの色と文字色がそろってるブロックです

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

全部で8種類あります

インフォ(薄い青)

サクセス(薄い緑)

ワーニング(薄い黄色)

デンジャー(薄い赤色)

ライト(白色)

ダーク(暗い灰色)

アイコンリスト

タイトルが入力できます
  • アイコンリストです
  • 約40種類のアイコンがあります
  • 白抜きボックスと同様に
    • 枠線
    • 背景
    • 文字
    • アイコン
  • 上記の色が変えられます
アイコンリストに使えるアイコン一覧
アイコンリストの枠・背景・文字に使える色

タブボックス

タブボックスです。タブは16種類。枠と文字と背景の色は25色から自由に選べます。タブの種類だけ全部みてみましょうか。

色は全色見えるように適当に配色してます。気持ち悪い色もあってすみません。

チェック

コメント

ポイント

ティップス

ヒント

ピックアップ

ブックマーク

メモ

ダウンロード

ブレイク

アマゾン

OK

NG

GOOD

BAD

プロフィール

付箋風ボックス

付箋風ボックスです。左はしがちょっと濃い色になっていて、付箋ぽいデザインになっています。全5色です。

灰色

黄色

赤色

青色

緑色

トグルボックス

トグルボックスです。別名アコーディオン。+をクリック/タップをすると中身が見えるようになります。

サンプルがめっちゃ多くて本文にのせるとスペースをとるとか、ネタバレを含む本文を書くときに役立ちます。

トグルボックスの中身です。ボックスの枠線・背景・文字色は変更することができます。

なんのブロックでも自由に配置できます。

トグルボックスの枠・背景・文字に使える色

検索案内

検索案内です。検索を押すと実際に入力してあるキーワードを別タブでググります。

タイムライン

タイムラインです。順序を追ってやることを見やすく表示することができます。アイテム(項目)数、タイトル、色を変更できます。

タイムライン例:モーニングルーティン
  • 7時
    起床

    ベッドから起きる

  • 7時10分
    朝食

    朝ごはんを食べる

  • 7時30分
    洗顔・歯磨き

    顔洗って歯を磨いて、顔と髪を直す

  • 7時50分
    着替え

    スーツに着替える

  • 8時
    出発

    今日も社畜は働く

こんな感じでアイテム(項目)数が変更できます
タイムラインの枠・背景・文字・ポイントに使える色

Cocoon汎用ブロック

Cocoon汎用ブロックは、ボックスの形が異なるだけでできることは似ています。時と場合に合わせてお好みのボックスをお使いください。

タブ見出しボックス

タブ見出しボックスです。見出しのアイコン約50種類・色25種類から選べます。見出しには自由に文字を入力できます。

見出し

もちろん枠線・背景・文字の色は変更することができます。

タブ見出しボックスで使えるアイコン一覧
タブ見出しボックスの枠・背景・文字に使える色

ラベルボックス

ラベルボックスです。タブ見出しボックスのラベル版です。見出しのアイコン約50種類・色25種類から選べます。

見出しには自由に文字を記入できます。

見出し

ラベルボックスです。
もちろん枠線・背景・文字の色は変更できます。

ラベルボックスで使えるアイコン一覧
ラベルボックスの枠・背景・文字に使える色

見出しボックス

見出しボックスです。タブ見出しボックスの見出し版です。見出しのアイコン約50種類・色25種類から選べます。

見出しには自由に文字を記入できます。

見出し

見出しボックスです。

見出しボックスで使えるアイコン一覧
見出しボックスの枠・背景・文字に使える色

Cocoonマイクロコピー

マイクロテキスト

マイクロテキストです。ボタンやブログカードの上に\おすすめ/とか書くのに便利です。

マイクロコピーテキスト(下寄り)タイプです
マイクロコピーテキスト(上寄り)タイプです

文字色の選択とアイコン約50種類を使うことができます。

マイクロテキストで使えるアイコン一覧
マイクロテキストボックスの文字に使える色

マイクロバルーン

マイクロバルーンです。ボタンやブログカードに一言そえるのに便利です。

マイクロバルーン下寄りです。
マイクロコピーバルーン上寄りです。円形にしてみました

色の変更・アイコン選択が自由にできます。

マイクロバルーンで使えるアイコン一覧
マイクロバルーンの枠・背景・文字に使える色

Cocoonレイアウト

2カラム

2カラムです。本文をある比率で2つに割ります。スマホだとどんな表示かわからないと思うので、実際に機能しているものとスクショをはります。

カラムの比率は1:1、1:2、2:1、1:3、3:1があります。

カラム比率1:1です。2カラムの1カラム目です。

カラム比率1:1です。2カラムの2カラム目です。

カラム比率1:2です。2カラムの1カラム目です。

カラム比率1:2です。2カラムの1カラム目です。

カラム比率1:3です。2カラムの1カラム目です。

カラム比率1:3です。2カラムの2カラム目です。

▼スクショです▼

3カラム

3カラムです。本文を均等に3分割します。実際に機能しているところと、スクショをはります。

1カラム目です

2カラム目です

3カラム目です

▼スクショです▼

お疲れさまでした

以上でCocoonブロックの紹介がすべて終了しました。できることたくさんありますね!ありすぎて何使おうか迷ってしまいます。

見やすいブログはがちゃがちゃしてなくてシンプル。そして統一性がありますよね。

あなたもお気に入りのブロックと色で美しいサイトを作り上げてください。

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

初心者向け

カスタマイズ

コメント

プロフィール
峠

とうげです。30代サラリーマンです。地方進学校→一浪→大学理工学部→就職。行動することを大切にしています。投資、アフィリエイト、ブログやってます。インデックス投資で1000万円運用中。本業は地方に長期出張する施工管理→技術職へ異動。小さいときはロボット作り屋さんになりたかった。

峠をフォローする
タイトルとURLをコピーしました