WordPressってデフォルトだと表を作る機能がないので、不便ですよね。ただ、表を作るのは実はめちゃめちゃ簡単です。
個人的に一番楽な表の作成は「エクセルの表をコピペする」という方法なのですが、他にもプラグインやHTMLを使う方法があります。
ということでこの記事では、WordPressでの表の作り方についてそれぞれお伝えしていきます。
かんたんな順にお伝えするので、やりやすい方法で表を作ってみてください。
エクセルを使って表を作成する
- メリット：手間がかからない。背景色の指定も楽。プラグイン不要。
- デメリット：エクセルを立ち上げる必要がある。行や列の追加が面倒。
エクセル（Excel）で作った表を、WordPressに貼りつける方法です。
オープンオフィスの表計算ドキュメント（.ods）やグーグルスプレッドシートでも出来ます。
※ただグーグルスプレッドシートの場合、表の背景色をコピーすることは出来ません。
エクセルで作った表をコピーする
エクセルで表を作ったらコピーします。テキストを先に入力しておいても大丈夫です。
表の背景色もコピーできます。背景色をつけたい場合は、エクセル上で背景色をつけておきましょう。
WordPressの投稿の編集画面に貼りつける
コピーした表を、そのまま投稿の編集画面に貼りつけます。
すると、上記のように表を挿入することが出来ます。ラクですね。
ただ、枠線の色はコピーすることが出来ません。たとえばエクセルで赤色の枠線の表を作ってコピーしても、WordPressには赤色は反映されません。
また行や列を追加する場合は、新しく表を作って貼り直す必要があります。もしくは後述するプラグインかHTMLを使わなければ追加できません。
そのように細かい微調整は後述するHTMLを使わないと出来ませんが、サクッと作りたい場合はエクセルが楽だし、速いです。
なのでエクセルはおすすめなのですが、他の2つの方法についてもお伝えします。
プラグイン『TinyMCE Advanced』を使って表を作成する
- メリット：ビジュアルエディタ上から素早く表を作れる。行や列の追加が楽。
- デメリット：色の指定に手間がかかる。
WordPressのプラグイン『TinyMCE Advanced』をインストールすることで、WordPressの投稿画面から表を作れるようになります。
プラグインをインストールすることでページの表示速度が若干遅くなってしまうのですが、投稿画面から表を作りたいのであればおすすめです。
TinyMCE Advancedをインストールする
まずはTinyMCE Advancedをインストールしていきます。インストール方法が分かる場合は、ガンガン進めていってください。
WordPressの管理画面の「プラグイン」の「新規追加」をクリックします。
そしたらキーワードに『TinyMCE Advanced』と入力して、表示された『TinyMCE Advanced』の「今すぐインストール」をクリックします。
インストールは10秒以内に終わります。
インストールが終わったら、「有効化」をクリックします。
これで準備は完了です。
ビジュアルエディタで表を作成する
TinyMCE Advancedを有効化にしたら、ビジュアルエディタに「テーブル」というメニューが追加されています。
テーブルのメニューの「テーブル」にカーソルを合わせると、10×10マスのパネルが表示されます。
ここで行と列を指定すれば、表を作ることが出来ます。
上記画像のように、試しに「列（横）2マス × 行（縦）4マス」で表を作ってみます。
| 1行目の1列目 | 1行目の2列目 |
| 2行目の1列目 | 2行目の2列目 |
| 3行目の1列目 | 3行目の2列目 |
| 4行目の1列目 | 4行目の2列目 |
すると上記のように、「列2 × 行4」の表を作ることが出来ました。
縦も横も11マス以上を作る場合は、表にカーソルを合わせた状態でメニューから追加すればOKです。
表の背景と罫線の色を指定する
作った表のセルを選択した状態で、テーブルメニューの「セルのプロパティ」「行のプロパティ」から色を指定することが出来ます。
試しに背景色を変更してみますね。まずは上の1行を選択（ドラッグ）して…
次にテーブルメニューの「セルのプロパティ」を選択します。
そしたら次は、タブの「詳細」をクリックします。
背景色の色指定部分をクリックします。
赤色にしてみますね。
色を選択したら「OK」をクリックします。
そしたらもう一度「OK」をクリックします。すると…
| 1行目の1列目 | 1行目の2列目 |
| 2行目の1列目 | 2行目の2列目 |
| 3行目の1列目 | 3行目の2列目 |
| 4行目の1列目 | 4行目の2列目 |
セルが赤色に変更されました。
ちなみに、以下のようにカラーコードを直接入力しても指定できます。
枠線の色も同じようにメニューから変更できます。細かく編集できるので、自分で試してみて下さい。
TinyMCE Advancedはテーブルだけでなく、下線や背景色の指定など、ビジュアルエディタのカスタマイズが出来ます。管理画面の「設定」の「TinyMCE Advanced」から自分好みにカスタマイズしてみて下さい。
テーブルをよく使う場合は、いちいちエクセルを開くのは面倒なのでプラグインを活用するのがおすすめです。
HTMLで表を作成する（中級者以上向け）
- メリット：色や形などの自由度が高い。
- デメリット：手間がかかる。
さて最後は、HTMLで表を作る方法です。
表は、<table>～</table> というHTMLのタグで作ることが出来ます。
ちなみにHTMLは、ビジュアルエディタの「テキストモード」で作っていきます。
たとえば以下の表は…
| 氏名（漢字） | 山田 太郎 |
| 氏名（カタカナ） | ヤマダ タロウ |
| 職業 | 学生 |
| 電話番号 | 000-0000-0000 |
以下のHTMLのタグで作っています。
<tr>～</tr>というのが行で、<td>～</td>というのが列ですね。
なので行を増やす場合は、<tr>～</tr>を追加すればOKです。
列を増やす場合は、それぞれの<tr>～</tr>の中に<td>～</td>を追加すればOKです。
上記の表に追加してみます。
すると、以下のような表になりました。
| 氏名（漢字） | 山田 太郎 | 列を追加 |
| 氏名（カタカナ） | ヤマダ タロウ | 列を追加 |
| 職業 | 学生 | 列を追加 |
| 電話番号 | 000-0000-0000 | 列を追加 |
| 行を追加 | 行を追加 | 列を追加 |
また背景色を変える場合は、色を変えたいセル<td>～</td>を以下のように書き換えます。
<td style=”background-color: （カラーコードを入力する）;”>～</td>
これも試してみますね。「氏名（漢字）」のセルだけの背景色を変えてみます。
すると、以下のように色が変わりました。
| 氏名（漢字） | 山田 太郎 | 列を追加 |
| 氏名（カタカナ） | ヤマダ タロウ | 列を追加 |
| 職業 | 学生 | 列を追加 |
| 電話番号 | 000-0000-0000 | 列を追加 |
| 行を追加 | 行を追加 | 列を追加 |
手間はかかりますし、知識も必要ですが、HTMLを直接入力して表を作ることが出来ます。
実際に表を作る際はエクセルを使ったり、TinyMCE Advancedを使ったりする方が圧倒的に楽です。
が、細かく調整したい場合にはHTMLが役に立つこともあります。なのでこの記事で紹介しました。頭に入れておいてもらうと、今後役に立つときが来るかもしれません。
以上、WordPressで表を作る方法をお伝えしました。
今すぐ表を作成したいならエクセルで十分
テーブルを作成する機会が少ないのなら、わざわざプラグインを入れずにエクセルで作ってしまうのが楽です。
ただテーブルを作成する機会が多いなら、プラグインを活用したほうが楽ですね。行や列の追加も簡単ですし。
とは言ってもあなたがやりやすい方法が一番だと思うので、自分に合う方法で表を作ってみて下さい。
以上、お読みいただきありがとうございました。