【第5回】XServer10日間無料体験！Cocoon装飾ブロックを実際に使ってみよう| ボックス・吹き出し・テーブルをやさしく解説

2025年12月16日2025年12月18日

はじめに（前回記事からの続き）

前回記事では、XServer10日間無料体験を利用し、Cocoonを使って、

見出し（H2・H3）を入れる
普通に文章を書く
太字とマーカーを少し使ってみる

といった 「文章を書くための基本操作」 を実際に体験しました。

今回はその続きとして、

「もう少しだけ、読みやすくしたい」
「Cocoonっぽい表現も試してみたい」

という方向けに、3つの装飾ブロックを実際に触りながら体験していきます。

今回使うのは、次の3つです。

囲み枠（ボックス）
吹き出し
テーブル（表）

難しい設定やプラグインは使いません。
この３つのブロックで、どこまで表現できるか を体験します。

今回のゴール

この記事のゴールは、とてもシンプルです。

装飾ブロックを「一度使ってみる」
どんな場面で使えそうか、感覚をつかむ
「使わなくても書ける」「使うと読みやすい」を体験する

上手に使う必要はありません。
「触ってみた」という体験 があれば十分です。

Cocoon独自ブロックとは？

Cocoonには、WordPress標準ブロック（テーブル、リストなど）とは別に、Cocoon専用の便利なブロック が用意されています。

代表的なものが、

囲み枠（ボックス）
吹き出し

です。

これらは、「＋」をクリックして選ぶだけ で使えます。

囲み枠（ボックス）を使ってみる

囲み枠はこんなときに使います

補足説明を入れたいとき
注意点を目立たせたいとき
ここだけ読んでほしいポイントがあるとき

囲み枠の入れ方

今回は、Cocoon独自ボックスのなかでも特に汎用性の高い「見出しボックス」を使用します。

＋をクリック

① Cocoon汎用ブロックの「見出しボックス」を選択
② 見出しボックスが表示される
③ サイドバー（投稿やブロックなど）が表示されていなければクリック
④ サイドバーのブロックを選択

① アイコン選択（例：✓ ）
② ボーダー色選択（例：深紫色）
③ 背景色選択（例：拡張色D）

① 見出し文章入力（例：ボックスの種類）
② 文章入力（例：見出しブロック）

囲み枠を使うだけで、文章にメリハリがつき、読みやすくなります。
最初は1記事に1つ使う程度で十分です。

吹き出しを使ってみる

吹き出しはこんなときに使います

自分の感想を入れたいとき
読者に話しかけるような表現をしたいとき
少しやわらかい雰囲気にしたいとき

吹き出しの入れ方

＋をクリック

① Cocoonブロックの「吹き出し」を選択
② 「吹き出し」ブロックが表示される
③ サイドバー（投稿やブロックなど）が表示されていなければクリック
④ サイドバーのブロックを選択

人物を選択（悩むおじさん（左））

① 吹き出しスタイル選択（例：考え事）
② 背景色選択（例：淡い緑）
③ 文字色選択（例：黒）
④ ボーダー色選択（例：黄緑色）

① 名前入力（例：ton ）
② 文章入力（例：難しいかも……と思いましたが、触ってみると意外と簡単でした）

最初は、無理に使わなくても問題ありません。
「こんな表現もできるんだな」と思えれば十分です。

表（テーブル）を使ってみる

ここからは、WordPress標準の「テーブル（表）」ブロック を使ってみます。
Cocoon専用ではありませんが、比較・整理にはとても便利 なブロックです。

表はこんなときに便利

情報を並べて比較したいとき
メリット・デメリットを整理したいとき
数字や条件を分かりやすく見せたいとき

表の入れ方

＋をクリック

① テキストブロックの「テーブル」を選択
② 「テーブル」ブロックが表示される
③ サイドバー（投稿やブロックなど）が表示されていなければクリック
④ サイドバーのブロックを選択

① カラム数と行数を指定（例：2列×3行）
② 表を作成 をクリック

① 表のセル幅を固定 をOFF
② ヘッダーセクション をON

表の各マスに文字を入力

文章で説明するより、ひと目で内容が伝わる のが表の良いところです。

表を使うときの注意点

行や列を増やしすぎない
スマホ表示を意識する
「比較・整理」に使うと効果的

表（テーブル）の表現力
私自身、最終的には有料テーマの SWELL を選びました。
その理由のひとつが、表（テーブル）の表現力 です。
Cocoonの表はシンプルで使いやすい一方、デザインの自由度や表現できる幅という点では、SWELLのほうが選択肢が多いと感じました。
とはいえ、ブログを始めたばかりの段階では、Cocoonの表で困ることはほとんどありません。
「まずは書くこと・続けること」を考えると、Cocoonはとてもバランスの良いテーマだと思います。