WordPressのWebサイトで表を作成する方法

Webサイト運営をするうえで、ユーザーの検索ニーズに応えるコンテンツを作成するために、できるだけ分かりやすく情報を提供することは欠かせません。そのためには、図や表を使った解説は必要不可欠とも言えます。競合するコンテンツよりもハイクオリティであるために、手軽に図や表を作成できる準備をしておきましょう。

今回は、WordPressを使った表の作成方法にスポットをあてました。ユーザーの満足度を高められるコンテンツを作成するために、ぜひご参考ください。

プラグインを用いて作成する

WordPressのプラグインを使うと、技術的な知識がない人でも簡単に表を作成できます。今回は「TinyMCE Advanced」というプラグインを使った表の作成方法をご紹介します。「TinyMCE Advanced」はWordPressのビジュアルエディタを拡張するプラグインです。デフォルトの状態のビジュアルエディタに比べて、表の設置をはじめ、動画の埋め込みなど、便利な機能を搭載しています。「TinyMCE Advanced」を使うと、表の作成のほかにもビジュアルを使った表現を、専門知識がなくても直感的な操作で行うことができるのです。

「TinyMCE Advanced」はWordPressの公式プラグインページからインストールできます。ユーザーからの評価も高い印象です。ビジュアルエディタのプラグインということもあり、見ただけで操作方法をイメージできます。

それでは「TinyMCE Advanced」を使用する準備からはじましょう。

TinyMCE Advancedのインストール方法

WordPressの左メニューから「プラグイン」の「新規追加」をクリックします。右上のプラグインの検索窓に「TinyMCE Advanced」と入力すると、検索結果に「TinyMCE Advanced」が表示されますので、「いますぐインストール」をクリックしてください。ボタンの上にある「いますぐインストール」の文字が「有効化」になったら、クリックしプラグインを有効化します。

設定を行う

表の作成ボタンに関してはデフォルトの状態で可能ですので、特に設定することはありません。

ボタンの配置調整など自分が使いやすいようにカスタマイズ場合は、左メニューから「設定」の「TinyMCE Advanced」をクリックします。画面の右側に表示されるのがエディタ設定画面です。WordPress5.0からの標準エディターであるBlock Editor （Gutenberg）とそれ以前のClassic Editor（TinyMCE）の設定をタブで切り替えられるようになっています。今回は、まだ多くの人が利用しているClassic Editor（TinyMCE）の画面でご説明します。

画面に出ているエディターメニューのボタン配列がデフォルトの状態です。赤で囲った表作成ボタンをドラッグして位置を変更できます。また、下部にある「下線」や「打ち消し」などのボタンをドラッグ＆ドロップするとエディターメニューをカスタマイズできますので、この機会に変更したい人は調整しましょう。デフォルトで設定されているメニューボタンを外すことも可能です。「変更を保存」を押して完了します。

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

左メニューから「投稿」の「新規追加」を選択しましょう。投稿作成画面のビジュアルエディターにあるメニューバーから「テーブル」もしくは、「テーブルボタン」をクリックすると表の列数と行数を指定する画面が表示されます。

作成したい列数と行数を指定した状態でクリックをすると、エディタに表を挿入されます。

表を作りこみましょう。表を選択した状態で、メニューバーから「テーブル」もしくは、「テーブルボタン」をクリックします。「セルのプロパティ」を選択し、タブを「高度な設定」に切り替えます。「Border Style」で表に使っている線の種類を変更します。今回は標準的な実線（Solid）にしました。

枠線の色と背景色の変更も可能です。色はカラーチャートから選択できます。数値を入力して指定することも可能です。設定したら「OK」をクリックし表に反映します。今回はグレーの背景を設定しています。

一部のセルだけの仕様を変更することもできます。わかりやすいように先にテキストを入力しています。例えば、一番上の行だけを選択し、さきほどの「セルのプロパティ」から色を変更すると、表が見やすくなります。今回は、一番上の人名の行だけ緑色にしました。

表に新しい行の追加する方法を試してみましょう。「3回目」の行のセルに入力できる状態にして、「テーブル」の「行」の中にある「行を下に挿入」をクリックします。すると、上のイメージのように、最下段に行が追加されたのを確認できます。

表を幅が少し狭くしたいとします。このような場合は、表を選択した状態で「表のプロパティ」を選択します。幅が100%になっているので、80%にして「OK」をクリックしてみましょう。表の幅が少し短くなったのを確認できます。

