注目度の高い記事
ブログにテーブル(表)を設置する方法と使いこなすためのテクニック

 

わかば
他のブログとか見てたら、よく表みたいなのが使われてるんですけど
あれって私のブログでも作れるんですかね?

山本
わかばちゃんが言ってるのって「テーブル」の事だよね
割と簡単にできるから、ここで使い方を覚えちゃおう

わかば
はい!じゃあお願いしまーす!

 

ワードプレスブログにテーブル(表)を設置する方法と、その便利な使い方について解説します。

このページを読んでわかること
  • テーブルについての基本知識
  • テーブルを簡単に設置する方法
  • テーブルを使いこなすためのテクニック

1.テーブルってなに?使う意味は?

一般的にテーブルというと机のことを言いますが、

ワードプレスでいうテーブルとは「表」のことを指します。

 

ブログやサイトなどでよく使われているこんなやつの事です。

テーブルの見本 テーブルの見本 テーブルの見本 テーブルの見本
テーブルの見本 テーブルの見本 テーブルの見本 テーブルの見本

きっとあなたもどこかで見たことあるんじゃないでしょうか。

 

なぜこれがよく使われているのかというと

やはり、情報が圧倒的に見やすくなるということです。

 

表を使ったものとそうでないもの、試しに見比べてみましょう。

例:レンタルサーバープラン

プランAの場合、1ヶ月契約は720円で3ヶ月だと680円、6ヶ月では640円。

プランBの場合、1ヶ月契約は1320円で3ヶ月1240円、6ヶ月では1160円。

プランCの場合、1ヶ月契約は2220円で3ヶ月2080円、6ヶ月では1940円です。

 

これをテーブルで表示してみると、、、

1ヶ月契約 3ヶ月契約 6ヶ月契約
プランA 720円/月 680円/月 640円/月
プランB 1320円/月 1240円/月 1160円/月
プランC 2220円/月 2080円/月 1940円/月

わかば
見やすさが段違いですね!

 

情報が整理されて見やすくなっているし、プランを比較するのも一目瞭然ですよね。

これがブログにテーブルを使用するメリットです。

 

2.テーブルの使い方(基本編)

ブログにテーブルを設置する方法は以下の2種類があります。

  • HTML を使う
  • プラグインを使う

それぞれのやり方を解説します。

 

山本
と、その前にテーブルの名称について覚えておきましょう!

テーブル各所の名称

表全体 テーブル
テーブルの1つの枠 セル
横の列
縦の列

 

2-1 HTMLタグ でテーブルを設置する方法

HTMLタグ で基本的なテーブルを表示する方法です。

<table>
  <tr>
     <th>見出し</th>
     <th>見出し</th>
     <th>見出し</th>
  </tr>
  <tr>
     <td>テキスト</td>
     <td>テキスト</td>
     <td>テキスト</td>
  </tr>
  <tr>
     <td>テキスト</td>
     <td>テキスト</td>
     <td>テキスト</td>
  </tr>
</table>

 

テキストモードでこのタグを入力すると、以下のようにテーブルが表示されます。

テーブル表示例

 

以下がそれぞれのタグの意味です。

<table></table> テーブルを作るためのタグです。
<tr></tr>(table record) 横一列のデータをまとめるタグです。
<td></td>(table data) 表の値を意味するタグです。
<th></th>(table theme) 表の見出しを意味するタグです。

 

例えば、このタグを AddQuicktag プラグインに登録しておくことで

手軽にテーブルを設置することもできます。

参考リンクAddQuicktag プラグインの設定方法と使い方

 

わかば
うーん、便利そうなんですけど
毎回、表のセルの数って変わりますよね~??

山本
そうだよね。
そこでおすすめしたいのが、次のプラグインを使ったやり方なんだよ

 

2-2 プラグインでテーブルを設置する方法

HTMLタグを使った基本的なテーブルの設置方法を解説しましたが

毎回セルの数は変わるし、その度にHTMLタグを入力するのはちょっと面倒ですよね。

 

そこで、わー研。がおすすめするのが、プラグインを使ってテーブルを設置する方法。

 

ここでは TinyMCE Advanced プラグインを使った設置方法を解説するので

インストールがまだの方は、以下のページを参照して先にインストールしておいてください。

参考リンクTinyMCE Advanced の設定方法と使い方

 

