ワードプレスのGutenberg(グーテンベルク)でテーブル(table)タグのセル結合(rowspanとcolspan)ができないときの対処方法

2019年10月26日2019年10月27日Wordpress(ワードプレス)

みなさんどうもグータレベルク！やっと重い腰を上げてグーテンベルクにした@xi10jun1です。 グーテンベルクにしたのはいいんですが、『こういうセッティングにしておけば、効率的に記事が書けるぞ！』と施していた設定が全部パァになりまして、怒り心頭でこの記事を書いています。 で、今日僕を最も怒らせた愚か者が、テーブルタグでの結合ができない問題です。

グーテンベルクでテーブルタグのセル結合はできない(現状)

おそらくこの記事にたどり着いたということは、グーテンベルクでテーブルタグの結合(rowspanとcolspan)ができないのは何故？と検索してきたからでしょう。 はい、現状はできません。絶望です。神は死んだ。 なのでクラシックエディターに戻すか、グーテンベルクのクラシックブロックを用いることになりますが、後者はどうも上手くいかないことがあります。Dead or Dieです。 そこで解決策として、とあるプラグインの機能を用います。

解決方法：プラグイン「Advanced Gutenberg」のAdvanced Table

ワードプレスプラグイン「Advanced Gutenberg」は、簡単に言うとグーテンベルクの拡張機能プラグインです。できることが多いので割愛しますが、この中にあるAdvanced Tableという機能を使うと結合ができます。女神降臨！

プラグインを有効化すると、グーテンベルクの機能を呼び出す「ブロックを追加」のところに「 Advanced Gutenberg 」という欄があり、そこに「Advanced Table」があります。

使い方は通常のtableタグと同じですが、テーブルを出力したあとに結合のための作業があります。

結合したい箇所をカーソルで範囲指定(シフトキー＋クリック)するか、HTML編集に切り替えて直接rowspanとcolspanを書き込むとかいうセルフデスマーチ(説明しよう！セルフデスマーチとは、一人で延々と地獄のような作業をすることなのだ！)をすることで結合ができます。 今回は迷える子羊のために、ビジュアルの状態でやってみます。

範囲指定したら、赤枠の部分「Edit Table」を選択すると、指定したテーブルに対する各メニューが出てきます。 そこの一番下「Merge Cells」を選択することで、結合ができます。なおプラグインを日本語化していると日本語で「セルを結合する」みたいな言葉になるはずです。 もしセルの結合を解除したいときは、結合しているセルを選択してから「Merge Cells」の上「Split Merged Cells」で解除できます。

はい、これで結合ができました。 実際に結合させた状態の表がこちらです。

横3結合
縦2結合

もし表の列を画面にあわせつつ均等にするなら、

横３結合
縦2結合

編集画面の右側にあるブロックのTable settingにあるFixed width table cellsにチェックを入れれば均等になります。 でも、たぶんもっといい方法があると思うので、他を当たってください。もう無理、限界。

テーブルタグの罫線が消えた場合

ここまででも限界なのに、このあと表を実際に確認したら罫線が消えていたので、口から怪光線を出しました。 で、もしこのAdvanced Tableで作った表の罫線が消えてしまった場合は、子テーマのCSSに下記を明記してください。

table.advgb-table-frontend td {
      border: 1px solid #000;
}

これで基本の黒い罫線が復活します。罫線の色や太さなどは、ご自身でお使いの表を要素の検証を使って確認すれば分かるはずです。 もしこれでも復活しない場合は、キャッシュか、もしくはCSSの順位が関係しているかですね。 ちなみに原因はプラグイン内のCSSにある、

table.advgb-table-frontend td, table.advgb-table-frontend tr {
    border: 1px solid transparent;
    padding: .5em;
}

なのですが、子テーマでCSSを設定しても適用されないことがあります。transparentさえなければ・・・。 もう無理、限界。

まとめ：普通に結合させてほしい

テーブルタグで複雑な表を作っていたので、直観的な作業でそれが可能になるならと思っていたのですが、全然ダメでした。何でテーブルを普通に結合させてくれないの？ 正直、グーテンベルクの魅力が一切分かりません。 僕の場合は何一つ、なんの機能も役に立っていないんです。それどころか、今回のテーブルタグをはじめ直観的な作業は全然直感ではできず、様々な工程のそれぞれで手間が1つずつ増えて余計に非効率になりました。 プラグインの評価も☆2つだし、これ本当に推すの？ やめたほうがいいんじゃないの？ 死人が出るぞ。 ワイはもう死んだ。