今回ご説明した以外にも、列を指定して色や線の種類、幅・高さのサイズを変更するなど、要領は同じですので、いろいろ試してみましょう。悩むことなく理想的な表を作成できるはずです。

Word、EXCELの表を貼り付けて作成する

馴染み深いWordとExcelなら表は簡単に作れる人が多いでしょう。これらのアプリケーションで作った表をWordPressに貼り付けるのも一つの方法です。

Wordを使って表を作成する

まず、Wordで表を作成します。

作成した表を選択して、WordPressのビジュアルエディターに貼り付けるだけです。すでにWordで作った表があり、WordPressで再度作成するのが面倒な場合、簡単に表を流用できて便利な方法と言えます。

Excelを使って表を作成する

Excelを使って表を作成します。

作成した表を選択して、WordPressのビジュアルエディターに貼り付けます。
こちらも、Word同様にすでにExcelで作った表があるので、とりあえずWordPressに入れてしまいたいという場合に使える方法でしょう。

HTMLで作成する

HTMLを使って表を作成するには、HTMLの知識が必要になります。簡単な表を作るだけなら決して難しいわけではなく、基本さえわかれば使えるでしょう。HTMLにおいて、表はテーブルと言います。作成のコツはtableタグを理解することに尽きます。

テーブル作成に使うHTMLタグ

基本となる以下の4つのタグを理解しましょう。

1. tableタグ

テーブルを指定するタグです。<table>と</table>の間に行や列など表の構成やデータにあたるtrタグやtdタグを設定します。

2. trタグ

テーブルの行を指定するタグです。<tr>と</tr>の間が一行になります。trタグの数だけ、行が増えるイメージです。

3. tdタグ

セルに該当する部分です。<td>から</td>で一つのセルを表します。表に記載するデータをイメージしましょう。

4. thタグ

セルに該当する部分ですが、こちらは見出しにあたる部分に設定します。<th>から</th>で一つのセルを表します。

テーブル作成に使うHTMLタグ

<table border="1">
　　<tr>
　　　<th>ゴールド会員価格</th>
　　　<th>シルバー会員価格</th>
　　　<th>非会員価格</th>
　　</tr>
　　<tr>
　　　<td>5,500円</td>
　　　<td>7,000円</td>
　　　<td>9,500円</td>
　　</tr>
</table>

上記は簡単な表のHTMLです。WordPress管理画面の左メニューから「投稿」の「新規投稿」をクリックしてください。HTMLは、テキストエディターに記述するので、エディターはテキストにしておいてください。テーブルの中に、trタグで行を作り、thタグとtdタグでデータを配置しています。ちなみに、「table border="1"」で、テーブルの罫線の太さを指定します。実際に記述してみると理解がぐっと深くなりますので、入力してみてください。

プレビューをしてみると、表のイメージを確認できます。単純なタグの指定ですが、表を作成できました。凝った表を作るなら、より深い知識が必要になりますが、あくまでも簡単な表ならば、このようにそれほど難しいものではありません。選択しているWordPressのテーマによっては、罫線などがHTMLの記述通りに表示されない場合がありますので、留意しておきましょう。

まとめ

今回は、WordPressのプラグイン、WordとExcelといったアプリケーション、HTMLの3タイプの表作成をご紹介しました。既存の表をすぐにWordPressに表示しないのか等、状況によりますが、HTMLの知識がなくてもすぐに表を作成できるプラグインは、ぜひインストールしておきたいところです。今回ご紹介した「TinyMCE Advanced」は、表以外にもビジュアルエディターをより使いやすくできる優れものですので、活躍の機会が多いでしょう。表に関しても、細かいところまで、わかりやすく調整できるため、こういったコンピュータ関連が苦手な人でも困ることはないでしょう。ユーザーのニーズを押さえた高機能なプラグインを使えば、簡単に実現できることがたくさんあるのです。

また、プラグインをどうしても使いたくないという人は、HTMLが馴染みやすいかもしれません。HTMLを学んだことがある人ならお分かりでしょうが、初心者が最初の頃に学ぶのがtableタグです。それだけ入門編としてのレベルですので、トライしてみてはいかがでしょうか。

コンテンツに表を手軽に使えるようになれば、読み手に伝えらえる情報のレベルが向上します。品質の高いコンテンツを提供しなければならない中、今回のような表作成は積極的にマスターしておくべきでしょう。