【Cocoon】テーブルの作り方と設定の完全ガイド｜初心者でもできる7つの手順

WordPressで無料テーマのCocoonを使っているけれど、「表の作り方が分からない」「比較表をもう少しおしゃれにしたい」「いじったらレイアウトが崩れそうで怖い」と感じていませんか。

この記事では、Cocoonでのテーブルの作り方の基本から、スマホで読みやすくする設定、真似して使える比較表テンプレまでを、ひと通り分かるようにまとめてお伝えします。

結論を先に一言で言うと、Cocoonのテーブルは基本さえ押さえれば、初心者でも「読みやすくて伝わる比較表」を十分作れます。難しいコードを覚えなくても大丈夫なので、気楽な気持ちで読み進めてみてください。

Cocoonのテーブルでできること・できないことをざっくり整理

ブログにテーブルを入れるメリットと注意点

ブログに表（テーブル）を入れると、読みやすさや分かりやすさが一気に変わります。メリットと注意点をまとめると、次のようなイメージです。

項目	メリット・注意点
情報の整理	スペックや料金など、数字や比較情報が一目で分かるようになる
読者の負担	長い文章を読むより、サッと比較できて離脱を防ぎやすい
クリック率	比較表の近くにボタンやリンクを置くと、クリックされやすくなる
注意点	列を詰め込みすぎると、スマホだと一気に読みにくくなる
注意点	レイアウト目的にテーブルを乱用すると、SEOやアクセシビリティ的に微妙

私も以前は、本文でだらだらと比較を書いてしまって、自分で読み返しても「どこが違うのか分かりにくいな…」と感じていました。そこでシンプルな比較表にまとめ直したところ、記事の滞在時間やリンクのクリックが明らかに増えました。

ただし、「何でもかんでも表にする」のは逆効果です。テーブルは、あくまで比較したい部分だけをギュッとまとめる道具、と考えると使いどころを間違えにくくなります。

Cocoon標準のテーブル機能の特徴と限界

Cocoonのテーブルは、WordPressのブロックエディタに標準で入っている「テーブル」ブロックをそのまま利用しています。つまり、Cocoon専用の特別なテーブル機能があるわけではなく、ブロックエディタ標準の使い勝手をCocoonでそのまま使えるイメージです。

ざっくり特徴をまとめると、次のようになります。

一方で、次のような点はそこまで得意ではありません。

• セルの結合や細かい装飾は、少し操作に慣れが必要
• 有料テーマと比べると、テーブルデザインのバリエーションは少なめ
• 複雑な料金表やランキング表を作り込もうとすると、CSSやHTMLの知識が欲しくなる

このあと解説していきますが、まずは標準機能だけで「シンプルで読みやすい表」を作れるようになるのが先です。そこができてから、必要に応じてカスタマイズを足していくほうが、挫折しにくいと感じています。

Cocoonでのテーブルの基本的な作り方

テーブルブロックを挿入して行数と列数を決める

一番最初のステップは、WordPressの編集画面で「テーブル」ブロックを挿入することです。ここができれば、テーブル作りの半分は終わったようなものです。

手順	やること
1	記事編集画面で「＋」ボタンをクリックする
2	検索窓に「テーブル」と入力し、テーブルブロックを追加する
3	行数と列数を入力してテーブルを作成する
4	それぞれのセルに文字を入力する
5	必要に応じて行や列を追加・削除して形を整える

最初は、「2列×3行」くらいの小さなテーブルで練習するのがおすすめです。たとえば「プラン名」と「月額料金」だけを並べる料金表でも、十分それらしく見えます。

いきなり「5列×10行」のような大きな表を作ると、途中でどこに何を書いているのか分からなくなりがちです。小さく作って慣れてから、少しずつ大きなテーブルにチャレンジしていきましょう。

行・列をあとから増やす・減らすときのコツ

テーブルを作ったあとで、「やっぱり行を足したい」「列を減らしたい」と思うことはよくあります。そんなときは、テーブル内のセルをクリックした状態で、ブロックツールバーに出てくる「行を追加」「列を追加」などのアイコンを使えばOKです。

ポイントは次のとおりです。

• とりあえず大枠だけ作っておき、あとから足したり削ったりしても問題ない
• 行や列を増やす前に、「どの行の上下」「どの列の左右」に追加されるかを確認する
• 削除するときは、必要な情報まで一緒に消してしまわないように慎重に操作する

私も慣れないうちは、列を削除したあとに「必要なセルまで消えてしまった…」と何度かやり直しになったことがあります。怖いときは、一度コピーしておいてから削除を試すと安心です。

再利用ブロックとして保存しておくと超ラク

