【Gutenberg】テーブルブロックの使い方&詳細設定手順まとめ

Gutenbergのテーブルブロックの使い方

こんにちは!ZIGです。

ここではワードプレスの新エディター「Gutenberg」のテーブルブロックの使い方を解説します。

Gutenbergをこれから利用する方・テーブルブロックの使い方がよく分からない・・・って方は参考にどうぞ!

テーブルブロックの基本的な使い方

テーブルブロックを追加する場合はまずエディター左上の「+」をクリック。

その後「フォーマット」⇒「テーブル」を選択します。

テーブルブロックの追加

 

 

すると列数と行数を設定するウィンドウが表示されます。

テーブルブロックの追加

ここで追加するテーブルの列数と行数を設定しましょう。

 

 

列数・行数は直接入力も出来ますが、ウィンドウ右端の矢印で数値を増減できるようにもなってます。

テーブルブロックの追加

今回は例として列数3、行数3にします。列数・行数が決まったら「生成」をクリックですね。

 

 

これで3×3のテーブルが挿入できました。

テーブルブロックの追加

 

 

あとは項目を入力していけばOKですね。

例としてテキストを入れてみました。

テーブルブロックの追加

あくまで例です(笑

 

 

行の追加・削除

行の追加や削除はトップツールバーから行えます。

例えばテーブル最下部に行を追加したい場合は一番下のセルが選択された状態にし、トップツールバーの以下のアイコンをクリックしましょう。

行の追加・削除

 

 

表示されたメニューの中から「下に行を追加」をクリックします。

行の追加・削除

 

 

これで行が追加されました。

行の追加・削除

 

 

削除も手順は同じです。

まず削除したい列を選択し、トップツールバーから「行の削除」をクリックですね。

行の追加・削除

これで不要な行は削除できます。

 

列の追加・削除

列の追加・削除も手順としては同様です。

列を追加したい箇所を選択し、「右に列を追加」「左に列を追加」どちらかをクリックですね。

列の追加・削除

 

例えば「左に列を追加」をクリックすると以下のように列が追加されます。

列の追加・削除

 

削除も同様ですね。

削除したい列を選択し、「列の削除」をクリックすれば削除できます。

 

 

テーブルの詳細設定

テーブルブロックはある程度ではありますが見た目の設定も出来るようになっています。

ちなみに便宜上「詳細設定」と書きましたが、あんまり詳細には設定できません(汗

こちらは必要に応じて使用する感じですね。

 

テーブルスタイルの設定

テーブルスタイルでは表の見た目を変更することができます。

 

項目はテーブルブロックが選択された状態でサイドバーに表示されます。

テーブルスタイルの設定

 

種類は「デフォルト」「ストライプ」の2種類で、通常は「デフォルト」が選択された状態ですね。

これを「ストライプ」に変更すると・・・

 

 

テーブルのデザインが以下のように変わります。

テーブルスタイルの設定

これは好みで使い分ける感じですね。

 

テーブル設定

テーブル幅を固定するかどうかの設定です。

これもテーブルブロックが選択されているとサイドバーに表示されます。

テーブル設定

デフォルトではOFFになってますね。

 

 

OFFの状態だと、それぞれのセルに入力されているテキスト量で各列の幅が異なります。

テーブル幅の固定設定OFF

 

ONにすると以下のようにすべてのセルの幅が一定になります。

テーブル幅の固定設定ON

 

見栄えを考えるとONにする方が良いですね。

 

色設定

テーブルの背景色を設定できます。

この項目もテーブルブロックが選択されているとサイドバーに表示されます。

セルの色設定

 

 

例えば以下の色を選択すると・・・

セルの色設定

 

 

このようにテーブルの背景色が変更されます。

セルの色設定

・・・ちなみにこの設定、行や列ごとでは設定できません(汗

あくまでテーブル全体の背景色変更なのでその点はご注意を。

 

 

細かく設定したい場合はクラシックブロックを使う方が便利

というわけでテーブルブロックの使い方を解説してきましたが・・・

テーブルブロックは実際に使ってみると良く分かるのですが、現状思った以上に細かな設定が出来ません。行や列を限定して文字装飾したり、背景色を変えるといったことも出来ないんですよね(汗

なので不便を感じる場合はクラシックブロックを使う方がスムーズです。

 

 

クラシックブロックは「フォーマット」⇒「クラシック」で追加できます。

クラシックブロックの追加

 

 

クラシックブロックを使えば旧エディターと同じ手順でテーブルが追加できます。

テーブルの追加

こちらなら細かな設定も可能ですね。

 

 

例えば枠線の色を変更・文字を中央揃え・最上段のセルのみ背景色を変更&太字にすると以下のようになります。

クラシックブロックを使ったテーブル作成

上がテーブルブロックを使ったテーブル、下がクラシックブロックを使ったテーブルです。

どちらの方が見栄えが良いかは言うまでも無いですね(笑

 

このように、デザイン性皆無の簡単な表であればテーブルブロックで作れますが、ある程度見た目を細かく弄りたい・・・という場合はクラシックブロックを使う方がおすすめです。

正直なところ、ほとんどの状況でクラシックブロックを使う方が良いのが現状ですね(汗

 

まとめ

というわけでテーブルブロックの基本的な使い方や設定方法をまとめました。

ハッキリ言ってテーブルブロックは未完成もいいところです(爆)今のままでは機能不足で不便この上ないって感じですね・・・

もちろんHTMLを直接編集してデザインを弄ることはできるのですが、それであればクラシックブロックを使う方が遙かにスムーズですし。

今後のアップデートで使いやすくなってくれることを願います・・・(汗

Gutenbergの使い方

【2019年最新】ワードプレスの新エディター「Gutenberg」の基本的な使い方と注意点まとめ(ver5.2.2対応)

2018年9月4日

 

 

 
Gutenbergのテーブルブロックの使い方

あわせて読みたい