WordPress の投稿に表を挿入する方法

WordPress の記事に表を挿入するにはHTMLの知識が必要だ。しかし、プラグインを利用すると初心者の方でも簡単に表を挿入することができる。また表を使う方法を覚えるとコンテンツを読みやすくすることができ、ユーザーの離脱を防ぐことにつながる。

そこで、ここでは表の、

• 挿入
• 編集
• 調整
• リセット

する方法を解説する。

１．表を挿入する方法

表のアイコンをクリックし、「テーブルを挿入」にカーソルをあてよう。“ テーブル ”という表記は、HTML ソースで表を作る時にテーブルタグを使うことから来ている。

下図赤枠のようなパネルが表示されたら、表の行と列の数値を決めてクリックしよう。

すると図のようにエディタに表が挿入される。

表について簡単に解説する。基本的なことだが表の編集・調整がしやすくなるので確認がてら目を通そう。

「セル」とは、表にある１つ１つのマスのことを指す。そして「列」は縦に並ぶセルを指し、「行」は横に並ぶセルをのことを指す。このセルの中にテキストや数値を入力して表を作成する。また、セルのプロパティを使うと表の見出しを設定したり、列幅を調整することもできる。

２．表を編集する方法

表のツールには多くの操作方法があるので、混乱しないためにもここの解説を基本としてしっかり抑えておこう。

２−１．行・列を追加する方法

ここでは行の追加方法を解説する。この解説を参考に列の追加も同様にできるようになる。

まず、追加するために基準となる行を決めて、そのセルをクリックする。

次に「表」アイコンをクリックして行を挿入しよう。ここでは例として「行を上に挿入」をクリックする。

すると下図のように行が追加される。

２−２．行・列を削除する方法

ここでは列を削除する方法について紹介する。この解説を参考に行の削除も同様にできるようになる。

まず、表の中の削除したい列のセルをクリックしよう。

「表」アイコンをクリックして「列の削除」をクリックしよう。

これで列が削除される。

３．表を調整する方法

単にテキストや数値を羅列した表は読む気を失わせる可能性があるが、見やすく整えられた表なら読み進めてくれるだろう。ここでは見やすい表にするための調整方法を解説する。

３−１．見出しとデータを区別して見やすくする方法

次の図のように項目名にしたいセルを選択しよう。

次にメニューより「テーブル → セル → セルのプロパティ」の順にクリックしよう。

すると「セルのプロパティ」画面が表示される。

この画面の設定方法を覚えておけば、表を調整する際に便利なので一つひとつ解説しておく。

項目名	内容
幅	セルの横幅を調整したい時、ピクセル数を入力して調整できる。列の横幅を調整したい時によく使う。
高さ	セルの高さを調整したい時、ピクセル数を入力して調整できる。
セルの種類	「ヘッダーセル」を選択すると表の見出しを作ることができる。設定後、文字は太字になる。
範囲	「セルの種類」に似た設定項目で見出しの設定ができる。ここでの設定は主に音声ブラウザなどで役立つ。ほとんど使用することはないが、HTML に関して理解を深めたい方は、見出しの対象範囲の指定を参考にすると良いだろう。
H Align	Horizontal Align の略で「水平方向」という意味。ここで右寄せ / 左寄せ / 中央揃えの３パターンから選ぶことができる。
V Align	Vertical Align の略称で「垂直方向」を意味する。上揃え / 中央揃え / 下揃えの３つから選べる。

以上が各項目の解説である。

ここでは、見出しを作るため「セルの種類」から「ヘッダーセル」を選択して「OK」をクリックしよう。

ブラウザで確認すると下図の赤枠の通り見出しとして分かりやすくなる。

３−２．列の横幅を調整する

これも先の「３−１．見出しとデータを区別して見やすくする方法」で解説した「セルのプロパティ」を使用すると簡単に設定できる。

まず調整したい列のセルをクリックする。

メニューより「テーブル → セル → セルのプロパティ」の順にクリックしよう。

図の「セルのプロパティ」画面が表示されるので、「幅」に数値を入力しよう。

設定が完了したら「OK」をクリックしよう。

実際にブラウザの表示を確認して横幅を決めよう。ここではいくつかのピクセル数で変更してプレビューで確認し、130px がちょうど見映えの良い横幅となった。

３−３．データを右寄せ・左寄せ・中央揃えにする

ここでは例として全てのデータを右寄せにする方法を解説する。まず、調整したいセルを選択しよう。

続いて「右寄せ」アイコンをクリックしよう。

中央寄せにしたい場合は「中央寄せ」アイコンをクリックしよう。ここで、セルのプロパティを開くと「H Align（水平方向の調整）」があり、同様の機能をする。しかし、ソース上は同じ内容なので、使いやすい方を選ぶとよい。

これがブラウザでの表示イメージだ。

４．表をリセットする方法

表中のデータを調整していると、下図のように編集内容がごちゃごちゃになってしまい、まとめてリセットしたいこともあるだろう。

その時に「フォーマットをクリア」という便利なツールを使うと簡単にリセットができる。

まず表をどこでも良いのでクリックすると、編集画面の下部に「table」タグが表示されるのでクリックしよう。

すると表のセルが全て選択される。

次に「フォーマットをクリア」アイコンをクリックしよう。

これで表の編集内容がリセットされる。