WordPressのブロックエディタ拡張：Getwidについて解説(35)Table

  • 投稿日
  • 著者 takanashi
  • カテゴリー WordPress

タナビーの高梨です。

今回はGetwidのTableブロックに関する設定を解説していきます。

全般設定についてはこちらをご覧ください。

Table概要

Tableとは、公式ページからの引用では、

セルの結合、背景のカスタマイズ、ボーダーの調整を可能にするテーブルブロック

公式ページ（翻訳 by DeepL先生）

だそうです。

テーブルに関するブロックはテーマに付随するものや他のプラグインでもポピュラーな感じですが、Getwidではどういったものになるのでしょうか。

さっそく、見ていきましょう！

ブロック設定

設定の前に、ブロックを挿入したらまずは行と列の数をしてしないと設定ができません。

最初に行と列の数を設定しましょう。

当然ながら、設定した数は後からでも変更できます。

設定はテーブル全体を設定する「Table Settings」とセルごとの設定となる「Cell Settings」があります。

Table Settings

Table Layout：横幅の扱いを設定します。「Default」「Auto」「Fixed」から設定します。初期状態では各列は均等の横幅ですが、セルの要素が幅を超えるような場合に「Auto」では自動的に幅が広がり、「Fixed」では幅が変わらず文字列が折り返します。「Default」はブラウザのデフォルトに従います。普通は「Auto」と同じ動きです。

Border Collapse：隣り合ったセルとの表示間隔を設定します。「Default」「Collaspe（隣、上下と引っ付く）」「Separate（隣、上下と隙間が空く）」から選択します。「Default」はブラウザのデフォルトに従います。普通は「Separate」と同じ動きです。

Table Header：オンにすると、テーブルの１行目がヘッダの扱いになります。要素の説明を入力する行ですね。

Table Footer：オンにすると、テーブルの最後の行がフッタの扱いになります。合計とかを入力する行ですね。

Background Color：テーブル全体の背景色を設定します。パレットから選択、または 「カステムカラー」でカラーピッカーから選択、またはRGB16進法で設定できます。

Text Color：文字色を設定します。パレットから選択、または 「カステムカラー」でカラーピッカーから選択、またはRGB16進法で設定できます。

Horizontal Alignment：セル内での水平方向の文字表示位置を、「Default」「Left（左寄せ）」「Center（中央寄せ）」「Right（右寄せ）」から設定します。「Default」の場合はブラウザまたは、親要素の設定と同じになります。通常は左寄せです。

Vertical Alignment：セル内での垂直方向の文字表示位置を、「Default」「Top（上揃え）」「Middle（中央揃え）」「Bottom（下揃え）」から設定します。「Default」の場合はブラウザまたは、親要素かと同じになります。通常は中央揃えです。

Cell Settings

セルごとの設定をしていきます。

通常はTable Settingsの設定が効きますが、そのセルに関してはCell Settingsの設定が優先されます。

Horizontal Alignment：セル内での水平方向の文字表示位置を、「Default」「Left（左寄せ）」「Center（中央寄せ）」「Right（右寄せ）」から設定します。「Default」の場合はTable Settingsで設定した内容と同じ似なります。

Vertical Alignment：セル内での垂直方向の文字表示位置を、「Default」「Top（上揃え）」「Middle（中央揃え）」「Bottom（下揃え）」から設定します。「Default」の場合はTable Settingsで設定した内容と同じ似なります。

Background Color：セルの背景色を設定します。パレットから選択、または 「カステムカラー」でカラーピッカーから選択、またはRGB16進法で設定できます。

Text Color：セル内の文字色を設定します。パレットから選択、または 「カステムカラー」でカラーピッカーから選択、またはRGB16進法で設定できます。

Borders：罫線を付ける場所を選択します。

Padding Top：セル内の上余白を数値で設定します。単位はpxです。

Padding Right：セル内の右余白を数値で設定します。単位はpxです。

Padding Bottom：セル内の下余白を数値で設定します。単位はpxです。

Padding Left：セル内の左余白を数値で設定します。単位はpxです。

まとめ

設定個所は以上です。

それほど大した機能はなさそうですが、WordPressデフォルトのテーブルよりは使えますね。

Getwid