【Cocoon】表(テーブル)の作り方｜色付けやスクロール含めた7つの機能も設定できる！

「表（テーブル）の作り方は？」

「表（テーブル）を横にスクロールできるの？」

「表（テーブル）で設定できる他の機能が知りたい」

この記事では、そんな方に向けて、Cocoonで表（テーブル）の作り方を解説します。

この記事を読めば、表（テーブル）の作り方はもちろん、

• 色付け
• 横にスクロール
• その他の機能

も理解できるようになります。

私も初めは、表（テーブル）を作るだけしかできなかったが、半年以上ブログをやっているうちにいろんな機能を使いこなせるようになりました。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

さっそく本題に入りましょう。

Cocoon表(テーブル)の作り方

Cocoonで表（テーブル）の作り方は、下記の通りです。

Cocoon表(テーブル)で設定できる7つの機能

Cocoonの表（テーブル）で設定できる機能は、

の7つあります。

それぞれ詳しく解説します。

色をつける

表（テーブル）の

• テキスト
• 背景

の2つに色をつけれます。

使いたい色がない場合は、「No color selected」をクリックし、さらに細かく色を指定できます。

「ネットなどで見つけた、あの色が使いたい！」と思った場合は、スポイト/カラーピッカーでカラーコードを調べて同じ色を使うことができます。

スポイト/カラーピッカーでカラーコードを調べる方法は、下の記事を参考にしてください。

スタイルの変更

表（テーブル）のスタイルは

• デフォルト
• ストライプ

の2種類から選べます。

行・列の追加や削除

表（テーブル）の行・列の追加や削除する方法です。

行ごとの左・中央・右寄せ

表（テーブル）の行を

• 左寄せ
• 中央配置
• 右寄せ

にできます。

表の左・中央・右寄せ

表（テーブル）自体の

• 左寄せ
• 中央配置
• 右寄せ

ができます。

セル幅の固定

表（テーブル）のセル幅を固定する方法です。

ヘッダー・フッターラベルの挿入

表（テーブル）に

• ヘッダーラベル
• フッターラベル

を挿入できます。

Cocoon表(テーブル)で設定できない4つの機能

Cocoonの表（テーブル）で設定できない機能は、

の4つあります。

それぞれ詳しく解説します。

セルの結合

エクセルやスプレッドシートのように、Cocoonでセルの結合はできません。

また、エクセルやスプレッドシートで結合したセルをコピーして、WordPressの記事にペーストしても結合が解除されます。

枠線を消す

表（テーブル）の枠線を消すことはできません。

ただ、枠線の色をページと同じ色に変更すれば、枠線が消えたように見せることができます。

枠線の色を変更する場所は、下記の通りです。

セルごとに色を変える

セルごとにテキストや背景の色を変えれません。

色を変えた場合、表（テーブル）すべてのテキストや背景に影響を及ぼします。

列・セルごとの左・中央・右寄せ

列・セルごとに左・中央・右寄せできません。

配置を変更は、行ごと・表（テーブル）自体だと可能です。

Cocoon表(テーブル)を横にスクロールする方法

Cocoonで表（テーブル）を横にスクロールする方法は、下記の通りです。

1行目を固定させる方法

Cocoonでは、表（テーブル）の1行目を固定できます。

Cocoon表(テーブル)を作るときの2つの注意点

Cocoonで表（テーブル）を作るときの注意点は、下記2つあります。

それぞれ詳しく解説します。

表を作る用のプラグインを使わない

表（テーブル）を作る用のプラグインを使うことはオススメしません。

なぜなら、プラグインをインストールすることによって、サイトが重くなるからです。

下記が、ページの読み込み時間に対するユーザーの離脱率がどれくらいかを表したデータです。

ページの読み込み時間	離脱率
1~3秒	32%
1~5秒	90%
1~6秒	106%
1~10秒	123%

参考：Googleが2018年に発表したモバイルサイトの表示速度および直帰率に関するデータ

このようにページの読み込み時間が遅くなるほど、離脱率が上昇するのが分かります。

他に1つもプラグインをインストールしていなければ話は別になりますが、

多くの人は、プラグインを複数インストールしていると思います。

ですので、なるべく重要でないプラグインは使わないようにしましょう。

自分のブログの表示速度は、PageSpeed Insightsで確認できます。

どうしても表（テーブル）の

• セルを結合させたり
• セルごとに色を変えたり

したい場合は、

などのプラグインをインストールしましょう。

表示がくずれないようにする

表（テーブル）に入力したテキストが多ければ、表示が崩れる可能性があります。

表(テーブル)の表示が崩れないように、先ほど紹介した表（テーブル）を横スクロールできるように設定しましょう。

当ブログ使用「SWELL」は表(テーブル)がオシャレで優秀！

当ブログでは、2024年4月からWordPressテーマ「SWELL」を使っています。

SWELLのテーブル表は、オシャレかつ、カスタマイズが豊富で優秀。

以下の表は、CocoonとSWELLで設定できる機能を比較したものです。

	Cocoon	SWELL
色をつける	可	可
スタイルの変更	可	可
行・列の追加や削除	可	可
行ごとの左・中央・右寄せ	可	可
表の左・中央・右寄せ	可	可
セル幅の固定	可	可
ヘッダー・フッターラベルの挿入	可	可
横スクロール	可	可
セルの結合	不可	可
セルごとに色を変える	不可	可
ヘッダーの固定	不可	可
〇×などアイコンの挿入	不可	可
列・セルごとの左・中央・右寄せ	不可	不可

SWELLのカスタマイズ機能を使うと、以下のようなテーブル表も作れます。

ASP		特徴	公式サイト
	A8.net	アフィリエイト満足度13年連続No.1！広告主数は25,000社以上と日本最大級！	A8.net
	afb（アフィb）	女性ジャンルに強い！消費税分を上乗せして支払い！振込手数料が無料！	afb（アフィb）
	もしもアフィリエイト	『W報酬制度』で報酬が12%アップ！初心者ブロガー向けにノウハウ配信！	もしもアフィリエイト
	バリューコマース	Yahoo!ショッピング、Amazon、楽天など大手広告主も参加！報酬単価が高い！	バリューコマース
	アクセストレード	金融、保険、Eコマース、求人、エンタメ、サービスに強い！振込手数料が無料！	アクセストレード
	JANet	金融系ジャンルに強い！報酬単価が高い！	JANet

よりカスタマイズ性が高く、おしゃれなテーブル表を作りたい人に、SWELLもおすすめですよ。

まとめ：表(テーブル)でデータ比較に役立てよう

今回は、Cocoonで表（テーブル）の作り方を紹介しました。

当ブログでは、Cocoonに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。