【使用例あり】Cocoonのブロック一覧|Cocoonのブロックを使いこなしたい方必見

その他
こんな悩みや疑問はありませんか?
  • Cocoonのブロックの種類が多くてよくわからない
  • ブロックの使い方がよくわからない
  • ブロックの使用例が見たい!

この記事では、こんな疑問や要望に応えていきたい思います。

この記事で解決できます!
  • Cocoonのブロックの種類が一目でわかります
  • ブロックごとの使用例があるので、使い方がすぐにイメージできます

せっかくブログを作るなら、整理された読みやすいブログにしたいですよね。

そのためにブロックを適材適所で配置できるよう、一緒に勉強していきましょう!

ブロックのカテゴリ一覧

ブロックには以下のとおり10個のカテゴリがあり、そのカテゴリの中に様々なブロックが用意されています。
このカテゴリごとに、ブロックの内容をまとめていきたいと思います。

  • よく使うもの
  • 一般ブロック
  • フォーマット
  • レイアウト要素
  • ウィジェット
  • 埋め込み
  • Cocoonブロック
  • Cocoon汎用ブロック
  • Cocoonマイクロコピー
  • Cocoonレイアウト

よく使うもの

そのままの意味です。自分が使ったブロックの履歴など表示してくれます。

こんな感じです。

一般

一般というだけあって使用する頻度が高いものが集まってます。

段落

ブロックを使って、いろいろな物語を組み立ててください。

Cocoonブロック説明文

このように文章を書くブロックとして使います。

文字サイズを変えたり

文字サイズ(小)

文字サイズ(標準)

文字サイズ(中)

文字サイズ(大)

文字サイズ(特大)

ドロップキャップ(先頭を大きな文字にする)にしたり

文字色や背景色を変えたりできます


見出し

新しいセクションを紹介しコンテンツを整理することで、ビジター (と検索エンジン) のコンテンツ構造理解の手助けをしましょう。

Cocoonブロック説明文

H1~H6まで使い分けることができます。この見出しに沿って目次も自動作成されますので、内容の粒度を意識して整理しましょう!


リスト

番号なし、または番号付きのリストを作成します。

Cocoonブロック説明文
  • リストを
  • 箇条書きに
  • したり
  1. 番号を
  2. 付け
  3. たり
  1. 番号の
  2. 順番を
  3. 逆にしたり
  1. 番号の初期値を
  2. 自由に
  3. 決められたりします

引用

引用テキストを視覚的に強調します。 「他者の引用は、我々自身への引用である」—フリオ・コルタサル

Cocoonブロック説明文

↑これです。

他の人が作成した文章や言葉を自分のブログ内で引用するには、引用元を明記して、引用していることがはっきりわかるように記載する必要があります。

 こちらが「デフォルト」を選択したスタイル

引用元はこちらに記載

 こちらが「大」を選択したスタイル

引用元はこちらに記載

画像

画像を挿入し、視覚に訴えます。

Cocoonブロック説明文

以下のように好きな画像を挿入できます。


ギャラリー

リッチギャラリーに複数の画像を表示します。

Cocoonブロック説明文

画像ブロックは一枚の画像を載せることができましたが、ギャラリーブロックは複数枚の画像を載せることが可能です。

写真の列数の変更ができます。

4列

3列

2列


カバー

テキストオーバーレイを含む画像または動画を追加します。ヘッダーに最適です。

Cocoonブロック説明文

画像に色を付けて表示
ここでさらに各ブロックの使用もできる

背景として固定
(スクロールしてみてください)

サイズ(高さ)の変更

焦点の移動

背景の透過度の変更


ファイル

ファイルをダウンロードするリンクを追加します。

Cocoonブロック説明文

音声

シンプルな音声プレイヤーを埋め込みます。

Cocoonブロック説明文

音声ファイルをアップロードする(埋め込む)ことができます。

初期設定
繰り返し再生

このほか自動再生の設定もできます。


動画

メディアライブラリから動画を埋め込むか、新しい動画をアップロードしてください。

Cocoonブロック説明文
初期設定
インラインで再生

↓編集中のエディタ

ポスター画像付き(ポスター画像も自分で自由に選択できます)

