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

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

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

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

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

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

TinyMCE Advancedのインストール方法

image9.png

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

設定を行う

image11.png

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

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

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

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

image6.png

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

image13.png

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

image8.png

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

image14.png

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

image2.png

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

image12.png

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

image10.png

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

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