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

WordPress の記事に表を挿入するにはHTMLの知識が必要だ。しかし、プラグインを利用すると初心者の方でも簡単に表を挿入することができる。また表を使い情報を整理とコンテンツが読みやすくなり、ユーザーの離脱を防ぐことにつながる。そこでwordpressの投稿に表を挿入する下記4つの方法を解説する。

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

表の作成の前にプラグイン「TinyMCE Advanced」を必ずダウンロードしよう。
WordPressの投稿機能（ビジュアルエディタ）は、デフォルトの状態だと表の挿入、または編集ができないからだ。
このプラグインはwordpress初心者から上級者の大半が使っている。豊富な編集機能をもち、さらにメニュー画面がドラッグ&ドロップで設定でき、日本語対応しているため使いやすい。必須と言ってもいいプラグインなのでこの機会に導入しよう。

１．表を挿入する方法

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

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

※ パネルは「列数（最大数10）× 行数（最大数10）」の範囲で選択ができる。またパネルの下部に「列数×行数」の数値が表示されるので、この数値を確認しながら表を挿入しよう。

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

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

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

２．表を編集する方法

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

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

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

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

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

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

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

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

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

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

これで列が削除される。

３．表を調整する方法

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

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

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

※ 項目名の「番号」をドラッグして（クリックしたまま）、「おいしさ度数」までカーソルを持っていくと図のように選択できる。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5．まとめ

いかがだっただろうか。表を使うことでコンテンツが読みやすくなり、ユーザーがページから離脱するのを防ぐことにつながる。ぜひ実践してほしい。