このほか、「自動再生」「繰り返し再生」「ミュート(消音)」も設定できます。


フォーマット

クラシック

従来の WordPress エディターを使用します。

Cocoonブロック説明文

Cocoonの以前のバージョンにおけるエディタで記事を作成することができます。

↓編集中のエディタ

※私は今のバージョンになってからCocoonを使い始めましたのであまり使わないかもです。


整形済み

スペースやタブを含むテキストを追加し、スタイリングして表示します。

Cocoonブロック説明文
整形済みのブロックはこのように見えます。

詩を挿入します。特別な余白形式を使ったり、歌詞を引用したりできます。

Cocoonブロック説明文
 こんなこといいな できたらいいな
あんなゆめ こんなゆめ いっぱいあるけど
みんなみんなみんな かなえてくれる

ソースコード

余白やタグを考慮したコードスニペットを表示します。

Cocoonブロック説明文

サンプルコードなどを記載したいときに使えます。

<?php
  echo "こんにちは<br>";
  echo "こんばんは<br>";
?>

カスタムHTML

カスタム HTML コードを追加します。編集しながらプレビューが可能です。

Cocoonブロック説明文

自分でHTMLコードを追加できますので、HTMLが書ける方はカスタマイズしてみましょう。

↓作成時(画像キャプチャ)

↓結果以下のように表示されます。

普通の文字
太文字

プルクオート

テキストの引用に特別な視覚的強調を加えます。

Cocoonブロック説明文

↑これが通常の引用

プルクオートは通常の引用ではなく、引用のスタイルの変更や色付けができます。

デフォルト

引用元

スタイルを無地に変更

引用元

色の変更

引用元


表の挿入。チャートとデータの共有に最適です。

Cocoonブロック説明文

設定により列幅の設定(揃えるかどうか)、ヘッダーフッターの追加、色の変更ができます。

今日の作業作業時間
ジム1.5時間
資格勉強4時間
合計5.5時間

レイアウト要素

グループ

他のブロックをグループ化したブロック。

Cocoonブロック説明文

↓「段落」と「リスト」をグループ化して背景色を付けた例

段落部分と

  • リスト
  • 部分に
  • まとめて背景色を付けています


ボタン

ボタンスタイルのリンクで、訪問者に行動を喚起しましょう。

Cocoonブロック説明文

紹介したいページなどのリンクをボタンスタイルで表示することができます。

※以下すべてのボタンはGoogleの検索画面にリンクしています。

個人的には新しいタブで開く設定がしてあるボタンが好きです。


カラム

カラムブロック内の1つのカラム。

Cocoonブロック説明文

ブロックを分ける

  • カラムブロックの中で
  • 他のブロックを使用できます

こんな感じです。


メディアと文章

画像と文章を横並びのリッチなレイアウトにします。

Cocoonブロック説明文

文字サイズ(小)

文字サイズ(標準)

文字サイズ(中)

文字サイズ(大)

文字サイズ(特大)

ドロップキャップ

モバイルでは縦に並べる

色を付ける

写真と文書の入れ替えやコメント位置の変更

幅を変える(逆も可)


続きを読む

このブロックより前のコンテンツはアーカイブページに抜粋として表示されます。

Cocoonブロック説明文

記事の一覧などから見たときにこのブロック以降の内容は表示されなくなります。


改ページ

コンテンツを複数のページに分けて表示します。

Cocoonブロック説明文

改ページブロックを使うと、記事を複数ページを分けることができます。

※今回は1ページに収めたいので改ページは使っていません。


区切り

水平の区切りを使って、アイデアやセクションの間で改行します。

Cocoonブロック説明文

↓この線です。内容の区切りに使用すると見やすくなると思います。


スペーサー

ブロックの間に、高さをカスタマイズ可能な余白を追加します。

Cocoonブロック説明文

ブロックの間の余白を設定できます。

何もしなければ一定の余白にしかなりませんが、スペーサーを使えば自由に余白を設定できます。

こんな風に。( ↑スペーサーが入っています。 )


ウィジェット

アーカイブ

記事の月別アーカイブを表示します。

Cocoonブロック説明文

リンク表示(デフォルト)