TinyMCE Advanced を導入すると、ワードプレスの投稿編集画面に、テーブルを設置するための機能が追加されます。

TinyMCE Advanced を導入するとテーブル設置ボタンが追加される

 

これをクリックすることで、自由なサイズのテーブルを簡単に設置することができます。

TinyMCE Advanced を使ったテーブルの設置画面

わかば
あーこれならすごく簡単です!

山本
続いてテーブルのさらに詳しい使い方を解説していきます

 

3.テーブルの使い方(応用編)

ここまでは、ただ単にテーブルを設置する方法だけの解説でしたが

ここからは、さらに踏み込んだテーブルの使い方について覚えていきましょう。

 

基本的に、TinyMCE Advanced プラグインを使った方法になります。

 

3-1 テーブルに見出しを作る方法

まずは、テーブルに色違いの見出しを作ってみましょう。

 

ドラッグ&ドロップで見出しを作りたい範囲を選択しましょう。

ドラッグ&ドロップで見出しの範囲を選択

 

テーブルの範囲を選択した状態で、テーブル機能から セル > セルのプロパティ とクリックします。

セル > セルのプロパティを選択

 

セルのプロパティが表示されるので、セルの種類 から ヘッダーセル を選択します。

セルの種類からヘッダーセルを選択

 

これでテーブルに見出しが設定されました。

見出し部分の背景の色が変わって太文字になったのでわかりやすいですね。

見出しが設定されたテーブル

 

元に戻したい時は、再度範囲を選択して セル を選択すればOK。

セルのプロパティからセルを選択

 

3-2 セルの結合と分割

複数のセルを選択して、セル > セルの結合 をクリックすると、それらのセルを合体させることができます。

セルの結合

 

結合するとこのような表示になります。

セルを結合した例

 

セルを分割したい場合は、もう一度セルを選択(セル1つだけなので選択しても青くなりません)して

セル > テーブルセルを分割 を選択しましょう。

セル > テーブルセルを分離を選択

 

このように元通りになりました。

テーブルセルを分割した例

 

3-3 行の挿入と削除

行を挿入する方法です。

まず基準となる行を選択しましょう。

基準となる行を選ぶ

 

今回は下に挿入するので、行 > 行を下に挿入 と選択します。

行 > 行を下に挿入を選択

 

選択した行の下に、行が1つ追加されました。

行が追加された

 

行の削除も全く同じ手順でできます。

削除したい行を選択して、行 > 行を削除 とクリック。

行の削除

 

これで元に戻りましたね。

行の削除後のテーブル

 

3-4 列の挿入と削除

「列」の挿入と削除も、「行」と全く同じ方法で行うことができます。

 

3-5 セルごとの割合(横幅)を変更する

テキストモードで、%を指定することで、セルの横幅を変更することもできます。

 

テーブルを表示した状態で、テキストモードを選択します。

テーブルを表示してテキストエディタを選択

 

テーブルの HTML が表示されるので、ハイライト部分のパーセンテージを変更しましょう。

山本
合計が100%になるように設定しましょう

テーブルのパーセンテージを変更する

 

20% と 80% に設定するとこのような表示になります。

テーブルを20%と80%に設定した例

 

さいごに

今回は、ワードプレスブログでのテーブルの使い方について解説しました。

 

情報をわかりやすくまとめることができ、ユーザーの利便性も良くなりますし

ブログの見た目もよくなるといい事ずくめなので、積極的に使っていくようにしましょう。

 

最後にテーブルについておさらいしておきましょう。

  • テーブルを使うと情報がわかりやすくなる
  • TinyMCE Advanced で簡単にテーブルを設置できる
  • 見出しを付けたりセルを結合したりなど見た目をカスタムできる

 

わかば
色々とできることが多かったんで
使いながら少しづつ覚えていきます♪

山本
とても便利な機能だから
チャンスがあればどんどん使っていこうね
ゼロから始める!ワードプレスブログ スタートマニュアル
ワードプレスブログスタートマニュアル

ブログには興味があるけど、ワードプレスってなんか難しそうだなぁなんて思ってませんか?

わー研。では、そんなあなたのために、手順通り進めるだけでワードプレスブログが開設できるマニュアル(特設ページ)をご用意しました!

もちろん無料で使用可能ですので、はじめての方はぜひご活用ください!

Twitterでフォローしよう

おすすめの記事