一度きれいに仕上がったテーブルは、必ず「再利用ブロック」として保存しておくことをおすすめします。そうしておくと、次の記事からは少し書き換えるだけで、同じような表を何度も使い回せます。

• よく使う「料金表」や「プラン比較表」
• メリット・デメリットを並べるときの表
• サービスの基本情報を一覧にした自己紹介用の表

こういったテーブルをテンプレ化しておくと、記事制作のスピードがかなり変わります。作り込んだ表ほど再利用しやすいので、「うまくできたな」と感じたテーブルはその場で登録しておくと便利です。

見やすくて伝わるテーブルデザインの基本

テーブルスタイル（デフォルト・ストライプ）の選び方

テーブルブロックには、「デフォルト」「ストライプ」など複数のスタイルが用意されています。行ごとに背景色が交互になるストライプは、横方向の行を追いやすくなるので、比較表との相性がとても良いです。

用途	おすすめスタイル	理由
料金表	ストライプ	行ごとに色が変わり、プランを見分けやすい
スペック比較	ストライプ	横方向の視線移動がしやすく、どの行を見ているか分かりやすい
シンプルな一覧	デフォルト	情報量が少ないときは、装飾を抑えたほうが見やすい
プロフィール表	デフォルト	内容を淡々と見せたいときはシンプルなスタイルが合う

どちらを選ぶか迷った場合は、まずストライプで作ってみて、「ちょっと目がチカチカするな」と感じたらデフォルトに戻してみる、くらいの感覚で大丈夫です。

文字色・背景色・中央寄せで最低限のメリハリをつける

Cocoonのテーブルでは、セルの文字色や背景色、文字の位置（左寄せ・中央寄せなど）を簡単に変えられます。ただ、全部のセルをカラフルにしてしまうと、かえって読みづらくなってしまいます。

おすすめは、「本当に目立たせたいところだけ色や装飾を入れる」やり方です。たとえば料金表なら、次のような工夫ができます。

• 一番おすすめのプランの行だけ、薄い背景色を入れる
• 見出し行の文字を太字にし、中央寄せにして見出し感を出す
• 金額の文字だけ、少し濃い色にして目に入りやすくする

「全部を目立たせようとすると、結果的に何も目立たなくなる」という状態はよくあるので、色と太字は狙いを決めて使うイメージでいると失敗しにくいです。

行間・余白を意識すると一気に読みやすくなる

テーブルは、情報を詰め込みすぎると一瞬で読みにくくなります。セルの中がギチギチになると、せっかく表にしたのに、文章より見づらいという本末転倒な状態になりがちです。

私が意識しているポイントは次のとおりです。

• 1つのセルに入れる文字数は「短めの一文」くらいに抑える
• 細かく改行せず、できるだけ短いフレーズでまとめる
• 列数を増やしすぎず、スマホでも無理なく読める幅を意識する

見た目のデザインを変える前に、「情報を削る」「似た表現をまとめる」ことを優先すると、それだけでかなり読みやすくなることが多いです。

スマホで崩れにくいCocoonテーブルの作り方

横スクロールを前提にするテーブルとしないテーブル

Cocoonには、横幅の広いテーブルを横スクロールで表示させる設定があります。列を多く並べるほど横スクロールが必要になるので、「スクロールありの表」と「画面内に収める表」を分けて考えたほうがすっきりします。

状況	おすすめ対応
列が3〜4列以内	列数を絞って、横スクロールなしで表示する
列が5列以上必要	横スクロール前提にして、重要な列だけ太字や色で強調する
情報量が多すぎる	テーブルを2つに分ける、または本文で補足する
どうしても読みにくい	テーブルをやめて箇条書き＋ボックスなど、別の見せ方を検討する

テーブルの列を無理に詰め込むよりも、「本当に比較したいポイントだけ表にする」という考え方のほうが、結果として読者にやさしい表になります。

列数を絞って、重要な情報だけを見せる

スマホでテーブルを見る読者が本当に知りたいのは、たいてい次のような情報です。

• どんなプランや商品なのか（名前）
• いくらなのか（料金）
• 他と比べてどこが違うのか（特徴）

それ以外の細かい注意書きや条件などは、テーブルの下に小さくまとめておけば十分です。テーブルの中に全部書き込むと、文字サイズを小さくしないと収まらず、結局読みにくくなってしまいます。

私は料金表を作るときは、まず「3列×4行」くらいで作ってみて、どうしても必要な情報だけを追加するようにしています。最初から盛り込みすぎないことが、スマホ向けのテーブル作りではかなり大事だと感じています。

1列目を「見出し」にして視線の流れを作る

テーブルを横方向に読むとき、1列目が「何を比較しているのか」を示す見出しになっていると、読者の視線が迷いにくくなります。

