本記事はWordPressテーマ「Cocoon」を使っていて、記事はブロックエディタで書いている方向けの記事です。
ブロックエディタ（Gutenberg）におけるテーブル（表）の作り方を丁寧に解説していきます。
だいたい表で悩むことは書いていますので、一通りさっと見てもらうだけでもあなたの力になれると思います。
- ワードプレスのブロックエディタにおける基本的な表の作り方
- テーブルブロックでできること・できないこと
- Cocoon設定で表をスクロール設定してみる
上記のような内容になっています
| くだもの |  |  |  |  |
| 値段 | １００円 | ４００円 | ３００円 | ２００円 |
| 安さランキング | 1位 | 4位 | 3位 | 2位 |
エクセルとかパワポで表作って画像として挿入するのもいいんですが、SEO的な理由もありますし、
ワードプレスで普通に表作れますからね、やり方を知っておいて損はないです。
基本的なテーブル・表の作り方
まずは基本を押さえましょう！
記事を見ながらあなたも一緒にやってみてください。
表ブロックの選択
まずはワードプレスの記事一覧⇒新規追加より編集画面を出してください。
そしたら下の順番で表ブロックを呼び出します。
- ブロックの追加を選択
- フォーマットを選択
- 表を選択
Cocoonブロックではないことに注意ですよ
行数・列数の指定
表ブロックを選択すると、下の画像のように列数と行数を指定するブロックが出てきますので、必要数を入力して表を作成ボタンを押しましょう。
列数も行数も後から変更ができますので、だいたいの数で指定すれば大丈夫です
セルにテキストを入力する
表の一つ一つのマスをセルといいます。そのマス（セル）に文字を書いていきましょう。
これで基本的な表の作り方はおしまいです。下のような表が作れました。
| くだもの | リンゴ | ぶどう | もも | ナシ |
| 値段 | １００円 | ４００円 | ３００円 | ２００円 |
| 安さランキング | 1位 | 4位 | 3位 | 2位 |
次の項目では、この表のデザインを変えたり、位置を変更したりとできることを確認していきましょう
テーブルブロックでできること
投稿画面のツールバーやサイドバーを使うことにより、表のデザインなどを編集することができます。
そのやり方を一つずつ確認していきましょう
表の左寄せ・中央揃え・右寄せなど
下の画像のように表ブロック上で左クリックするとツールバーで表自体をどこに位置するか選択することができます。
- 左寄せ
- 中央揃え
- 右寄せ
- 幅広
- 全幅
上の5種類から選択しましょう
行・列の追加/削除
表ブロック上で左クリックするとツールバーで行・列をどのように追加・削除するか選択することができます。
テキストの左寄せ・中央揃え・右寄せ
表ブロック上で左クリックすると、カラム（列）ごとに左寄せ・中央寄せ・右寄せの選択がツールバーでできます。
逆に一つのセルだけ中央寄せにするとか、行で指定して右寄せにするなどはできません。指定単位は列（カラム）です
セルに画像を入れる
まずは画像を入れたいセルを選択しましょう。
そしたらツールバーの▼を押して、インライン画像を選択してください。
ファイルをアップロードまたはメディアライブラリから挿入したい画像を選びましょう
| くだもの | リンゴ | ぶどう | もも | ナシ |
| 値段 | １００円 | ４００円 | ３００円 | ２００円 |
| 安さランキング | 1位 | 4位 | 3位 | 2位 |
| くだもの | | | | |
| 値段 | １００円 | ４００円 | ３００円 | ２００円 |
| 安さランキング | 1位 | 4位 | 3位 | 2位 |
スタイル（デフォルト/ストライプ）の指定
テーブルブロックの上で左クリックした後、サイドバーを見るとスタイルの選択ができるようになります。
デフォルトかストライプのどちらかを選びましょう。
セルの幅を固定
テーブルブロックの上で左クリックした後、サイドバーを見ると表のセル幅を固定するかしないか選択できるようになります。
| 表のセル幅を固定すると、どんなにながい文章だろうと、固定幅になります | リンゴ | ぶどう | もも | ナシ |
| 値段 | １００円 | ４００円 | ３００円 | ２００円 |
| 安さランキング | 1位 | 4位 | 3位 | 2位 |
| 表のセル幅を固定していないです。スクロール設定にしているので、横にスクロールができます。 | リンゴ | ぶどう | もも | ナシ |
| 値段 | １００円 | ４００円 | ３００円 | ２００円 |
| 安さランキング | 1位 | 4位 | 3位 | 2位 |
テキスト色・背景色の指定
テーブルブロックの上で左クリックした後、サイドバーを見ると色を選択できるようになります。
| くだもの | | | | |
| 値段 | １００円 | ４００円 | ３００円 | ２００円 |
| 安さランキング | 1位 | 4位 | 3位 | 2位 |
| くだもの | | | | |
| 値段 | １００円 | ４００円 | ３００円 | ２００円 |
| 安さランキング | 1位 | 4位 | 3位 | 2位 |
1か所だけ文字色を変えたり、1か所だけ背景色を変えたりすることはできません。
ヘッダー/フッター
テーブルブロックの上で左クリックした後、サイドバーを見るとヘッダーとフッターを選択できるようになります。
見出しを入れたいときに役立ちますね
表にアフィリエイトリンク・バナー広告を貼る
表の中にバナー広告やアフィリエイトリンクを貼り付けることも工夫次第で可能です。
詳しくは下の関連記事で解説していますので、気になる方はチェック願います。
関連記事【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
テーブルブロックでできないこと
これまではブロックエディタの表でできることを紹介してきましたが、本項目では逆に何ができないのかを見ていきたいと思います。
セルの結合
エクセルのようにセルの結合をすることができません。エクセルに慣れている人にはちょっと不便かもしれません。
セルごとの背景色変更
表全体の背景はサイドバーから選択することができましたが、どれか一つのセルの背景の色を変更することはできません。
どこか一つのセルを目立たせたかったら、文字の色をツールバーを使って変更するのがよさそうですね。
文字色の変更方法がわからない方は関連記事【Cocoon】投稿画面ツールバー機能一覧｜文字色・ルビほか【初心者向け】
この記事から確認いただければわかります。
行ごと・セルごとの中央寄せ・右寄せ
表中の文字の中央寄せ・右寄せは列ごとでしかできません。行単位やセル単位では不可能です。
我慢して全部中央寄せとか全部左寄せにしておくのがいいと思います
プラグインで解決
TinyMCE Advanced
これらの問題はプライグインの「TinyMCE Advanced」を使う。かつ、ブロックエディタではなくクラシックエディタを使用することで解決できるようです。
詳細は外部リンクWordPress Gutenbergでの表・テーブルの作り方。複雑な表は「Classic Paragraph」を使おう！
に記載がありますので、興味がある方は確認をお願いします。
Flexible Table Block
ブロックエディターを使用の場合はこちらのプラグインがよさそうです。2021年10月から使用できるようになった新しいプラグインですね。
開発者さんのツイッターより。セルの結合・分割が実装されている様子↓
テーブルブロックのセル結合・分割を実装！
— Tetsuaki Hamano / 浜野 哲明 (@tetsuaki_hamano) September 30, 2021
やっぱり無理かもとちょっと諦めかけていたけど、これでようやく完成までの道のりが見えた。。 pic.twitter.com/7rgytl3Cyk
僕は複雑な表はエクセルで作って、画像としてブログにのせる方が楽なのでこのプラグインは入れていません
Cocoon設定でスクロール設定
スマホ表示で表を見たときに、横幅がスマホの画面に入りきらないことがよくあります。
そういうときにスマホ表示の人には表をスクロールしてみることができる設定がありますのでご紹介します。
Cocoon設定でできますので、Cocoon設定⇒本文と進んでください
真ん中くらいまで下にスクロールすると、テーブルという項目が出てきます。
これでスマホ表示では横スクロールができるようになりました。
見やすい表が作れますように
本記事では、【Cocoon】テーブル/表を作成する方法を丁寧に解説（ブロックエディタ）
ということで、Cocoonユーザー向けにテーブル/表の作り方・使い方を説明してきました。
あまり書くことないかな？と執筆前は思っていましたが、結構なボリュームになりましたね。
読者の限られた画面にどのようにしてわかりやすく見せるか？せっかく作るのであれば極限まで考えぬいた表をのせてくださいね。
めちゃめちゃ見にくい表が乗ってるブログは嫌ですもんね。
- 表が横長すぎてスクロールできても全体が見えなくてよくわかんない
- 幅が狭すぎて文字がよみづらい
- 表の項目が多すぎてどこに注目していいかわかんない
ぱっと見で理解できるのがベストです。
本記事の内容や、文字の大きさの工夫、セル内での改行の工夫などいろいろ試してみて、読者ファーストの表をぜひ作ってみてください。
Cocoonの「困った」を解決する記事
Cocoonの使い方
当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。
記事の書き方
特に本記事のように、記事を書くときに使うものについては下の記事で取りまとめています。読めばあなたの記事の幅が広がることでしょう。
あわせて読みたい【Cocoon】記事の書き方！投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
コメント