当サイトではアフィリエイト広告を利用しています

【WordPress】ブロックエディター(Gutenberg)で表を作成-クラシックブロックがおすすめ

ブロックエディタ―使い方

WordPress ブロックエディター(Gutenberg)で表(table)を作成するには、表のブロックが用意されています。

しかし、表の幅や高さを変更したり、一部に背景を入れるなど、細かな設定ができません。

そうした時には、「クラシックブロック]で表を作るのがおすすめです。

「クラシックブロック」を使った表の作り方を解説します。

TinyMCE Advancedを入れていることが前提の解説です。
また、テーマによって表(Table)の表示が違う場合があります。

★12万以上の対象作品を聴き放題 ★無料体験後は月額1500円。いつでも退会可能 ★プロのナレーターが朗読 ★オフライン再生可能
目次

プラグイン「TinyMCE Advanced」で、「クラシックブロック」に表を追加する

WordPressのブロックエディター(デフォルト)では、「クラシック」ブロックに表はありません。
※テーマによって異なります。(SWELLではクラシックブロックに表があります。)

エディターの拡張プラグインTinyMCE Advancedをインストールした後、設定で「クラシック」ブロックを追加します。

TinyMCE Advancedは、編集機能を拡張して使いやすくするプラグインなので入れておいて損はないと思います。

TinyMCE Advancedの設定画面 > ブロックエディター (TinyMCE) > クラシック版の段落とクラシックブロックのツールバで、
クラシック版の段落とクラシックブロックのツールバー用の使用していないボタン」の中から「テーブル」をドラックして、ツールバーに追加します。

TinyMCE エディター

ツールバーに「テーブル」(表)が追加されました。
これで準備OKです。

TinyMCE エディター

「クラシックブロック」で表をつくる

①ブロックの追加ボタン>「一般ブロック」>「クラシック版の段落」を選択します。
 (※「Classic Paragraph」と表示されている場合は、同じものです。)
 ブロックの追加ボタン>「フォーマット」>「クラシック」も同じものですので、どちらでもOKです。

整理すると、「クラシック版の段落」「Classic Paragraph」「クラシック」は同じものです。

wordpress-クラシックブロックで表

②ツールバーで表のマークをクリックします。

wordpress-クラシックブロックで表

③「テーブル」で行と列数を指定します。

wordpress-クラシックブロックで表

④表ができました。

wordpress-クラシックブロックで表

⑤内容を入力すると、このように表示されました。

wordpress-クラシックブロックで表

表の幅や高さを変更する。

表の幅や高さを変更するには、表の端の白い四角をマウスでドラックして、左側に寄せ、幅を狭くします。
高さの場合は、上下にドラックして変更できます。

wordpress-クラシックブロックで表

各セルのテキストをセンタリングする

全てのセルを選択した状態で、センタリングのボタンを押すと、テキストがセンタリングされます。

wordpress-クラシックブロックで表

表全体をセンタリングする

①表全体をセンタリングするには、表の中のどこかにカーソルを置いた状態で、
 ツールバーの「テーブル」>「表のプロパティ」を選択します。

wordpress-クラシックブロックで表

②「表のプロパティ」>「配置」で中央を選択します。

wordpress-クラシックブロックで表

③このように表示されました。

wordpress-クラシックブロックで表

表全体のスタイルを変更する

表全体のスタイルを変更sるうには、表の中のどこかにカーソルを置いた状態で、
 ツールバーの「テーブル」>「表のプロパティ」で、「高度な設定」タブを開き、「スタイル」に記載します。

以下は改行幅を130%に変更する場合です。

テーブル設定

表の罫線の太さや色を変更する

①まず、最初のセルから最後のセルまでドラックして表全体を選択。
その状態で、ツールバーの「テーブル」>「セル」>「セルのプロパティ」を選択します。

表全体の罫線を設定する場合は、

テーブルの作り方

②セルのプロパティで、「高度な設定」タブを選択し、「Border style」で線の種類、「枠線の色」で罫線の色を指定します。

テーブルの作り方

このように表示されます。

テーブルの作り方

表の一部の背景色を指定する

表の一部の背景色を変える方法です。

1行目だけの背景色を変える場合の例です。

①1行目のセルを選択した状態で、ツールバーの「テーブル」>「セル」>「セルのプロパティ」を選択します。

wordpress-クラシックブロックで表

②セルのプロパティで、「高度な設定」タブを選択し、「背景色」で色を指定します。

wordpress-クラシックブロックで表

③このように反映されます。
 全体の背景色を変えるには、最初に全体を選択して同じようにします。

テーブルの作り方

表に列を追加

列と行の追加は、クラシックブロックもテーブルブロックでも同様の方法になります。

列を右側に追加したい場合、1つのセルにカーソルを置いた状態で、
ツールバーの「テーブル」>「列」>「列を右に挿入」を選択します。
すると、カーソルを置いた列の右側に列が追加されます。

wordpress-クラシックブロックで表

下の画像のように右側に列が追加されました。
列を削除する場合は、「列を削除」を選択します。

wordpress-クラシックブロックで表

表に行を追加

列を上に追加したい場合、1つの行にカーソルを置いた状態で、
ツールバーの「テーブル」>「列」>「行を上に挿入」を選択します。

wordpress-クラシックブロックで表

すると、カーソルを置いた行の上に行が追加されました。
行を削除する場合は、「行を削除」を選択します。

wordpress-クラシックブロックで表

ブロックエディターで表を作成 まとめ

WordPress Gutenberg(ブロック)の「表のブロック」は、手軽に表を作ることができますが、ちょっとした変更ができません。

今後、改良されていくことと思いますが、現状では、「クラシックブロック」を使うと、後でちょっとした変更を加える場合などにも便利です。

ただ、表の複雑なカスタマイズは、「クラシックブロック」でも、思うようにいかないことが多く、HTMLで編集しなければなりません。

場面に応じて、使い分けていくとよいと思います。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次