WordPressテーマCocoonのブロックエディターで使用できるブロックの一覧です。
ブロックエディター（Gutenberg）初心者はもちろん、使い方に慣れている人も知らないブロック(機能)があるかもしれません。
紹介していく順番は下の順番でいきます。
- Cocoonブロック
- Cocoon汎用ブロック
- Cocoonマイクロコピー
- Cocoonレイアウト
一般ブロック類は外部リンクGutenbergの使い方！WordPress初心者でもわかる図解ありに詳しくのっていますのでそちらをご覧ください
ブロックではなく、ツールバーの機能一覧については関連記事【Cocoon】投稿画面ツールバー機能一覧｜文字色・ルビほか【初心者向け】をご覧ください。
ブロックやツールバーを使いこなした記事の書き方については下の記事で説明しています。
関連記事【Cocoon】記事の書き方！投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
どんどん見ていきましょう！目次から好きなところに飛べます！！
Cocoonブロック
吹き出し
キャラクターがしゃべっているようにできます。
こんな感じで吹き出しを出せます。
吹き出しの色・形、人物の位置、アイコンの形（丸・四角）なんかを自由に設定できます。
アイコン画像もサンプル10種類に加え、好きなものを自由に設定できます。
詳細の使い方は別記事に書きましたので、下のリンクからご覧ください
白抜きボックス
白抜きボックスです
枠線・文字・背景の色を変えることができます
黒板風
僕は枠線も背景もこの色が好き。
ブログカード
内部リンク・外部リンクともに
- サムネイル
- タイトル
- 本文の抜粋
- 投稿日
- 「あわせて読みたい」などのラベル
- サイト名
これらを見やすく表示したリンクになります。詳細の使い方やカスタマイズについては別記事に書いていますので、そちらをご覧ください。
アイコンボックス
アイコンボックスは10種類あります。
状況にあわせてワンポイントとして使ってみてください
ボタン
簡単にリンクボタンを作ることができます。ボタンや文字の大きさ・色・形（丸、四角）・光る等を設定できます
光るボタンはいかにもって感じ
ボタンの解説は関連記事があります。より知りたい方は下の記事から確認をお願いします。
関連記事≫【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
囲みボタン
アフィリエイト用のリンクタグやショートコードを入力して、アフィリエイト用のボタンを作ることができます。
前項のボタンと変更できる形や色は同じです。
囲みボタンについて書いた記事もいくつかありますので、囲みボタンがよくわからないという方は下の記事から確認してみてください。
関連記事≫【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
関連記事≫【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
案内ボックス
プライマリー（濃い水色）
こんな感じでボックスの色と文字色がそろってるブロックです
セカンダリー（濃い灰色）
全部で8種類あります
インフォ（薄い青）
サクセス（薄い緑）
ワーニング（薄い黄色）
デンジャー（薄い赤色）
ライト（白色）
ダーク（暗い灰色）
アイコンリスト
リストについては下の記事で詳しく説明しています。気になる方はチェックです。
タブボックス
タブボックスです。タブは１６種類。枠と文字と背景の色は２５色から自由に選べます。タブの種類だけ全部みてみましょうか。
色は全色見えるように適当に配色してます。気持ち悪い色もあってすみません。
チェック
コメント
ポイント
ティップス
ヒント
ピックアップ
ブックマーク
メモ
ダウンロード
ブレイク
アマゾン
OK
NG
GOOD
BAD
プロフィール
付箋風ボックス
付箋風ボックスです。左はしがちょっと濃い色になっていて、付箋ぽいデザインになっています。全５色です。
灰色
黄色
赤色
青色
緑色
アコーディオン（トグル）
アコーディオン（トグル）です。+をクリック/タップをすると中身が見えるようになります。
サンプルがめっちゃ多くて本文にのせるとスペースをとるとか、ネタバレを含む本文を書くときに役立ちます。
アコーディオンの中身です。ボックスの枠線・背景・文字色は変更することができます。
どのブロックでも自由に配置できます。
検索案内
検索案内です。検索を押すと実際に入力してあるキーワードを別タブでググります。
タイムライン
タイムラインです。順序を追ってやることを見やすく表示することができます。アイテム（項目）数、タイトル、色を変更できます。
- 7時起床
ベッドから起きる
- 7時10分朝食
朝ごはんを食べる
- 7時３０分洗顔・歯磨き
顔洗って歯を磨いて、顔と髭を直す
- 7時50分着替え
スーツに着替える
- 8時出発
今日も社畜は働く
Cocoon汎用ブロック
Cocoon汎用ブロックは、ボックスの形が異なるだけでできることは似ています。時と場合に合わせてお好みのボックスをお使いください。
タブ見出しボックス
タブ見出しボックスです。見出しのアイコン約50種類・色25種類から選べます。見出しには自由に文字を入力できます。
もちろん枠線・背景・文字の色は変更することができます。
ラベルボックス
ラベルボックスです。タブ見出しボックスのラベル版です。見出しのアイコン約50種類・色25種類から選べます。
見出しには自由に文字を記入できます。
ラベルボックスです。
もちろん枠線・背景・文字の色は変更できます。
見出しボックス
見出しボックスです。タブ見出しボックスの見出し版です。見出しのアイコン約50種類・色25種類から選べます。
見出しには自由に文字を記入できます。
見出しボックスです。
Cocoonマイクロコピー
マイクロテキスト
マイクロテキストです。ボタンやブログカードの上に↓おすすめ↓とか書くのに便利です。
文字色の選択とアイコン約５０種類を使うことができます。
マイクロバルーン
マイクロバルーンです。ボタンやブログカードに一言そえるのに便利です。
色の変更・アイコン選択が自由にできます。
Cocoonレイアウト
２カラム
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カラムの2カラム目です。
カラム比率1：3です。2カラムの1カラム目です。
カラム比率1：3です。2カラムの2カラム目です。
３カラム
3カラムです。本文を均等に3分割します。実際に機能しているところと、スクショをはります。
1カラム目です
2カラム目です
3カラム目です
お疲れさまでした
以上でCocoonブロックの紹介がすべて終了しました。できることたくさんありますね！ありすぎて何使おうか迷ってしまいます。
見やすいブログはがちゃがちゃしてなくてシンプル。そして統一性がありますよね。
あなたもお気に入りのブロックと色で美しいサイトを作り上げてください。
Cocoonの「困った」を解決する記事
Cocoonの使い方
当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。
記事の書き方
特に本記事のように、記事を書くときに使うものについては下の記事で取りまとめています。読めばあなたの記事の幅が広がることでしょう。
あわせて読みたい【Cocoon】記事の書き方！投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
外観・デザインをカスタマイズ
特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です。
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ
コメント