Cocoon表(テーブル)の作り方｜色付けやスクロール含めた9項目でカスタマイズできる！

「テーブル表の設定方法が知りたい…」

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

「比較表はどうやって作るの？」

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

この記事を読めば、あなたも簡単に

• テーブル表の色付けやデザイン変更などの設定ができる
• テーブル表を横スクロールできる
• 比較表を作れる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、ぱっと見で分かりやすく情報を整理したテーブル表を作成できました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

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

本記事はWordPressテーマ「SWELL」で作成しているので、デザインが抜群にオシャレです！

Cocoon表(テーブル)の作り方とカスタマイズ設定7つ

Cocoonでテーブル表の作り方は下記のとおりです。

ちなみに、テーブル表は以下2つの方法からも呼び出せます。

テーブル表で設定できる項目は7つあります。

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

テキストと背景に色をつける

Cocoonではテーブル表のテキストと背景に色をつけることができます。

背景色は偶数行かつ2列目以降しか付けれません。

色をつける方法は、右サイドバーのスタイルタブ内にある「テキスト」「背景」から選んでください。

もし使いたい色がない場合は、「No color selected」をクリックし、直感的に色を選べます。

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

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

ちなみに、テキストカラーは１つずつ設定することもできますよ。

色を変更したいテキストを全選択し、ツールバー項目の文字から選んでください。

表のデザイン(=スタイル)を変更する

Cocoonではテーブル表のデザイン(=スタイル)を以下の2種類から選べます。

設定方法は、右サイドバーのスタイルタブ内にある「スタイル」から選んでください。

表に行と列を追加・削除する

Cocoonではテーブル表の行と列を左右上下に追加・削除できます。

ツールバー項目の表を編集からカスタマイズしてください。

行は横、列は縦です。

セル幅を固定する

Cocoonではテーブル表のセル幅を固定できます。

設定方法は、右サイドバーの設定タブ内にある「表のセル幅を固定」で選択してください。

テーブル全体/行ごとのテキストの配置を決める

Cocoonではテーブル表全体の配置と、行ごとでテキストの配置を設定できます。

テーブル表全体の配置を設定したい場合は、ツールバー項目の配置から選びます。

行ごとでテキストの配置を設定したい場合は、ツールバー項目のカラムの配置を変更から選んでください。

ヘッダー・フッターラベルを追加する

Cocoonではテーブル表にヘッダーラベルとフッターラベルを追加できます。

ヘッダーとは…テーブル表上部の場所のこと

フッターとは…テーブル表下部の場所のこと

それぞれの設定方法は、右サイドバーの設定タブ内にある「ヘッダーセクション」「フッターセクション」から行えます。

キャプションを追加する

Cocoonではテーブル表にキャプションを追加できます。

キャプションとは…テーブル表に付け加える短い説明文やタイトルのこと

設定方法は、ツールバー項目のキャプションを追加をクリックして文言を入力してください。

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

Cocoonでテーブル表を横スクロールさせる方法は下記のとおりです。

１列目を固定表示させる

横スクロールするテーブル表の1列目を固定させることができます。

設定方法は、同ページ内にある「テーブルの1列目を固定表示」にチェックして変更をまとめて保存をクリックすればOKです。

【実体験】Cocoonテーブルで比較表を作ってみた！

Cocoonのテーブルブロックを使って、以下のような比較表が作れます。

比較表を以下6つのステップに分けて作成します。

ステップ①：表全体のレイアウトを作る

始めに、ページにテーブルブロックを挿入して表全体のレイアウトを作成していきます。

今回作成するテーブル表では、以下のように設定しました。

テーブル表全体のフォントサイズを設定する方法は、セル内のテキストを全選択し、ツールバー項目のフォントサイズから選んでください。

ステップ②：商品やサービスの詳細を入力する

テーブル表の1列目と2行目のセルに商品やサービスの詳細を入力します。

今回作成するテーブル表では以下を入力しました。

ステップ③：商品やサービスの画像を挿入する

テーブル表の1番上の行の2~7列目のセルに商品やサービスの画像を挿入します。

今回作成するテーブル表ではASP側で用意されている広告タグを使用しましたが、外部サイトのフリー素材や自作した画像の活用もおすすめですよ。

画像を挿入する方法は以下の2パターンあります。

ステップ④：テキストリンクを挿入する

テーブル表の1番上の行に挿入した画像の下にテキストリンクを挿入します。

テキストリンクを挿入する方法は以下の2パターンあります。

ステップ⑤：○△×などアイコンの挿入で優劣をつける

商品やサービスの詳細を入力したセルの背景に○△×などのアイコンを挿入しましょう。

設定方法は、テキストを全選択してツールバー項目の背景アイコンから選んでください。

ステップ⑥：評価スターをつける

最後の仕上げに、1番下の行に評価スターをつけていきます。

評価スターは以下のようなショートコードを作成して呼び出せます。

[star rate="〇〇"]　※〇〇には数字を入れてください。

これで、Cocoonのテーブルブロックを使って比較表を作成できます。

当ブログ愛用「SWELL」の表(テーブル)はカスタマイズ性が高くてオシャレ！

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

以下の表は、CocoonとSWELLで設定できる項目を比較したものです。(以下の表はSWELLで作成)

		Cocoon	SWELL
テキストに色をつける	表全体	可	可
	1セルごと	可	可
背景に色をつける	全体ごと	偶数行のみ	可
	1セルごと	不可	可
配置(左・中央・右寄せ)	表全体	可	可
	行ごと	可	可
	1セルごと	不可	可
スタイルの変更		2種類	4種類
行・列の追加や削除		可	可
セル幅の固定		可	可
ヘッダー・フッターの挿入		可	可
横スクロール		可	可
〇×などアイコンの挿入		可	可
セルの結合		不可	可
ヘッダーの固定		不可	可
1列目の固定		不可	可
スマホで表の縦並び		不可	可

このようにCocoonにできてSWELLにできないことはありません。

SWELLのテーブルブロックを使うと、以下のような表が作れます。

SWELLの魅力に気づき、当ブログでは2024年4月から「Cocoon」から「SWELL」へ乗り換えました。

Cocoon開発者のわいひらさんもCocoonからの乗り換え先としてSWELLをおすすめしていますよ。

Cocoonから他のテーマに乗り換える場合はSWELLな最も適しています。

引用：Cocoonから乗り換えるのにおすすめなテーマはこれ。注意点・変更方法など – Cocoon公式サイト

よりカスタマイズ性が高く、おしゃれなテーブル表を作りたい方は、SWELLをチェックしてみてください。

Cocoon表(テーブル)の作成でよくある質問3つ

ここからはCocoonのテーブル表を作るうえでよくある質問に回答します。

まとめ：Cocoonテーブルは比較表や料金表の作成に便利！

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

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

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