WordPressの標準エディタ「Gutenberg」では、テーブルブロックを使うことで直感的に表を作ることができます。
ただ、このブロックにはセルを結合できないなど不便なところがいくつかあります。
単純な表を作る分には問題ないですが、複雑な表を作りたいときはちょっと困りますよね。
そこで今回は、WordPressで複雑な表を作る方法をご紹介します。
WordPressのテーブルブロックの不便なところ
テーブルブロックは、ワンクリックでストライプデザインに変更できたり、幅を均等にできたりと、便利なところも多いですが、いくつか不便なところもあります。
その不便なところというのが、以下の3つです。
- 列をthにできない
- セルを結合できない
- セルの幅を個別に指定できない
列をthにできない
行に関しては「ヘッダーセクション」をオンにすることでthにできますが、列に関してはthにできません。
列をthにしたいときは、「HTMLとして編集」から、直接タグをいじってthにする必要があります。
セルを結合できない
列をthにするには直接タグをいじればいいですが、同じ方法でセルを結合しようとするとエラーになってしまいます。
セルの幅を個別に指定できない
こちらも直接タグをいじって幅を変更しようとするとエラーになります。
すべての列を均等にしたいときは「表のセル幅を固定」をオンにすればいいですが、列ごとに幅を指定したいこともあるので不便です。
WordPressで複雑な表を作る方法
それでは、WordPressで複雑な表を作る方法をご紹介します。
WordPressで複雑な表を作る方法には、主に以下のようなものがあります。
- HTMLタグを直打ちする
- プラグイン「Advanced Editor Tools (previously TinyMCE Advanced)」を使う
HTMLタグを直打ちして複雑な表を作る方法
1つ目は、HTMLタグを直打ちするという方法です。この方法では、カスタムHTMLブロックの中でtableタグを直打ちします。
HTMLの知識がある方や、あまりプラグインを増やしたくない方には、この方法がおすすめです。
プラグイン「Advanced Editor Tools (previously TinyMCE Advanced)」を使って複雑な表を作る方法
2つ目は、「Advanced Editor Tools (previously TinyMCE Advanced)」というプラグインを使う方法です。この方法なら、HTMLの知識がなくても簡単に複雑な表が作れます。
プラグインを有効化したら、クラシックブロックの「テーブル」をクリック⇒「テーブル」にカーソルをあわせて作りたい列数・行数になるようにカーソルを動かす⇒クリックで基本の表を作成できます。
表をカスタマイズしたいときは以下を参考にしてみてください。
セルをthにする
- thにしたいセルをドラッグで選択
- 「テーブル」⇒「セル」⇒「セルのプロパティ」の順にクリック
- 「セルの種類」で「ヘッダーセル」を選択して「OK」を押す
セルを結合する
- 結合したいセルをドラッグで選択
- 「テーブル」⇒「セル」⇒「セルの結合」の順にクリック
結合を解除したいときは、結合されたセルをドラッグで選択してから「テーブル」⇒「セル」⇒「テーブルセルを分割」の順にクリックします。
セルの幅を変更する
- 幅を変更したいセルをドラッグで選択
- 「テーブル」⇒「セル」⇒「セルのプロパティ」の順にクリック
- 「幅」に数値を入力して「OK」を押す
まとめ
今回は、WordPressで複雑な表を作る方法をご紹介しました。
WordPressで複雑な表を作る方法には、HTMLタグを直打ちする方法や、プラグイン「Advanced Editor Tools (previously TinyMCE Advanced)」を使う方法があります。テーブルブロックの機能が改善されるまでは、このどちらかの方法で表を作るといいでしょう。