• 1列目：項目名（プラン名、機能名など）
• 2列目以降：各プランや各サービスの内容・料金

この形にしておけば、仮に横スクロールが必要になっても、「今どの項目の列を見ているのか」がイメージしやすくなります。Cocoonのテーブルでも、1列目の文字を太字にしたり、背景色を少し変えたりするだけで、読みやすさがぐっと変わります。

目的別で使えるCocoonテーブルのテンプレ例

料金表テーブルのテンプレ

まずは、出番が多い料金表のシンプルな例です。

プラン名	月額料金	向いている人
ライトプラン	500円	とりあえず試してみたい人
スタンダード	1,000円	一般的な使い方をしたい人
プレミアム	2,000円	しっかり使い込みたい人

このテンプレをベースに、プラン数を増やしたり、年額料金の列を足したりするだけでも、いろいろな場面で応用できます。最初はこの形をコピーして、自分のサービス名や価格を入れてみてください。

商品・サービス比較表のテンプレ

複数のサービスや商品を比較したいときにも、テーブルはとても便利です。記号を使うと、直感的に違いが分かります。

項目	A社	B社	C社
料金	○	△	◎
使いやすさ	◎	○	△
サポート	○	◎	△
おすすめ度	○	○	◎

○・△・◎などの記号を使うと、「どこが強みか」が一目で分かります。ただし、なぜその評価にしたのかは、テーブルの下で必ず文章でも説明しておくと、読者が納得しやすくなります。

メリット・デメリット比較テーブルのテンプレ

メリットとデメリットを整理するときも、テーブルがあると頭の中が整理されます。Cocoonのテーブルを例にすると、次のようなイメージです。

項目	内容
Cocoonテーブルのメリット	無料テーマでも、十分使えるテーブルを簡単に作成できる
Cocoonテーブルのメリット	料金表や比較表など、よく使う表をブロックエディタだけで作れる
Cocoonテーブルのデメリット	デザインのバリエーションは有料テーマほど多くない
Cocoonテーブルのデメリット	高度な装飾や凝ったレイアウトには、CSSやHTMLの知識が必要になる

このようにメリットとデメリットを並べておくと、「自分に合うかどうか」を読者が判断しやすくなります。自分のサービスや商品でも同じ形で整理してみると、説明を書きやすくなります。

CSSでCocoonテーブルをカスタマイズするときの考え方

まずは「どこを変えたいのか」をはっきりさせる

CSSでカスタマイズするときによくあるのが、「とりあえずネットで見つけたコードをコピペしたものの、どこがどう変わったのか分からない」というパターンです。

まずは、次のように「変えたいポイント」をはっきりさせておくと、必要な情報を探しやすくなります。

• 線（ボーダー）の色や太さを変えたい
• ヘッダー行だけ背景色を変えたい
• マウスを乗せたときに行の色を変えたい
• 表全体の文字を少し小さくしたい

「何となくおしゃれにしたい」だとゴールがぼんやりしてしまうので、「ここだけ変われば十分」というレベルまで言葉にしてみるのがおすすめです。

テーブル全体に効くCSSと、一部だけに効かせるCSSを分ける

同じテーブルでも、「ブログ内のすべての表を同じデザインにしたい」のか、「特定の表だけ特別なデザインにしたい」のかで、書き方が変わります。

• サイト全体の雰囲気をそろえたい → 全テーブルに共通するCSSを書く
• 料金表だけ少しリッチに見せたい → 特定のテーブルにだけクラスを付けてCSSを書く

何も考えずに全体に効くCSSを書いてしまうと、プロフィールの表や細かい一覧表まで同じ装飾になって、「ここまで派手にしたくなかった…」となることもあります。Cocoonではクラス名を付けてスタイルを分けることもできるので、慣れてきたら少しずつ使い分けてみると良いです。

コピペカスタマイズをするときの注意点

検索すると、Cocoonやテーブルのカスタマイズ例がたくさん出てきます。とても便利ですが、コピペだけに頼ると次のようなトラブルが起きることもあります。

• 使用しているスキンや他の設定とぶつかり、思ったとおりのデザインにならない
• PCではきれいなのに、スマホだと崩れてしまう
• 他の装飾（ボックスやボタンなど）にまで影響が出る

私が意識しているコツは次の3つです。

• まずはテスト用の記事や下書きで試してから、本番の記事に反映する
• 一度にたくさんのCSSを追加せず、1つずつ足して変化を見る
• 使わないと判断したCSSは、そのまま放置せず削除する

このあたりを押さえておくだけでも、Cocoonのテーブルカスタマイズで大きくレイアウトを崩してしまうリスクをだいぶ減らせます。

