Cocoonでテーブル/表のタイトルの文字だけ中央寄せにする方法

こんにちは！エディです。

今回は、WordPressでCocoonのテーマを利用しており、ブロックエディターで記事を書いている方向けの記事になります。

記事内に表を挿入する際に使う「表（テーブル）」ブロックにおいて、表のタイトル・標題（ヘッダー）行の文字テキストを中央寄せ、それ以下の文字を左寄せにする方法がわからず困っていないでしょうか。

私は上記の方法がわからず悩んでいましたが、解決策が判明したのでご紹介します。

1 テーブル（表）のタイトルテキストを中央寄せにする

1-1 「テーブル」ブロックとは

「テーブル」ブロックとは、下表のようにデータを視覚的にイメージさせるために表を記事内に挿入させるためのものです。

テキストでつらつら書くよりもわかりやすくできます。

1-2 文字テキストの配置の変更とは

表のセル内のテキストは、左寄せ、中央寄せ、右寄せにすることができます。

＜例：中央寄せ＞

＜例：右寄せ＞

方法は、表ブロック上で左クリックしたら出てくるツールバーから、3本線のアイコン「テキストの配置を変更」をクリックして、左寄せ、中央寄せ、右寄せの3つから選ぶだけです。

1-3 問題：テキストの配置変更が列単位でしかできない

ここで、私を悩ます問題がでてくるのです。

それは、「テーブル」ブロックにおいて、前述した方法だと「一つのセルだけ」とか「行単位」で左寄せや右寄せができないということです。

以下の画像は左寄せしたケースですが、見てわかる通り表の一番上の行のタイトル（ヘッダー）テキストも一緒に左寄せされてしまい、違和感があります。

理想は、ヘッダー部分の行だけは中央配置にしたいです。

1-4 解決：ヘッダーセクションを使う

色々試行錯誤して解決策がやっとわかりましたので、以下に記載していきます。

方法は、「テキストの配置を変更」から左寄せを選んだあと、選んだ左寄せを再度クリックするのです。

そうすると、クリックした先のヘッダーのタイトルセルだけ中央配置になります。この操作を中央寄せしたい列全てにおいて行うのです。

＜表全体のテキストは左寄せ、タイトルだけ中央寄せにする＞

①ヘッダーセクションの追加

画像のように、表を左クリックすると管理画面の右帯に出現するブロックタブにて、ヘッダーセクションをオンにして追加する。

②「テキストの配置を変更」から「左寄せ」をクリック

他の列も同じように左寄せを行い、以下の状態にする。

③この状態で再度「左寄せ」をクリック

「天気」の列にカーソルを合わせ、左寄せをクリックする。

そうすると以下のようにタイトルの「天気」が中央寄せになるので、他の列も同じように行う。

④完成形

ヘッダーセクションを全て中央寄せにできました

注意点として、以下2点あります。

①タイトルより下のテキストは、タイトルを中央寄せにする場合は右寄せはできません。原因は不明ですが、仕様だと思います。

②ヘッダーセクションを追加して操作すると可能になる方法であり、ヘッダーセクションを追加せずに行っても一番上の行は中央寄せになりません。

2 最後に

視覚に訴えてわかりやすくすることを目的とした表の見た目はとても重要です。

今回のように、タイトル部分のテキストの配置も細かいですが気になる人は気になります。

しかし、方法がわからず解決まで時間がかかりました。知っていれば一瞬で操作が完了する内容ですが、知らないと無駄に時間がかかってしまいます。

同じように悩まれている方の参考に少しでもなれば幸いです。

以上です。ご覧いただきありがとうございました！