WordPressブログで表をサクッと作る3つの方法【プラグインからHTMLまで】

WordPress でブログをしていると、「比較」や「まとめ」の紹介として分かりやすく「表」で解説したい時ってありますよね。

そんな時は、「元々ある機能」「プラグイン」「HTML」のどれかで対応することができます。

「表」を作る機能って、元々あるの?

くま五郎

りょう

WordPress 5.0 以降のエディタをそのまま使っている人なら、「表」を簡単に作れるよ!

ということで、新旧のエディタに合わせた「表」の作り方を簡単に紹介しましょう。

新エディタで「表」を作る方法

最近 WordPress を始めた人からすると「新エディタ?」と思うかもしれませんが、WordPress 5.0 から Gutenberg という編集画面に変わったんです。

そのため、従来のエディタの方が良いという人はバージョンを古いままにしたり、プラグインを使って以前のエディタにして使っている人もいます。

もし今の新エディタが使いづらいという人は、WordPressの投稿画面が使いづらい!←エディタを変えるプラグイン3つ紹介の記事を参考にしてみてください。

ブロックから「表」を作成

新エディタではブロックを積み上げていくような仕様となっているので、「表」を作りたい時には を押して通常と同じように追加することになります。

を押したら、「フォーマット」のカテゴリーにある「テーブル」をクリックします。

table

すると、「列数」と「行数」を選択するポップが出てきます。

table

「列数」は横の枠が増えていき、「行数」は縦の枠が増えていきます。この段階で決められないという人でも、あとで増やすことができるので適当にで大丈夫です。

table

あとは、枠の中に文字を入力していけば「表」の完成です。

「表」を少しカスタマイズ

「表」を作っている時にもう1行増やしたくなった場合には、中央にある をクリックすると列や行の追加・削除を行うことができます。

table

また、「表」の位置を変えたり幅を画面いっぱいにすることも可能。

table

そして、真っ白だと味気ないという人は、灰色と白色が交互になるような「表」にデザイン変更することも可能です。

table

プラグインで「表」を作る方法

新エディタでは純粋な表を作るしかできないですし、旧エディタにしてしまうとデフォルトでは表を作る機能がありません。

そういった場合には、「プラグイン」を使うか「HTML」で記述する方法があります。

表が作れるプラグイン「TablePress」

「HTML」を使いたくないという人は、プラグイン「TablePress」を使うと簡単に表示させることができます。

table

>> https://ja.wordpress.org/plugins/tablepress/

使い方は簡単で、「TablePress」を有効にしたら左のメニューに「TablePress」という項目が追加されるので、そこの「新しいテーブルを追加」から始めます。

table

まずはデータを見分けるためのタイトルを入力して、列数と行数を設定してから開始します。

すると枠が表示されるので、必要な文字を入力していくだけです。

table

あとは、列や表を追加・削除するには「テーブルの操作」から、表のデザインを設定するには「テーブルのオプション」から好きなようにカスタマイズしておくだけです。

table

MEMO
普通の「表」を作る場合には、一番下のカテゴリーにある「DataTablesを使用」のチエックを外してください。

完成できたと思ったら、画面上下に「プレビュー」ボタンがあるので押して確認してみましょう。

それで問題なければ、[table id=数字 /]と書かれたショートコードがあるので、これを記事内に入力すれば記事に「表」が表示されるはずです。

HTML で「表」を作る方法

最もカスタマイズ性のある「表」の作り方は、HTML で記述すること。今まで HTML なんて使ったことがないという人でも、「表」くらいならコピペでも出来るくらいなので試してみる価値はあります。

HTML で「表」を作る時の概念

HTML で「表」を作る時には、4つのタグを主に使います。

テーブルで使うタグの種類
  • table:テーブルを表示するためのタグ
  • tr:行をまとめるためのタグ
  • th:見出しとなるタグ
  • td:表の中身となるタグ

図で表すと、このような感じになります。

table

「表」を作る HTML の書き方

一番シンプルな HTML の書き方としては、下記のようになります。

HTML
<table>
  <tr>
    <th>好きな野菜</th><th>嫌いな野菜</th>
  </tr>
  <tr>
    <td>にんじん</td><td>ピーマン</td>
  </tr>
</table>

すると、こんな感じになります。

好きな野菜嫌いな野菜
にんじんピーマン

行を増やしたいのであれば、tr のタグで囲っている部分を丸っと追加。列を増やしたいのであれば、th と td を追加すればOKです。

りょう

プラグイン「Classic Editor」などを使っている人は、エディタを「テキスト」に変えてから入力してくださいね!

「表」のデザインを CSS で修正

まず最初に、th の見出しに書いた文字は中央に表示されるのですが、td は左寄せで表示されるのがデフォルトの仕様となっています

全ての td で中央寄せにしたい場合には、CSS を使って修正すると便利です。

その場合には、以下をカスタムCSS などに追加してみてください。

CSS
table {
  text-align: center;
}

さいごに

Word を使った方法もありますが、あまり効率的ではないなと思ったのでこの記事では省きました。でも、Word をよく使っている人は表示方法を探してみると良いと思います。

どの方法でも「表」を表示できるので、自分にあったものを選んでブログに挿入してみましょう!