Still not Gutenberg?

グーテンベルクの「表」への期待!できること、できないことまとめ

グーテンベルクで今一番ネックなのが「」では無いでしょうか?

それは

  1. セルの結合ができない
  2. thセルが標準で無い

この2つが大きな要因です。

menくん

はぁ、、、なんとかしてよ、グーテンのおっさん

ヨハネス・G

ふぉっふぉっふぉ

くま

いや、「ふぉっふぉっふぉ」じゃねーよ、無力かあんたは

とりあえず、確認したところ現状は

できること

  • 列・行数を指定して挿入
  • 列・行の追加もしくは削除
  • 表のデザインをストライプに変更
  • 列の幅を固定にする
  • 表全体の背景色の変更

できないこと

  • セルの結合
  • <th>の挿入
  • 画像の追加
  • 個別セルのスタイル変更

こんな感じです。

この記事では、現在のグーテンベルクでできることを紹介していきます。

自分なりの今の対策や今後の期待も書いておきますね( ˙꒳​˙ )

グーテンベルクの表はこんな感じ!

「表」のブロックはフォーマットテーブルと書いてある部分です。

実際に表を挿入してみる

「テーブル」をクリックすると、このようなシンプルな表の設定画面がでてきます。

入力するのは列数(横の個数)行数(縦の個数)です。

menくん

まぁ適当に横3列の縦5行の表を作ってみますね

数字を記入

列数と行数を記入

生成ボタンを押すと

表が作成されます

入力した数値の表が挿入されて、入力できるようになります。

menくん

う~ん、シンプルでいいんだけど従来(クラシックエディタ)と比べると若干わかりにくいなぁ

クラシックエディタ時代

直感的に必要な列数と行数が選べた

クラシックエディタの表挿入画面

このわかりやすさはグーテンベルクにはありませんね。

グーテンベルク

  • 列数と行数を入力

クラシックエディタ

  • 直感的に表を作成できる

表を使ってみる

では、実際に表に文字を入力したりデザインを変更していきましょう。

とりあえず文字を入力

グーテンベルクの表に文字を入力
実際に記事で表示される表

可もなく不可もないデザインの表が完成しました。

列・行の追加または削除

ツールバーに表示されている「表の編集」を押すと列・行の追加または削除ができます

必要最低限といった項目のみです。

従来のクラシックエディタの場合は、もう少し項目が多いです。

クラシックエディタの行の設定
クラシックエディタの列の設定

クラシックエディタでは、行のプロパティやコピー、貼り付けができます。

行のプロパティ?

行のプロパティでは、ヘッダーやフッターを追加したり、高度な設定からクラス名を追加することができます。

行のプロパティ:一般
行のプロパティ:高度な設定
menくん

これなかなか重要やないか!グーテンのおっさん!どうにかしてくれよ

ヨハネス・G

ふぉっふぉっふぉ

表のスタイルを変更してみる

表を選択した状態だと、右のサイドメニューに表の設定項目がでてきます。

いくつか並んでいますが、表のスタイル設定で使用するのは上の3つだけです。

グーテンベルクで表の設定項目
  1. スタイル
  2. テーブル設定
  3. 色設定

これだけしかありません。

おそらく今後機能が追加されていくと思いますが、現段階ではかなり力不足感があります。

では、ひとつひとつの機能を見ていきます。

スタイル

表のスタイルの切り替え

スタイル変更は2種類です。

  1. デフォルト
  2. ストライプ

簡単にストライプに切り替えれるのは良いですが、ちょっとスタイルのデザインが少なく感じます。

SANGOでは、オリジナル機能としてスマホでは横スクロールできるスタイルも追加されています。

テーブル設定

テーブルの設定

テーブルの設定では「固定幅のテーブルセル」に設定することができます。

固定幅のテーブルセルとは、横幅(列)が同じ幅になるだけです。

色設定

表の色設定

表の背景色を変更することができます。

残念ながら表全体の色が変わる仕様みたいですね。

menくん

いや、使いもんにならんやんけ!

ヨハネス・G

ふぉっふぉっふぉ

今のところの「表」を使う対策

グーテンベルクのままだと結合や<th>が使えないので、今のところはHTMLとして編集していくしかありません。

妥協、これは妥協案です

menくん

いやまじで、せっかくグーテンのブロックエディタで視覚的にわかりやすく、ストレス無く記事を書いてんのにHTML編集てワロタ
グーテンベルクは表に対応しておりませんって言ってもおかしくないレベルですね。私はもうHTMLを見て記事を書きたくありません。早く結合と<th>だけでも対応してください。お願いします。

ヨハネス・G

ふぉっ、、、ふぉっふぉ、、おっふ

くま

マジトーンでじいさん困らすな

対策:HTMLとして編集

詳細設定からHTMLとして編集をクリック

HTMLとして編集をクリックすると下のように表からコードに切り替わります。

HTMLとして編集画面
menくん

グーテンからHTMLに変換すると、見た目が変わりすぎてめまいがしてきますね

このHTMLとして編集状態で、表の見出しにしたい部分をtdからthに変更します。

地獄みたいな作業ですね。

するとこんな感じにth:見出しセルが反映されます。

エクセルで表を作成している人は、ジェネレーターツールを使うと少しは簡単に挿入できるようになります。

ツール表作成ツール

表作成ツールの使い方

ちょっと長めの動画になります。

エクセルで表を作って、ジェネレーターに貼り付けて、生成したコードをグーテンベルクのカスタムHTMLブロックに貼り付けて、ブロックに変換します。

menくん

自分で書いてて説明がめんどくさくなりますね

とりあえず<th>の挿入はこれで代用できます。

対策:クラシックエディタのブロックで表を作成する

クラシックエディタのブロック

一応グーテンベルクにもクラシックエディタを挿入できる機能があります。

悔しいですが、それを使うのもひとつです。

これでしたら、今まで通りの表を作成することができます

ただし、カスタムHTMLブロックで無理やりセル結合しようとすると、警告が出て強制的にクラシックエディタにするかデザイン崩れを起こします。

無理やりセル結合したときにでる警告
menくん

セル結合は想定しとけよ

グーテンベルクの表の今後に期待

まずは

<th>を簡単に挿入できる機能追加

これはしてもらわないとグーグルさんにも、正しく表を理解してもらえないので最優先でお願いします。

ヨハネス・G

ふぉっふぉっふぉ

次にお願いしたのはやはり

セル結合機能追加

ですね。ひとまず「想定していない~」ではなく、「まだ対応できていない~」にエラーメッセージを変更してください。

ヨハネス・G

ふぉっふぉっふぉ

あとは細かいところですが

  • セル内に画像をいれれるようにする
  • セルごとにスタイルを変更できるようにする

ここらへんに対応してもらえると助かります。

menくん

グーテンベルクは大好きです!表に対応してくれたらもっと大好きになります!

ヨハネス・G

ふぉっふぉっ今のところは勘弁してな

くま

大好きだぜ、じーさん

※グーテンベルクが表に対応してほしいという想いが強すぎて、途中言葉がきつくなってしまい、申し訳ありませんでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です