サイト名を「ブログチップス」から「マーケのじかん」に変更しました(2018.12.6)

WordPressの表の作成はエクセルかプラグインがおすすめ

WordPressってデフォルトだと表を作る機能がないので、不便ですよね。ただ、表を作るのは実はめちゃめちゃ簡単です。

個人的に一番楽なのは「エクセルの表をコピペする方法」なのですが、他にも2つの方法があります。

  • プラグイン「TinyMCE Advanced」を使う
  • HTMLで記述する(中級者以上向け)

ということでこの記事では、それぞれの表の作り方をお伝えしていきます。

以下を読みながら、やりやすい方法で表を作ってみてください。

エクセルを使って表を作成する

簡単さ:★★★
便利さ:★★
メリット:手間がかからない。背景色の指定も楽。プラグイン不要。
デメリット:エクセルを立ち上げる必要がある。行や列の追加が面倒。

エクセル(Excel)で作った表を、WordPressに貼りつける方法です。

オープンオフィスの表計算ドキュメント(.ods)やグーグルスプレッドシートでも出来ます。

ただグーグルスプレッドシートの場合、表の背景色をコピーすることは出来ません。

エクセルで作った表をコピーする

エクセルで表を作ったらコピーします。テキストを先に入力しておいても大丈夫です。

エクセルで作った表をコピーする

表の背景色もコピーできます。背景色をつけたい場合は、エクセル上で背景色をつけておきましょう。

WordPressの投稿の編集画面に貼りつける

コピーした表を、そのまま投稿の編集画面に貼りつけます。

WordPressの投稿の編集画面に表を貼りつける

すると、上記のように表を挿入することが出来ます。ラクですね。

ただ、枠線の色はコピーすることが出来ません。たとえばエクセルで赤色の枠線の表を作ってコピーしても、WordPressには赤色は反映されません。

また行や列を追加する場合は、新しく表を作って貼り直す必要があります。もしくは後述するプラグインかHTMLを使わなければ追加できません。

そのように細かい微調整は後述するHTMLを使わないと出来ませんが、サクッと作りたい場合はエクセルが楽だし、速いです。

なのでエクセルはおすすめなのですが、他の2つの方法についてもお伝えします。

プラグイン『TinyMCE Advanced』を使って表を作成する

簡単さ:★★
便利さ:★★★
メリット:ビジュアルエディタ上から素早く表を作れる。行や列の追加が楽。
デメリット:色の指定に手間がかかる。

WordPressのプラグイン『TinyMCE Advanced』をインストールすることで、WordPressの投稿画面から表を作れるようになります。

プラグインをインストールすることでページの表示速度が若干遅くなってしまうのですが、投稿画面から表を作りたいのであればおすすめです。

TinyMCE Advancedをインストールする

まずはTinyMCE Advancedをインストールしていきます。インストール方法が分かる場合は、ガンガン進めていってください。

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

WordPress プラグインの新規追加

そしたらキーワードに『TinyMCE Advanced』と入力して、表示された『TinyMCE Advanced』の「今すぐインストール」をクリックします。

インストールは10秒以内に終わります。

TinyMCE Advancedをインストールする

インストールが終わったら、「有効化」をクリックします。

これで準備は完了です。

ビジュアルエディタで表を作成する

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です。

wordpress テーブルメニューを追加する

表の背景と罫線の色を指定する

作った表のセルを選択した状態で、テーブルメニューの「セルのプロパティ」「行のプロパティ」から色を指定することが出来ます。

試しに背景色を変更してみますね。まずは上の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で表を作る方法をお伝えしました。

今すぐ表を作成したいならエクセルで十分

テーブルを作成する機会が少ないのなら、わざわざプラグインを入れずにエクセルで作ってしまうのが楽です。

ただテーブルを作成する機会が多いなら、プラグインを活用したほうが楽ですね。行や列の追加も簡単ですし。

とは言ってもあなたがやりやすい方法が一番だと思うので、自分に合う方法で表を作ってみて下さい。

以上、お読みいただきありがとうございました。

もしあなたがフリーランスや個人事業主なら

アンケートにご協力いただけませんか?

というのも、フリーランスや個人事業主同士で集まれるようなコミュニティを作りたいと考えているためです。頂いた意見を参考にして、より多くのフリーランスや個人事業主の役に立つコミュニティを作り上げていきます。そのためにもあなたの力が必要です。ということで、以下をクリックしてアンケートに答えてみて下さい。

ここをクリックしてアンケートに答える