ワードプレスのブログ記事で表(テーブル)を作成するプラグインと使い方

あなたは以下のような表(テーブル)を記事の中に挿入したいと考えていませんか?

見出し1 見出し2 見出し3
コンテンツ1 コンテンツ2 コンテンツ3

このような表はプラグインを使うことで簡単に記事の中に挿入することができます。

この記事ではプラグインを活用して、記事に表を挿入する方法と表の装飾方法をお伝えしていきます。

ワードプレスで表を作成するためのプラグイン「TinyMCE Advanced」

表を記事の中に挿入するためには、「TinyMCE Advanced」というプラグインが必須となります。

なので、まずは「TinyMCE Advanced」をインストールしましょう。

TinyMCE Advanced [surfing_su_note_ex note_color=”#f4f4f4″]

ワードプレスプラグインのインストール方法は以下の記事を参考にしてください。

ワードプレスプラグインをインストールする全手順

[surfing_su_note_ex note_color=”#feddda”]

以下の記事を参考に「TinyMCE Advanced」で表を使うためのボタンを追加してください。

「TinyMCE Advanced」の設定方法と使い方!ブログ記事に装飾をする方法!

表の用語解説

この記事では表の「ある部分」をそれぞれ正式用語で解説します。

なのでこの記事の中身が理解できるように、最低でも以下の3つの用語を頭に入れておいてください。

列と行とセルの解説

表を挿入する方法

表を記事の中に挿入する方法です。

表を挿入するには、記事エディタ画面にて以下のボタンをクリックします。

表の挿入ボタン [surfing_su_note_ex note_color=”#f4f4f4″]

※まだ設定が完了していない方は以下の記事を参考に「テーブル」のボタンを追加してください。

「TinyMCE Advanced」の設定方法と使い方!ブログ記事に装飾をする方法!

このボタンを押すと以下のようになります。

「テーブルを挿入」「挿入した表のセルの数」を選択してください。

セルの数を決めること

これで表が挿入されました。

セル内への文字入力は、文字を入れたいセルをクリックし入力するだけになります。

3 x 4だと以下のようになります。

見出し1 見出し2 見出し3
りんご 青森
パイナップル 黄色 沖縄
もも ピンク 山梨

6 x 2だと以下のような表になります。

1 2 3 4 5 6

この要領でまずは表を挿入してみてください。

表の編集方法

次に一度作った表を編集する方法になります。

行と列をあとから追加する方法

行を追加する方法

例えば、あなたが一度表を作って、後から行や列を追加したいときに使います。

まずは行の追加方法です。

挿入したい箇所の下の行のどこかのセルをクリックします。

行を後から追加する方法

次に「表」をクリックし、「行」「行を上に挿入」をクリックします。

行を追加する方法

すると、3行だった表の一番上に新しい行が追加されます。

行を追加した後

この要領で、下に行を追加するときは「行を下に挿入」をクリックしてください。

行を下に挿入する方法

列を追加する方法

次に列を追加する方法になります。

列を追加するのも行と同様に、右もしくは左に列を追加したい箇所を選び、その列のどこかをクリックします。

列のどこかをクリックする

次に「表」→「列」「列を右に挿入」をクリックします。

列を右に挿入をクリックする

すると、列が右側に挿入されました。

右側に挿入されたとき

左側に挿入する時も同様に行なってください。

左側に挿入する時

行と列を削除する方法

表を作成した後に、余分な行や列ができた場合は、削除が必要です。

削除方法は簡単です。

まずは削除したい行もしくは列のどこかのセルをクリックします。

どこかをクリックする

次に「表」→「行 / 列」を選択し、「削除」をクリックします。

削除をクリックする

これで完了となります。

表の微調整をする方法

次に表の微調整を行います。

例えば、以下のように表の背景に配色して区別しやすくすることもできます。

見出し1 見出し2 見出し3
りんご 青森
パイナップル 黄色 沖縄
もも ピンク 山梨

見出しとデータを区別してわかりやすくする

まずは、見出しの部分と中身の情報の部分をわかりやすく区別する方法です。

上記の表で言うところの、赤背景の部分になります。

まずは見出しにしたい行を選択し、「表」→「行」「行のプロパティ」をクリックします。

行の編集方法

次に「行の種類」「ヘッダー」にしておきます。

行をヘッダーに設定

そして、「詳細」をクリックし、「背景色」の赤枠の部分をクリックします。

背景色の設定方法

カラーペレットが出てくるのでお好みの色を設定してください。

カラーパレット

終わったら「OK」を押して終了となります。

列の幅の調整

次に列の幅の調整方法です。

列の幅を調整するときは、幅を変更したい列のどこかのセルをクリックし、「表」「セル」「セルのプロパティ」をクリックします。

列の横幅を設定している

そして、その列の横幅を「幅」の項目に記載します。

幅を調整している様子

「OK」を押して完了となります。

表の中の情報の配置変更

次に表の中の情報の配置の変更方法です。

以下の表では見出しの部分が左寄せになっています。

これを中央揃えにしていきます。

左寄せの表

以下のように配置を変更したい行 / 列を選択します。

そして、「中央揃え」をクリックします。

中央揃えをクリック

このように中央揃えにすることができます。

中央揃え

この要領で他のセルの配置も変更してみてください。

表の中身をリセットする方法

表をいじっていくうちに、配置や文字の太さ、色がバラバラになっていくことがあります。

そんなときは見栄えが悪いので元に戻したくなるかもしれません。

そんなときは、表をクリックし、エディタ下部の「table」をクリックします。

tableをクリックします

すると、表全体が選択されるので、「書式設定をクリア」をクリックします。

書式設定をクリア [surfing_su_note_ex note_color=”#f4f4f4″]

※以下の記事を参考に「書式設定をクリア」のボタンを追加してください。

「TinyMCE Advanced」の設定方法と使い方!ブログ記事に装飾をする方法!

すると、表全体がリセットされます

リセットされた表

これでリセットが完了です。

表を削除する方法

最後は表自体を削除する方法です。

先ほどのように表のどこかをクリックし、「table」をクリックします。

tableで選択する

表全体が選択されたら、「Back Space」もしくは「delete」で削除してください。

これで表は削除されます。

まとめ

以上がワードプレスのブログ記事における表の挿入方法となります。

特に表は大事なデータをまとめるのに役立ちますので、有効に活用して訪問者が見やすい生地作りに活用して見てください。

[surfing_su_note_ex note_color=”#f4f4f4″]

以下の記事では表(テーブル)以外にも、ブログ記事を装飾する方法を解説しています。ぜひご覧ください。

ブログ記事に画像を挿入する方法

ブログ記事にYoutube動画を埋め込む方法

ブログ記事にGoogleマップを埋め込む2ステップ

スポンサードリンク