【WordPress】テーブル(表)の作成と修飾方法:セルの色付け・罫線の編集等

WordPressでホームページを作成する際、テーブル(表)を作成するのは何とかアイコン等を見つけてできたりしますが、色を付けたり、線の太さを変更する方法が意外と分かりません。デフォルト機能でもできないわけではないですが、スタイルシートを編集したりと結構厄介です。そこで、この記事では簡単にWordPressでテーブル(表)を作ってセルに色付けする方法をご紹介いたします。

基礎知識

プラグインを導入する前に、まずはWordPressの標準機能について知っておきましょう。WordPressにはGutenberg (グーテンベルグ)というエディターが標準搭載されています。見出し、リスト、画像、ギャラリー、カラム、ボタンなど、基本的な機能はすべて網羅されていますので、それだけでも十分に記事を書くことができます。ただ、何故か「テーブル(表)」については機能がイマイチなのです。

文章がメインのページであればテーブルが登場する機会が少ないですが、比較したり統計データを表現するにはテーブルが欠かせません。そこで、必要最小限の機能を入れて作業を進められることを目的に、プラグインを導入しましょう!

プラグイン:「TinyMCE Advanced」を導入しよう!

先述したとおり、標準搭載されたGutenberg エディターだけでは機能が少ないため、テーブルの機能を更に使い易くするためにプラグイン「TinyMCE」を使います。この先、Gutenberg エディターが充実すれば、TinyMCEは必要なくなるかもしれませんが、現時点でTinyMCEを利用している人は多いと思います。

TinyMCEをインストールすると、どういう機能が増えるのか?説明していきます。

標準機能のGutenberg (グーテンベルグ)エディター

では、まずは標準機能であるGutenberg(グーテンベルグ)を見てみましょう。

上の図を見れば分かりますが、テーブルを作成することは簡単にできても、スタイルが「デフォルト」と「ストライプ」の2種類しかなく、また背景色も4色からしか選択できません。テーブルは簡易的なデザインが見易いとは思いますが、それでも少々機能が少ないかと思います。

それでは次に、プラグイン「TinyMCE」をインストールした後のテーブルを見てみましょう!

TinyMCEをインストールしたエディター

正確には、Advanced Editor Tools (previously TinyMCE Advanced)という名称のプラグインになります。以前は「TinyMCE Advanced」という名称でしたが、現時点では上記名称に代わっています。
※この記事では、正式名称が長いため「TinyMCE」と略称で記載させていただきます。

おなじようにテーブルを作成したあと、左のテーブルアイコンをクリックすると、「クラシック版の段落」という項目が追加されています。では、それを選択してみましょう!
すると、下図のように詳細なエディターが登場し、テーブルアイコンをクリックすると、セルやカラム単位での設定することができるようになります。


また、「TinyMCE」自体は設定も変更することが可能ですので、自分好みに機能を追加することもできます。WordPress管理画面の左のメニューからプラグインをクリックすると、インストール済みのプラグインが表示されますので、「Advanced Editor Tools (previously TinyMCE Advanced)」の「設定」をクリックしてみてください。


< TinyMCE 設定画面

ここから、必要な機能をエディターメニューに追加することが可能です。フォントサイズやインデントなどはブロガーにとっては必須なので、追加しておくと便利だと思いますよ

 

補足:Block Editor と Classic Editor の関係性について

標準機能であるGutenberg(グーテンベルク)は、Block Editor でブロック毎に記事を作っていくのですが、そのブロックの中にクラシックブロックがあり、従来のエディターと同じように利用できます。また、クラシックブロックと同じ使い方ができ、クラシックブロックの機能を拡張したエディターがClassic Editor です。
Block Editor(Gutenberg)、Classic Editor、TinyMCEの3つが登場するため、とてもややこしいと思いますが、Classic Editor が元祖Block Editor が最新TinyMCEがその2つを繋ぐツール、と言えば理解しやすいでしょうか?

そして、TinyMCE の設定で、すべてを従来のエディター( Classic Editor )に変更することもできます。ただし、Gutenberg(グーテンベルク)は2021年まで Classic Editor のサポートがありますが、それ以降は無くなっていくと思いますので、Block Editor (Gutenberg) に慣れていた方が良いと思います。

とはいえ、現段階では、Block Editor (Gutenberg) の機能を充実させるためには、TinyMCE が必要といえます。


 

タイトルとURLをコピーしました