MENU
チロ猫
こんにちは、チロ猫です。

ネットショップと趣味のブログをいくつか運営しています。
永久無料ドメイン付き!超高速サーバーConoHa Wing! 詳細

テーブル(表)|ブロックエディタ Cocoon編

ブロックエディタでの表(テーブル)の作成方法について説明します。

実は、ブロックエディタで一番不便なのは「テーブル」機能なんだ

この記事ではテーブルブロックの使い方と、「不便な点」、「解決法」について解説します。

目次

ブロックエディタでの表作成

ブロックエディタでの表作成の現状

クラシックエディタからブロックエディタになって一番不便な点は、ブロックエディタは表作成機能が乏しいということです。

クラシックエディタブロックエディタ
セルの結合できるできない
背景の色付けできるできない
セル幅変更できるできない
枠線付けできるできない
セル内画像配置できるできない
(裏ワザあり、別記事で解説⇓)

以前のクラシックエディタでの表作成は、Microsoft Excelに非常に類似しており、あらゆることが柔軟に実行できました。セルの結合、セル幅変更、セルの背景色付け、枠線を付け、画像を張り付けなどです。

一方、ブロックエディタでは、「テーブル(表)」は、今までと全く違った概念で作られています。

ブロックエディタでは、1つ1つのセルが「異なるブロック」として扱われているため、今までのセルのように自由な対応ができません。上述したセルの接合や枠線付けなど、すべて行うことができません。

ひ、ひどすぎる!
ブロックエディタの表作成!

ただし、解決策があるよ!

解決策|「クラシック」ブロックで Advanced Editor Tools (TinyMCE) を利用する

ただし、ブロックエディタで表を自由に作成する方法があります。

ブロックエディタには、クラッシックエディタと同じような操作を行える「クラシック」ブロックがあります。このクラシックブロックを呼び出してプラグインと共に使用することで、自由な表作成を行うことができます

以下のプラグインを「クラシック」ブロックで使用します。

  • Advanced Editor Tools (previously TinyMCE Advanced)

(このプラグインは以前「TinyMCE Advanced」という名前でリリースされていましたので、古いブログ記事では以前の名前でおすすめプラグインとして紹介されていることも多いと思います。)


この記事では、ブロックエディタの通常の表作成方法に加え、上述の「クラシック」ブロックでTinyMCEを使用した方法の2種類について解説します。

以下の2点について解説

  1. 「テーブル」ブロックによる表作成
  2. 「クラシック」ブロックでTinyMCEを使った表作成

「テーブル」ブロックでの表作成

まずは、通常の「テーブル」ブロックによる表作成について解説します。

この方法では、あまり多くのカスタマイズを行うことができません。

STEP

ブロックエディタで をクリックし、すべて表示 をクリックします。

STEP

左側のブロックリストで テーブル をクリックします。

WordPressの管理画面で、テーブルをクリック
STEP

テーブルブロックが表示されました。

カラム数と行数を入力し、表を作成 をクリックします。

表を作成
STEP

表が挿入されました(薄くて見にくいですが。)

歯車マークをクリックして、右メニューを表示します。

表が作成された
STEP

表に文字を挿入します。

設定を変更することで、見た目を変更したり、セル幅を均一化したり、ヘッダーを付けたりできます。

通常表の内容は左詰めになっていますので、文字列を選んで中央揃えを選択すると、文字を中央に配置することができます。

表を設定

STEP

実際の表示は以下のようになります。

表の出来上がり

ご覧の通り、ブロックエディタの「テーブル」ブロックでは、それほど多くの設定ができません。

次は、「クラシック」ブロックでTinyMCEを使用した表作成の方法について解説します。

「クラシック」ブロックで TinyMCE を使用した表作成

次は、Advanced Editor Tools (旧 TinyMCE)を使用した表作成の方法を解説します。

こちらの方が自由度が高い表を作成できます。

STEP

ブロックエディタを開く前に、まず下準備としてプラグインをインストールしましょう。

WordPressの管理画面で プラグイン > 新規追加 をクリックします。

Advanced Editor Tools」を検索し、プラグインが表示されたら、今すぐインストール > 有効化 をクリックします。

プラグインのインストール画面

これで準備が完了しました。

STEP

次に、ブロックエディタに移動します。

をクリックし、すべて表示 をクリックします。

STEP

左側のブロックメニューで クラシック版の段落 をクリックします。

クラシック版の段落を選択

「クラシック版の段落」と「クラシック」の違いは以下の通りです。基本的に機能は同じです。

クラシック版の段落

プラグイン【Advanced Editor Tools (previously TinyMCE Advanced)】を有効化すると表示されるブロックです。再利用ブロックに登録可能。

クラシック

クラシックエディタに付属の基本ブロックです。再利用ブロックに登録できません。

STEP

テーブルボタンを押し、必要な数の列と行を選択します。

表を作成
STEP

テーブルが表示されました。

テーブルが表示された
STEP

次は、枠線や背景を変えてみましょう。すべてのセルを選択します。

テーブルボタンを押し、セル > セルのプロパティ を選択します。

セルのプロパティ
STEP

高度な設定 タブをクリックします。

高度な設定
STEP

枠線の色」や「背景色」をクリックすると色を選べます。

枠線や背景色を選べる
STEP

背景や枠線に色が付きました。

枠線をドラッグすることで、枠の幅を変更できます。

枠の幅を変えられる
STEP

メディアを追加 ボタンで画像を挿入できます。画像をドラッグで拡大縮小したり、画像の配置を中央揃えにできます。

画像を挿入できる

ブロックエディタに付属の「テーブル」ブロックよりも、「クラシック」ブロックからの表機能のほうが、様々なことが行えることがお分かりいただけたと思います。


続けてブロックエディタを学ぼう!

次の記事では、広告を貼るために必須のボタンブロックについて解説します。

次は「記事の書き方 6

よかったらシェアしてね!
目次
閉じる