この記事では、こんな疑問や要望に応えていきたい思います。
せっかくブログを作るなら、整理された読みやすいブログにしたいですよね。
そのためにブロックを適材適所で配置できるよう、一緒に勉強していきましょう！
ブロックのカテゴリ一覧
ブロックには以下のとおり10個のカテゴリがあり、そのカテゴリの中に様々なブロックが用意されています。
このカテゴリごとに、ブロックの内容をまとめていきたいと思います。
- よく使うもの
- 一般ブロック
- フォーマット
- レイアウト要素
- ウィジェット
- 埋め込み
- Cocoonブロック
- Cocoon汎用ブロック
- Cocoonマイクロコピー
- Cocoonレイアウト
よく使うもの
そのままの意味です。自分が使ったブロックの履歴など表示してくれます。
こんな感じです。
一般
一般というだけあって使用する頻度が高いものが集まってます。
段落
ブロックを使って、いろいろな物語を組み立ててください。
Cocoonブロック説明文
このように文章を書くブロックとして使います。
文字サイズを変えたり
文字サイズ（小）
文字サイズ（標準）
文字サイズ（中）
文字サイズ（大）
文字サイズ（特大）
ドロップキャップ（先頭を大きな文字にする）にしたり
文字色や背景色を変えたりできます
見出し
新しいセクションを紹介しコンテンツを整理することで、ビジター (と検索エンジン) のコンテンツ構造理解の手助けをしましょう。
Cocoonブロック説明文
H1～H6まで使い分けることができます。この見出しに沿って目次も自動作成されますので、内容の粒度を意識して整理しましょう！
リスト
番号なし、または番号付きのリストを作成します。
Cocoonブロック説明文
- リストを
- 箇条書きに
- したり
- 番号を
- 付け
- たり
- 番号の
- 順番を
- 逆にしたり
- 番号の初期値を
- 自由に
- 決められたりします
引用
引用テキストを視覚的に強調します。 「他者の引用は、我々自身への引用である」—フリオ・コルタサル
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ブロック説明文
月ごとの投稿された記事の一覧を表示できます。
| 月 | 火 | 水 | 木 | 金 | 土 | 日 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 31 | ||||||
最新のコメント
自分の最近のコメント一覧を表示します。
Cocoonブロック説明文
コメントがあれば、アバターや日付と一緒にコメントを表示できます。
コメントがない場合は以下のように表示されます。
RSS
RSS または Atom フィードからの投稿を表示します。
Cocoonブロック説明文
正直、調べるまで何ことやらさっぱりでした。(;^ω^)
RSSとは自分が登録したサイトやブログの更新情報の日付やタイトル、内容を発信する技術で、閲覧する人はRSSリーダを使用してその情報を受け取れます。
要はわざわざ見たいブログが更新されたかな～と見に行かなくてもいいということですね。
ただ、RSSリーダが今使われなくなってきているようです。
あまり便利感がない気がするので、とりあえず今は使わないことにします。。
検索
訪問者がコンテンツを見つけられるよう手助けしましょう。
Cocoonブロック説明文
言わずもがなの機能ですね。使ってみてください。
タグクラウド
タグクラウド
Cocoonブロック説明文
埋め込み
動画、画像、ツイート、音声その他の外部のリソースのコンテンツを埋め込みます。
Cocoonブロック説明文
サイトに表示したいコンテンツのリンクを貼り付けます。
↓Twitterの埋め込みはこんな感じです。
↓YouTubeはこんな感じ。（ちなみにこれはイチ押しの動画です。）
埋め込みの種類として用意されているのは以下のとおりです。
色々ありますが、私としてはYouTubeやTwitterを使うのがメインになってきますかね。
Cocoonブロック
トルクボックス
クリックすることでコンテンツ内容の表示を切り替えることができるボックスです。
Cocoonブロック説明文
情報をまとめるのに便利ですね。
サイトを見てくださる方が見る必要のないものは非表示にしておけます。
背景色
文字色
の変更ができます
アイコンボックス
アイコンを用いて直感的にメッセージ内容を伝えるためのボックスです。
Cocoonブロック説明文
案内ボックス
ボックスの背景色により、直感的にメッセージ内容を伝えるためのボックスです。
Cocoonブロック説明文
プライマリー（濃い水色）
セカンダリー（濃い灰色）
インフォ（薄い青）
サクセス（薄い緑）
ワーニング（薄い黄色）
デンジャー（薄い赤色）
ライト（白色）
ダーク（暗い灰色）
吹き出し
登録されている吹き出しのオプションを変更できます。
Cocoonブロック説明文
画像を使って会話風に記事を書くことができます。
変更できるのは、画像、人物位置（左右）、吹き出しのスタイル、アイコンのスタイル、吹き出しの背景色、文字色、枠線の色です。
吹き出し：デフォルト
アイコン：四角（枠線なし）
吹き出し：フラット
アイコン：四角（枠線あり）
吹き出し：考え事
アイコン：丸（枠線なし）
吹き出し：LINE風
アイコン：丸（枠線あり）
文字色、背景色、枠線の色変更
文字サイズも変更できたり
ドロップキャップもできる
最初からある画像はここまで
自分で画像を用意することで、オリジナルの吹き出しが作れます
前もって自分のオリジナルの吹き出しを作ることもできます。
白抜きボックス
コンテンツを囲むだけのブランクボックスを表示します。
Cocoonブロック説明文
目立たせたいものがあるときは、これで囲うだけでもかなり効果ありです。
ボーダー色（枠線の色）、背景色、文字色が変更できます。
付箋風ボックス
目立つ濃いめの色で付箋風にメッセージを伝えるためのボックスです。
Cocoonブロック説明文
灰色タイプ
黄色タイプ
赤色タイプ
青色タイプ
緑色タイプ
タブボックス
タブにメッセージ内容を伝えるための文字が書かれているボックスです。
Cocoonブロック説明文
※文字色、背景色、枠線の色は自由に変更できます。
ラベル：チェック
ラベル：コメント
ラベル： ポイント
ラベル： ティップス
ラベル： ヒント
ラベル： ピックアップ
ラベル： ブックマーク
ラベル： ダウンロード
ラベル： メモ
ラベル： ブレイク
ラベル： アマゾン
ラベル： OK
ラベル： NG
ラベル： GOOD
ラベル： BAD
ラベル： プロフィール
アイコンリスト
リストポイントにアイコンを適用した非順序リストです。
Cocoonブロック説明文
※アイコン色、文字色、背景色、枠線の色を自由に変更できます。
ブログカード（工事中）
ブログカード表示用の入力ブロックを表示します。URLは複数入力可能です。
Cocoonブロック説明文
ボタン
一般的なリンクボタンを作成します。
Cocoonブロック説明文
※文字色、背景色、枠線の色を自由に変更できます。
囲みボタン（工事中）
アスリートタグ等のタグを変更できないリンクをボタン化します。
Cocoonブロック説明文
検索案内
訪問者に検索を促すためのボックスです。検索をクリックすることで検索結果へ跳びます（※AMPページ以外）。
Cocoonブロック説明文
タイムライン
時系列を表現するためのブロックです。
Cocoonブロック説明文
- ６:00起きる
寒い…
- 6:30ブログを書く
楽しい
- 8:00家を出る
さて…
Cocoon汎用ブロック
タブ見出しボックス
ボックスに「タブ見出し」を入力できる汎用ボックスです。
Cocoonブロック説明文
50種以上のアイコンを選択することができます。
見出しボックス
ボックス「見出し」を入力できる汎用ボックスです。
Cocoonブロック説明文
アイコンの種類はタブ見出しボックスと同じ
ラベルボックス
ボックスに「ラベル見出し」入力できる汎用ボックスです。
Cocoonブロック説明文
アイコンの種類はタブ見出しボックスと同じ
Cocoonマイクロコピー
マイクロバルーン
コンバージョンリンク（ボタン）の直上もしくは直下にテキストバルーン表示して、コンバージョン率アップを図るためのマイクロコピーです。
Cocoonブロック説明文
マイクロテキスト
コンバージョンリンク（ボタン）の直上もしくは直下に小さくテキスト表示して、コンバージョン率アップを図るためのマイクロコピーです。
Cocoonブロック説明文
Cocoonレイアウト
2カラム本文を左右カラムに分けます。オプションでカラム比率を変更できます。
本文を左右カラムに分けます。オプションでカラム比率を変更できます。
Cocoonブロック説明文
あるなしクイズ
ある
目
腕
箸
手袋
なし
鼻
頭
茶碗
マフラー
比率を変更
答えは
二つあるかないか
3カラム
本文を左・中央・右カラムに分けます。
Cocoonブロック説明文
左
中央
右
おわりに
Cocoonで最初から使えるブロックをすべてまとめました。
見やすいブログのためには、要所要所適材適所でブロックを使い分けるのも重要な要素になると思います。
どんどん色々なブロックを使って、自分なりの使い方を見つけましょう！
おわり
