Cocoonの表、幅・色・横スクロールで困った私が、調べて解決したこととあきらめたこと

2026年10月21日2026年11月13日

当サイトはアフィリエイト広告を利用しています。

Cocoonの表の幅・色・横スクロール。表を61個作った私が、解決したこととあきらめたこと

見ていただきありがとうございます。

ぽぽです。

Cocoonで表を作っていて、こんなところで止まっていませんか。

マスごとに色を付けたい
スマホで表が横にはみ出す
列の幅が思うように変わらない

私も全部つまずいた側です。

Cocoonで書いていたのは、スケートボードのブログと、トランクルームのブログの2つ。

トランクルームのほうは、都道府県ごとの比較記事です。

1記事に表が20〜61個。

表だけで、1記事1〜2時間。

一応先にお伝えしておくと、こうです。

困ったこと	どうしたか
横スクロール	Cocoonの設定か、プラグインでできる
マスごとの色	プラグイン「Flexible Table Block」で解決
列の幅	基本の表ではあきらめた。Flexible Table Blockなら数字で決められる

ということで、調べて解決したことと、あきらめたことを順番に書いていきます。

この記事を書いている人

過去の自分：Cocoonで2つのブログを運営。表は調べながら手探り
いま：SWELLでブログ4年目

Cocoonの表で困ったことは3つ

Cocoonの表で困ったことと私がしたこと。横スクロールとマスごとの色はFlexible Table Blockで解決、列の幅は基本の表ではあきらめた、表の中のボタンはテンプレートで1つずつ入れて手間がかかった — Cocoonの表で困ったことと、私がしたこと

マスごとに色を付けられない

WordPressの基本の「テーブル」ブロックで変えられる色は、表全体の背景と文字の色まで。

スタイルを「ストライプ」にすると、1行おきに色が付きます。

Cocoonのスケートボードのブログで作った基本の表。スタイルはストライプで、背景に色を付けたところ — Cocoonのスケートボードのブログで作った、基本の表（ストライプ＋背景色）

でも「この1マスだけ黄色に」はできません。

比較表で「ここが一番安い」を目立たせたいときに困るんですよね。

スマホで横にはみ出す

列が多い表は、スマホで見ると画面からはみ出します。

トランクルームの比較表は、会社が横に並ぶので特にでした。

列の幅が思うように変わらない

基本のテーブルブロックにあるのは「表のセル幅を固定」のスイッチだけ。

列ごとに「ここは広く、ここは狭く」とは決められません。

Cocoonの公式フォーラムにも「各列のセル幅を調整したい」という要望が出ています。

困っているのは私だけではなかったようです。

スケートボードのブログでは、結局どれも直していません。

表のある12記事は、全部基本の表のまま。

色も、横スクロールも、幅の指定もゼロです。

ちなみに、このぽぽブログはSWELLで書いています。
CocoonからSWELLに変えて、記事が崩れた3ヶ月の話はこちらです。

横スクロールは、Cocoonの設定でできます

まず一番かんたんなのが、横スクロール。

Cocoonには、最初から設定があります。

押す場所	どうなるか
Cocoon設定 →「本文」タブ	本文の設定が開く
「テーブル設定」の「横幅の広いテーブルは横スクロール」にチェック	画面より広い表が、スマホで横にスクロールできるようになる
「変更をまとめて保存」	設定が保存されて、全部の表に効く

出どころ：Cocoon公式「Cocoonのテーブルをレスポンシブ対応にする」

これは全部の表にまとめて効きます。

1つずつ設定しなくていいのは楽ですね。

色と横スクロールは、Flexible Table Blockで解決

マスごとの色は、Cocoonの設定ではできません。

私がネットで調べて見つけたのは、無料のプラグイン「Flexible Table Block」です。

Flexible Table Blockでできること

マスごとに色を付ける
パソコンとスマホ、それぞれで横スクロール
マスをくっつける（結合）
列の幅を数字で決める

出どころ：WordPress.org「Flexible Table Block」

入れ方

押す場所	どうなるか
プラグイン →「新規追加」	プラグインを探す画面が開く
「Flexible Table Block」で検索 →「今すぐインストール」→「有効化」	使えるようになる
記事の「＋」→「Flexible Table」	色や横スクロールを決められる表が入る

実際に使った表

トランクルームの静岡の記事は、この表が17個。

色を付けたマスは41個です。

Flexible Table Blockで作ったトランクルームの比較表。左の列に色を付け、安い値段に黄色の線を引いている。一番下の公式サイトボタンは大きさがバラバラ — 静岡の記事の比較表。左の列に色、安い値段に黄色の線（いまのブログで表示した画面）

列の幅は、基本の表ではあきらめた

スケートボードのブログでは、幅を変えるのをあきらめています。

基本のテーブルブロックには、列ごとの幅を決める場所がないからです。

ただ、Flexible Table Blockを入れたあとは別。

マスを選んで、幅を「10%」「25%」のように数字で決められます。

実際に決めていた幅

記事	幅を数字で決めたマス
静岡	34マス（25%ずつ）
大田区	88マス

同じCocoonでも、プラグインを入れるかどうかで別物でした。

幅で止まっている人は、まずFlexible Table Blockを試してみてくださいね。

表だけで、1記事1〜2時間かかった

トランクルームの記事は、すごく調べながら書いていました。

表は1記事に20〜61個。

一番多い神奈川の記事は61個です。

一番手間だったのが、表のマスに「公式サイト」ボタンを入れる作業。

Cocoonでは「テンプレート」という機能を使っていました。

押す場所	どうなるか
Cocoon設定 →「テンプレート」→「新規追加」	ボタン1つ分を登録する
記事の編集画面でテンプレートを選ぶ	マスに「[temp id=41]」のような記号が入る

出どころ：Cocoon公式「テンプレート文（定型文）を登録して使い回す方法」

静岡の記事だけで、登録したボタンは8種類。

表の中に入れた記号は16個です。