ドロップボックス形式 & 投稿数の表示


最新の記事

最近の投稿の一覧を表示します。

Cocoonブロック説明文

ショートコード

WordPress ショートコードで追加のカスタム要素を挿入します。

Cocoonブロック説明文

Cocoonデフォルトで使用できるショートコードや自分で作成したショートコードを使って、よく使用する文言や機能を簡単に使うことができるようになります。

以下はブログカードを表示する例です。

↓ショートコードの入力画面(画像キャプチャ)

↓ショートコードによって表示したブログカード


カテゴリー

すべてのカテゴリーをリスト表示します。

Cocoonブロック説明文

リンク表示(デフォルト)

ドロップダウン&階層表示&投稿件数


カレンダー

このサイトの投稿カレンダー 。

Cocoonブロック説明文

月ごとの投稿された記事の一覧を表示できます。

2022年10月
 12
3456789
10111213141516
17181920212223
24252627282930
31  

最新のコメント

自分の最近のコメント一覧を表示します。

Cocoonブロック説明文

コメントがあれば、アバターや日付と一緒にコメントを表示できます。

コメントがない場合は以下のように表示されます。

表示できるコメントはありません。

RSS

RSS または Atom フィードからの投稿を表示します。

Cocoonブロック説明文

正直、調べるまで何ことやらさっぱりでした。(;^ω^)

RSSとは自分が登録したサイトやブログの更新情報の日付やタイトル、内容を発信する技術で、閲覧する人はRSSリーダを使用してその情報を受け取れます。

要はわざわざ見たいブログが更新されたかな~と見に行かなくてもいいということですね。

ただ、RSSリーダが今使われなくなってきているようです。

あまり便利感がない気がするので、とりあえず今は使わないことにします。。


検索

訪問者がコンテンツを見つけられるよう手助けしましょう。

Cocoonブロック説明文

言わずもがなの機能ですね。使ってみてください。


タグクラウド

タグクラウド

Cocoonブロック説明文

埋め込み

動画、画像、ツイート、音声その他の外部のリソースのコンテンツを埋め込みます。

Cocoonブロック説明文

サイトに表示したいコンテンツのリンクを貼り付けます。

↓Twitterの埋め込みはこんな感じです。

↓YouTubeはこんな感じ。(ちなみにこれはイチ押しの動画です。)

第131回【見ないと損】資産が増える2019年リベ大 人気動画まとめ《保存版》【お金の勉強 初級編】

埋め込みの種類として用意されているのは以下のとおりです。
色々ありますが、私としてはYouTubeやTwitterを使うのがメインになってきますかね。


Cocoonブロック

トルクボックス

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

Cocoonブロック説明文

情報をまとめるのに便利ですね。

サイトを見てくださる方が見る必要のないものは非表示にしておけます。

背景色

文字色

の変更ができます


アイコンボックス

アイコンを用いて直感的にメッセージ内容を伝えるためのボックスです。

Cocoonブロック説明文

補足情報(!):ちょっとした情報を書くのにいいですね

補足情報(?):読者さんの疑問や自分自身の疑問点を明確に表現できます

補足情報(!):重要なポイントや注意点が分かりやすい!

メモ:ワンポイントで書きたい内容を書きましょう

コメント:自分や他人のコメントはこれで。

OK:いいこと!

NG:わるいこと!

GOOD:いいこと!

BAD:わるいこと!

プロフィール:そのままですね。もしくは、誰かの発言という意味合いで使ってもいいかもしれません。(次の吹き出しと被りますが。)


案内ボックス

ボックスの背景色により、直感的にメッセージ内容を伝えるためのボックスです。

Cocoonブロック説明文

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

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

インフォ(薄い青)

サクセス(薄い緑)

ワーニング(薄い黄色)

デンジャー(薄い赤色)

ライト(白色)

ダーク(暗い灰色)


吹き出し

登録されている吹き出しのオプションを変更できます。

Cocoonブロック説明文
男性
男性

画像を使って会話風に記事を書くことができます。

女性
女性

変更できるのは、画像、人物位置(左右)、吹き出しのスタイル、アイコンのスタイル、吹き出しの背景色、文字色、枠線の色です。

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

