先月書店でインプレスの「できるWordPress Ver.5.x対応」を見つけました。
WordPressでサイトを作成する準備から始まって、WordPressのインストール～記事の作成～プラグインその他、基礎的なことが初心者を対象に一通り説明されています。
残念なのは画像が小さくてが見づらいことや、サンプルサイトのどのページを作成しているかわかりづらいのが不満です。
しかし、各ブロックの使いかたがわかりやすく説明されています。これまでGutenbergエディタに不慣れでもやもやしていましたが、これで何とかなりそうと明るい気持ちになれました。
「WordPressサイト作成の基礎的な知識はあるが、エディタが変わったのでどうも使いづらい。」と感じている人は、Gutenbergの各種ブロックの使い方さえ理解できればVer.5.xへの敷居はぐっと低くなるわけで、その意味ではこの参考書は役に立つと思います。
これを見ながら様々なブロックを手あたり次第テストしてみました。そうしているうちに慣れてしまえばGutenbergって結構使いやすいエディタかもと思えるようになりました。
ところで、記事に表をいれる場合に使用する[テーブル]ブロックというのがあって、これが便利なようでもあるいっぽう、出来上がった表がものたりないような・・・・・・
もう少し気の利いた表が入れられないものかと少々不満に感じました。
そこで、この記事中に実際に表を入れてみました。
実はクラシックエディタ時代から、表を入れるのに苦手意識があります。
さてGutenbergエディタではうまく表をいれることが出来るだろうか？と気になってならないのです。
まずは、素直に[テーブル]ブロックを利用して表を入れてみました。そして次に プラグインTinyMCE Advancedを利用する方法を試してみました。
- Gutenbergの[テーブル]ブロックを使用する。上記参考書にも説明されているシンプルな方法。
- Gutenbergの[クラシック]ブロックとプラグインTinyMCE Advancedを利用する。セルの結合や幅の設定、セルごとの背景色設定などもできます。
以下にこれら2つの方法で作成した表を表示します。
１．Gutenbergの[テーブル]ブロックを使用して
| 材料（1） | 材料（２） | 材料（３） |
| 強力粉：60g タピオカスターチ：20g | 卵：3個分 砂糖：30g サラダ油:60cc 水：60cc バニラオイル：少々 | 卵白：3個分 砂糖：40g レモン汁：小さじ1/2 塩：小さじ1/4弱 |
この方法は手軽にシンプルな表を入れることができます。これで済む場合も多いかと思います。
ただ2行目の各セルを分割し材料と分量を別々のセルに入れたかったのですが、セルの分割ができませんでした。6列の表にすると1行目でセルを結合できませんでした。私が知らなくてできないだけかもしれませんが・・・
で、もう少しどうにかならないものかと次の方法で試してみました。
２．Gutenbergの[クラシック]ブロックとプラグインTinyMCE Advancedを利用して
- あらかじめTinyMCE Advancedをインストール、有効化する（WordPress5.2.2以上でないとインストールできないようです）
- フォーマット→クラシックとクリックし[クラシック]ブロックを追加する。
- [クラシック]ブロックに表示される編集ツールのテーブルを使用する。
TinyMCE Advancedをインストール有効化すると、[クラシック]ブロックの編集ツールにテーブルが表示されるようになります。↑
それを使って作成したものが下の表です。
| 材料（１） | 材料（２） | 材料（３） | |||
| 強力粉 | 60g | 卵黄 | 3個分 | 卵白 | 4個分 |
| タピオカスターチ | 20g | 砂糖 | 30g | 砂糖 | 40g |
| サラダオイル | 60㏄ | レモン汁 | 小さじ1/2 | ||
| 水 | 60㏄ | 塩 | 小さじ1/4弱 | ||
| バニラオイル | 少々 | ||||
上の表は、6行6列で作成し1行目でセルの結合を行いました。
セルごとに背景色を指定することもできました
まとめ
通常のシンプルな表であれば、Gutenbergのテーブルブロックを利用して手軽に表を挿入できます。
しかし、どうしてももう少し細かな設定をしなければならないような場合は、クラシックエディタとTinyMCE Advancedの組み合わせを利用しようと思いました。
今後のアップデートで[テーブル]ブロックでもう少し表現力のある表の作成が出来るようになることを期待します。