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

Cocoonテーブル/表作成ブログ

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

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

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

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

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

くだもの
値段100円400円300円200円
安さランキング1位4位3位2位
こんな感じの表が作れるようになります

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

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

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

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

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

表ブロックの選択

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

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

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

Cocoonブロックではなくフォーマットですよ

行数・列数の指定

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

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

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

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

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

くだものリンゴぶどうももナシ
値段100円400円300円200円
安さランキング1位4位3位2位
表の見本

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

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

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

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

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

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

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

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

行・列の追加/削除

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

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

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

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

セルに画像を入れる

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

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

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

くだものリンゴぶどうももナシ
値段100円400円300円200円
安さランキング1位4位3位2位
リンゴの画像が入りました
くだもの
値段100円400円300円200円
安さランキング1位4位3位2位
文字を消してそれぞれ画像だけにしました

スタイル(デフォルト/ストライプ)の指定

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

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

セルの幅を固定

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

表のセル幅を固定すると、どんなにながい文章だろうと、固定幅になりますリンゴぶどうももナシ
値段100円400円300円200円
安さランキング1位4位3位2位
セル幅を固定するとわけわかんなくなることもあります
表のセル幅を固定していないです。スクロール設定にしているので、横にスクロールができます。リンゴぶどうももナシ
値段100円400円300円200円
安さランキング1位4位3位2位

ヘッダー/フッター

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

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

全体背景色の変更

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

この4色から選ぶことができます

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

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

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

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

セルの結合

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

セルごとの背景色変更

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

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

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

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

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

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

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

TinyMCE Advancedプラグインで解決

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

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

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

僕は複雑な表はエクセルで作って、画像としてブログにのせる方が楽なのでこのプラグインは入れていません

Cocoon設定でスクロール設定

スマホ表示で表を見たときに、横幅がスマホの画面に入りきらないことがよくあります。

そういうときにスマホ表示の人には表をスクロールしてみることができる設定がありますのでご紹介します。

Cocoon設定でできますので、Cocoon設定本文と進んでください

真ん中くらいまで下にスクロールすると、テーブルという項目が出てきます。

ここで横幅の広いテーブルは横スクロールを選択すればOK

これでスマホ表示では横スクロールができるようになりました。

見やすい表が作れますように

本記事では、【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)

ということで、Cocoonユーザー向けにテーブル/表の作り方・使い方を説明してきました。

あまり書くことないかな?と執筆前は思っていましたが、結構なボリュームになりましたね。

読者の限られた画面にどのようにしてわかりやすく見せるか?せっかく作るのであれば極限まで考えぬいた表をのせてくださいね。

めちゃめちゃ見にくい表が乗ってるブログは嫌ですもんね。

  • 表が横長すぎてスクロールできても全体が見えなくてよくわかんない
  • 幅が狭すぎて文字がよみづらい
  • 表の項目が多すぎてどこに注目していいかわかんない

ぱっと見で理解できるのがベストです。

本記事の内容や、文字の大きさの工夫、セル内での改行の工夫などいろいろ試してみて、読者ファーストの表をぜひ作ってみてください。

関連記事

当ブログではCocoonにかかわる記事をほかにもいくつか投稿しています。

下のまとめ記事よりすべてのCocoon関連記事を確認することができるので、ぜひほかの記事も読んでみてください

コメント

プロフィール
峠

とうげです。30代サラリーマンです。地方進学校→一浪→大学理工学部→就職。行動することを大切にしています。投資、アフィリエイト、ブログやってます。インデックス投資で1000万円運用中。本業は地方に長期出張する施工管理→技術職へ異動。小さいときはロボット作り屋さんになりたかった。

峠をフォローする
タイトルとURLをコピーしました