吹き出し:デフォルト

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

ビジネスウーマン
ビジネスウーマン

吹き出し:フラット

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

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

吹き出し:考え事

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

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

吹き出し:LINE風

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

男性医師
男性医師

文字色、背景色、枠線の色変更

女性医師
女性医師

文字サイズも変更できたり

どや顔男性
どや顔男性

ドロップキャップもできる

 どや顔女性
どや顔女性

最初からある画像はここまで

自分で画像を用意することで、オリジナルの吹き出しが作れます

自分で選んだ画像
自分で選んだ画像

前もって自分のオリジナルの吹き出しを作ることもできます。

自分で選んだ画像
自分で選んだ画像
Cocoon設定⇒吹き出し

白抜きボックス

コンテンツを囲むだけのブランクボックスを表示します。

Cocoonブロック説明文

目立たせたいものがあるときは、これで囲うだけでもかなり効果ありです。

ボーダー色(枠線の色)、背景色、文字色が変更できます。


付箋風ボックス

目立つ濃いめの色で付箋風にメッセージを伝えるためのボックスです。

Cocoonブロック説明文

灰色タイプ

黄色タイプ

赤色タイプ

青色タイプ

緑色タイプ


タブボックス

タブにメッセージ内容を伝えるための文字が書かれているボックスです。

Cocoonブロック説明文

※文字色、背景色、枠線の色は自由に変更できます。

ラベル:チェック

ラベル:コメント

ラベル: ポイント

ラベル: ティップス

ラベル: ヒント

ラベル: ピックアップ

ラベル: ブックマーク

ラベル: ダウンロード

ラベル: メモ

ラベル: ブレイク

ラベル: アマゾン

ラベル: OK

ラベル: NG

ラベル: GOOD

ラベル: BAD

ラベル: プロフィール


アイコンリスト

リストポイントにアイコンを適用した非順序リストです。

Cocoonブロック説明文

※アイコン色、文字色、背景色、枠線の色を自由に変更できます。

リストの種類

ブログカード(工事中)

ブログカード表示用の入力ブロックを表示します。URLは複数入力可能です。

Cocoonブロック説明文

ボタン

一般的なリンクボタンを作成します。

Cocoonブロック説明文

囲みボタン(工事中)

アスリートタグ等のタグを変更できないリンクをボタン化します。

Cocoonブロック説明文

検索案内

訪問者に検索を促すためのボックスです。検索をクリックすることで検索結果へ跳びます(※AMPページ以外)。

Cocoonブロック説明文

タイムライン

時系列を表現するためのブロックです。

Cocoonブロック説明文
朝、家を出るまで
  • 6:00
    起きる

    寒い…

  • 6:30
    ブログを書く

    楽しい

  • 8:00
    家を出る

    さて…


Cocoon汎用ブロック

タブ見出しボックス

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

Cocoonブロック説明文
アイコン

50種以上のアイコンを選択することができます。

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン

アイコン


見出しボックス

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

Cocoonブロック説明文
ポイント

アイコンの種類はタブ見出しボックスと同じ


ラベルボックス

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

Cocoonブロック説明文
ココが見出し

アイコンの種類はタブ見出しボックスと同じ


Cocoonマイクロコピー

マイクロバルーン

コンバージョンリンク(ボタン)の直上もしくは直下にテキストバルーン表示して、コンバージョン率アップを図るためのマイクロコピーです。

Cocoonブロック説明文

マイクロテキスト

コンバージョンリンク(ボタン)の直上もしくは直下に小さくテキスト表示して、コンバージョン率アップを図るためのマイクロコピーです。

Cocoonブロック説明文

Cocoonレイアウト

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

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

Cocoonブロック説明文

あるなしクイズ

ある

手袋

なし

茶碗

マフラー

比率を変更

答えは

二つあるかないか


3カラム

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

Cocoonブロック説明文

中央


おわりに

Cocoonで最初から使えるブロックをすべてまとめました。

見やすいブログのためには、要所要所適材適所でブロックを使い分けるのも重要な要素になると思います。

どんどん色々なブロックを使って、自分なりの使い方を見つけましょう!

おわり

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