Cocoonテーブルでよくあるつまずきと解決策

テーブルの色が変わらない・思ったように反映されない

セルに背景色を設定しているのに、思った色にならなかったり、ほとんど変化が分からなかったりすることがあります。これは、テーマやスキン側のスタイルに上書きされている可能性が高いです。

そんなときは、次のポイントを確認してみてください。

• 使用中のスキンでテーブルのデザインが強めに指定されていないか
• Cocoon設定のデザイン関連の項目に、テーブルに関する設定がないか
• 別のプラグインがテーブルのスタイルを上書きしていないか

どうしても思いどおりにならない場合は、セルの背景色は最小限にとどめて、その代わり文字の太さや配置でメリハリを付ける方法もあります。シンプルな表でも、内容が整理されていれば十分に読まれます。

行や列を増やしすぎて、スマホでぐちゃぐちゃになる

テーブルを作っていると、「あの情報も入れたい」「この項目もあったほうがいい」となって、行や列がどんどん増えてしまうことがあります。その結果、スマホで見ると文字が小さくなりすぎたり、横スクロールが長くなりすぎたりしてしまいます。

そうならないためには、次のようなことを意識してみてください。

• 一番伝えたい比較ポイントを3〜4個に絞る
• どうしても項目が多い場合は、テーブルを2つに分ける
• 細かい注意書きは、テーブルの下に小さめの文字でまとめる

テーブルは「情報をぎゅっとまとめるためのもの」なので、そもそも詰め込みすぎないことが大切です。迷ったら、一度プリントスクリーンを撮ってスマホサイズで眺めてみると、どこが読みづらいか分かりやすくなります。

セルを結合したいけれど、うまくできない

セル結合は、ブロックエディタでも対応していますが、思ったとおりに結合できずに戸惑う人も多いです。特に、複雑な結合をしようとすると、レイアウトが崩れやすくなります。

個人的な経験から言うと、初心者のうちは次のように割り切ってしまうほうが安全です。

• セル結合が必要なほど複雑な表にしない（デザインを簡略化する）
• どうしても結合したい箇所だけ、HTMLを確認しながら慎重に編集する

セル結合を使わなくても、行や列の構成を工夫すれば十分見やすい表は作れます。無理に凝った結合に挑戦するよりも、「シンプルで分かりやすい構成」に寄せたほうが結果的に読者に喜ばれます。

よくある質問（FAQ）

Q1. Cocoonのテーブルだけで、十分きれいな比較表は作れますか？

A1. 多くのケースでは、Cocoon標準のテーブルだけで十分きれいな比較表を作れます。大事なのは、デザインを派手にすることではなく、「何を比較したいのか」をしっかり整理し、項目を絞ることです。

この記事で紹介してきたように、列数を抑えて、ストライプやヘッダー行をうまく活用すれば、読みやすくて分かりやすい表になります。まずは標準機能で作ってみて、「もっと凝りたい」と感じたところだけ徐々にカスタマイズしていくのがおすすめです。

Q2. Cocoonのテーブルがスマホで見づらいと感じるときは、どうすればいいですか？

A2. まず見直したいのは「列の数」と「1セルに入れている文字量」です。この2つを減らすだけでも、かなり読みやすさが変わります。

それでも厳しい場合は、横スクロール前提の表に切り替えたり、テーブルを2つに分けて情報を整理したりするのがおすすめです。プレビュー機能でスマホ表示をチェックしながら、「どのくらいの情報量ならストレスなく読めるか」を確認して、テーブルの作り方を微調整していきましょう。

Q3. CSSやHTMLが苦手でも、Cocoonのテーブルを使いこなせますか？

A3. はい、大丈夫です。この記事で解説した範囲の作り方は、基本的にブロックエディタの操作だけで完結します。

CSSやHTMLは、「もっとデザインにこだわりたくなったら、少しずつ触っていく」くらいのスタンスで問題ありません。まずは標準機能だけでテーブルを作り、自分のブログに合う形をつかんでから、必要な部分だけカスタマイズを足していくと、無理なくステップアップできます。

まとめ：Cocoonのテーブルは「絞る・そろえる・見せ方を決める」がカギ

この記事のポイントを整理しておきます

今日からできる最初の一歩としては、この記事で紹介した料金表テンプレを一つコピーし、自分のブログ用に書き換えてみることです。プラン名と料金、向いている人の3列だけのシンプルな表でかまいません。

一度「自分でテーブルを作れた」という感覚をつかめれば、比較表やカスタマイズもぐっと身近なものになります。Cocoonのテーブルは、慣れてしまえば心強い武器になるので、ぜひ気楽に触ってみてください。