【Cocoon】テーブル/表を作成する方法を丁寧に解説（ブロックエディタ）

本記事はWordPressテーマ「Cocoon」を使っていて、記事はブロックエディタで書いている方向けの記事です。

ブロックエディタ（Gutenberg）におけるテーブル（表）の作り方を丁寧に解説していきます。

だいたい表で悩むことは書いていますので、一通りさっと見てもらうだけでもあなたの力になれると思います。

ワードプレスのブロックエディタにおける基本的な表の作り方
テーブルブロックでできること・できないこと
Cocoon設定で表をスクロール設定してみる

上記のような内容になっています

エクセルとかパワポで表作って画像として挿入するのもいいんですが、SEO的な理由もありますし、

ワードプレスで普通に表作れますからね、やり方を知っておいて損はないです。

使用している画像が最新のWordPressのバージョンではないため、若干現状と異なる部分があります。

そこまで大差ないので、問題ないと判断しております。ご了承願います。

基本的なテーブル・表の作り方
テーブルブロックでできること
テーブルブロックでできないこと
Cocoon設定でスクロール設定
見やすい表が作れますように
Cocoonの「困った」を解決する記事
1. Cocoonの使い方
2. 記事の書き方

基本的なテーブル・表の作り方

まずは基本を押さえましょう！

記事を見ながらあなたも一緒にやってみてください。

表ブロックの選択

まずはワードプレスの記事一覧⇒新規追加より編集画面を出してください。

そしたら下の順番で表ブロックを呼び出します。

ブロックの追加を選択
フォーマットを選択
表を選択

最新バージョンでは、テキストというくくりにあります

Cocoonブロックではないことに注意ですよ

行数・列数の指定

表ブロックを選択すると、下の画像のように列数と行数を指定するブロックが出てきますので、必要数を入力して表を作成ボタンを押しましょう。

列数も行数も後から変更ができますので、だいたいの数で指定すれば大丈夫です

セルにテキストを入力する

表の一つ一つのマスをセルといいます。そのマス（セル）に文字を書いていきましょう。

これで基本的な表の作り方はおしまいです。下のような表が作れました。

くだもの	リンゴ	ぶどう	もも	ナシ
値段	１００円	４００円	３００円	２００円
安さランキング	1位	4位	3位	2位

表の見本

次の項目では、この表のデザインを変えたり、位置を変更したりとできることを確認していきましょう

テーブルブロックでできること

投稿画面のツールバーやサイドバーを使うことにより、表のデザインなどを編集することができます。

そのやり方を一つずつ確認していきましょう

表の左寄せ・中央揃え・右寄せなど

下の画像のように表ブロック上で左クリックするとツールバーで表自体をどこに位置するか選択することができます。

左寄せ
中央揃え
右寄せ
幅広
全幅

上の5種類から選択しましょう

行・列の追加/削除

表ブロック上で左クリックするとツールバーで行・列をどのように追加・削除するか選択することができます。

テキストの左寄せ・中央揃え・右寄せ

表ブロック上で左クリックすると、カラム（列）ごとに左寄せ・中央寄せ・右寄せの選択がツールバーでできます。

逆に一つのセルだけ中央寄せにするとか、行で指定して右寄せにするなどはできません。指定単位は列（カラム）です

セルに画像を入れる

まずは画像を入れたいセルを選択しましょう。

そしたらツールバーの▼を押して、インライン画像を選択してください。

ファイルをアップロードまたはメディアライブラリから挿入したい画像を選びましょう

スタイル（デフォルト/ストライプ）の指定

テーブルブロックの上で左クリックした後、サイドバーを見るとスタイルの選択ができるようになります。

デフォルトかストライプのどちらかを選びましょう。

セルの幅を固定

テーブルブロックの上で左クリックした後、サイドバーを見ると表のセル幅を固定するかしないか選択できるようになります。

表のセル幅を固定すると、どんなにながい文章だろうと、固定幅になります	リンゴ	ぶどう	もも	ナシ
値段	１００円	４００円	３００円	２００円
安さランキング	1位	4位	3位	2位

セル幅を固定するとわけわかんなくなることもあります

表のセル幅を固定していないです。スクロール設定にしているので、横にスクロールができます。	リンゴ	ぶどう	もも	ナシ
値段	１００円	４００円	３００円	２００円
安さランキング	1位	4位	3位	2位

テキスト色・背景色の指定

テーブルブロックの上で左クリックした後、サイドバーを見ると色を選択できるようになります。

文字色を変更することや

背景色を単色またはグラデーションできます

1か所だけ文字色を変えたり、1か所だけ背景色を変えたりすることはできません。

ちなみに私のブログの表は基本的に緑色が入っていますが、これはCocoon設定⇒全体のサイトキーカラーが影響しているようです

あなたの表も色が入っていたら、こちらを確認してみましょう

ヘッダー/フッター

テーブルブロックの上で左クリックした後、サイドバーを見るとヘッダーとフッターを選択できるようになります。

見出しを入れたいときに役立ちますね

表にアフィリエイトリンク・バナー広告を貼る

表の中にバナー広告やアフィリエイトリンクを貼り付けることも工夫次第で可能です。

▼こんな感じ▼

	ConoHa WING
	ココナラ

詳しくは下の関連記事で解説していますので、気になる方はチェック願います。
関連記事【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】

テーブルブロックでできないこと

これまではブロックエディタの表でできることを紹介してきましたが、本項目では逆に何ができないのかを見ていきたいと思います。

セルの結合

エクセルのようにセルの結合をすることができません。エクセルに慣れている人にはちょっと不便かもしれません。

セルごとの背景色変更

表全体の背景はサイドバーから選択することができましたが、どれか一つのセルの背景の色を変更することはできません。

どこか一つのセルを目立たせたかったら、文字の色をツールバーを使って変更するのがよさそうですね。

文字色の変更方法がわからない方は関連記事【Cocoon】投稿画面ツールバー機能一覧｜文字色・ルビほか【初心者向け】

この記事から確認いただければわかります。

行ごと・セルごとの中央寄せ・右寄せ

表中の文字の中央寄せ・右寄せは列ごとでしかできません。行単位やセル単位では不可能です。

我慢して全部中央寄せとか全部左寄せにしておくのがいいと思います

プラグインで解決

TinyMCE Advanced

これらの問題はプライグインの「TinyMCE Advanced」を使う。かつ、ブロックエディタではなくクラシックエディタを使用することで解決できるようです。

詳細は外部リンクWordPress Gutenbergでの表・テーブルの作り方。複雑な表は「Classic Paragraph」を使おう！

に記載がありますので、興味がある方は確認をお願いします。

Flexible Table Block

ブロックエディターを使用の場合はこちらのプラグインがよさそうです。2021年10月から使用できるようになった新しいプラグインですね。

Flexible Table Block

Flexible Table Block は、自由な構成でテーブルを作成できる WordPress のブロックエディター用カスタムブロックプラグインです。

開発者さんのツイッターより。セルの結合・分割が実装されている様子↓

テーブルブロックのセル結合・分割を実装！
やっぱり無理かもとちょっと諦めかけていたけど、これでようやく完成までの道のりが見えた。。 pic.twitter.com/7rgytl3Cyk
— Tetsuaki Hamano / 浜野哲明 (@tetsuaki_hamano) September 30, 2021