WordPressの始め方

必須スキル|WordPressで表を作成方法!初心者でも簡単な3つの方法を紹介!

ワードプレス 表 初心者

WordPressを利用して記事を書く場合、ユーザーの視認性を高めるためにできる限り使った方が良いのが、次の4つ。

  • 箇条書き
  • 囲み枠

同じ内容の記事でも文字だけで伝えようとしている記事では読者にとって非常に読みづらいコンテンツとなります。

株式会社PEEP代表 高原
株式会社PEEP代表 高原
表を作ると読者の滞在時間が伸びることが多く、SEO的にも有利になります。弊社もヒートマップで調べていますが、その差は一目瞭然です!

例えば、弊社ミックスホストのサーバースペックを表示するにしても、次のような文章では非常に解りづらいでしょう。

スタンダードプランは初期費用無料で月額費用が880円となっています。更に、10日間は無料で利用することが可能。

しかし、こんな解りづらい文章も表を使えば一目瞭然。

スタンダードプラン
機能 スペック
初期費用 無料
月額費用 880円
無料期間 10日間

上記のようにWordPress上で表を使えば、文字数は少なくて済みますし、非常に解りやすいでしょう。

特に比較する時にはとても便利です。

もちろん私がWordPressを使って記事を書く上でも積極的に表を使用するように努めています。

しかし、WordPressで表を表現するのは意外と大変な作業になるので敬遠しがちという人も多いのではないでしょうか。

そこで、今日はWordPressで表を作る3つの方法を紹介したいと思います。細かく分ければもっといくつもの方法がありますが、基本的にはこの3つの方法を知っておけば良いでしょう。

では、具体的にWordPressで表を作る方法について解説していきましょう。

WordPressで表を作る3つの方法!

WordPressで表を作る場合、最も基本的なのはテキストエディタで「htmlタグ」を使う方法です。

いわゆるtableタグです。古くからホームページなどを作っている方には最も馴染み深い方法でしょう。

しかし、イチイチhtmlタグを入力するのは手間が掛かりますし、慣れないと間違いの元にもなります。

そこで、おすすめしたいのが次の3つの方法です。

  • テーブルブロックを追加する
  • 表計算ソフトを使用して表を作成する
  • WordPressの無料プラグインを利用する

現在、WordPressをインストールするとデフォルトでブロック入力による記事編集をするようになっています。

個人的にはなかなか馴染めず、未だにテキスト入力をしているのですが、表の入力ということを考えるとブロック入力の方が簡単かもしれません。

その点も踏まえて、順に見てきましょう。

WordPressのテーブルブロックを追加すれば表は簡単!

WordPressの記事編集をブロック入力(Gutenberg)で行っている場合、表の作成方法はとても簡単です。

手順としては次の通り。

  1. ブロックを追加する
  2. 「テーブル」を選択
  3. 行と列を指定して「生成」する
  4. 表のセルに文字を入力する

驚くほど簡単にできてしまいます。強いて言うなら、「テーブル」メニューを探すのが難しいでしょう。

では、もう少し詳しく見て行きましょう。

ブロックを追加からテーブル作成準備を!

まずは記事の編集を行います。

新規記事の場合は「新規」から「投稿」を選択して新しく書く記事を開きましょう。

ここでテーブルの挿入を行うのですが、実は色々な方法がありますので、2つのパターンを紹介しましょう。

1つ目はブロックを追加し、そこから「テーブル」というメニューを押す方法です。

下の図を参考にしてください。

メニューの中にテーブルらしきものが見当たらない場合は、「フォーマット」の中にあるテーブルを探してみてください。

もう一つの方法は、いきなり「テーブル」メニューを押す方法です。

下の画像のように良く見れば表作成を表すアイコンが表示されているので、そのボタンを押してみましょう。

「フォーマット」メニューから「テーブル」を選択

テーブルメニューをクリックすると、下の画像のようなウィンドウが開きます。

このウィンドウであなたの作りたい表の列数と行数を設定して「生成」ボタンを押しましょう。

セルに文字を入力すればWordPressの表が完成!

下の画像のように表が生成されます。今回は「2列×2行」の表を作成してみました。

あとはセルをクリックして文字を入力すればWordPressの表が完成します。

もちろん、表の中は文字だけでなく、画像なども簡単に配置することが可能です。

各々のセルに文字を入力してみた表がこちら。

表の細かい設定については、ツールバーである程度の編集が可能です。

また、テーマによって表の表示形式が異なるので、あなたが使用しているテーマの仕様なども確認が必要かもしれません。

では、次に表計算ソフトで作った表を貼り付ける方法について見て行きましょう。

WordPressの表の作り方①
テーブルブロックを追加する
・ブロック入力(Gutenberg)の方におすすめ
・文字だけではなく、画像なども簡単に配置可能

表計算ソフトで作った表をWordPressに挿し込む方法!

実は、表計算ソフトで作った表をWordPressに貼り付けることが可能です。

エディターは先程のGutenbergとClassic Editerのどちらも使用ができるので、WordPressの操作方法に慣れていない方にはおすすめの方法です。

手順は次のようになります。

  1. 表計算ソフトで表を作ってコピーする
  2. WordPressに貼り付ける

では、具体的に見て行きましょう。

表計算ソフトで表を作ってコピーする

まず、表計算ソフトで表を作ります。今回使用した表計算ソフトはMicrosoftのExcelですが、互換ソフトでも可能なので、Excelを持っていない方でも大丈夫。また、Excelだけではなく、WordやPowerPointなどで作成した表でも貼り付け可能です。

今回作ったExcelの表がこちら。

作った表の必要な部分だけ選択してコピーしましょう。

WordPressに貼り付けるだけで表が完成!

では、コピーした表をWordPressに貼り付けます。

Classic Editerを使用している場合はそのまま貼り付ければ大丈夫ですが、Gutenbergを使用している場合には、ブロックを追加して貼り付けましょう。

下の画像のように、「ブロック追加」から「段落」メニューを選択します。

段落ブロックに先程Excelでコピーした表を貼り付けると下の画像のようになります。

もちろん、WordPress上でも表として認識できるので、後から編集も可能。

ただし、結合したセルなどは上手く表示できないので注意してください。

では、3つ目の方法としてWordPressのプラグインを使った表作成の方法を紹介しましょう。

WordPressの表の作り方②
表計算ソフトで作った表を貼り付ける
・GutenbergとClassic Editerのどちらも使用ができる
・WordPressの操作方法に慣れていない方にはおすすめの方法

WordPressの無料プラグインで表を作成しよう!

WordPressで表を作成する方法として、プラグインを使用する方法があります。

プラグインを利用するメリットとしては、複雑な表を簡単に作ることができる点です。

WordPressの表作成プラグインは大きく分類すると次の3種類。

  • 静的テーブル
  • 動的テーブル
  • 価格テーブル

静的テーブルは先程も例として挙げていたような一般的な表です。では動的テーブルとはどのようなものでしょうか。

動的テーブルの主な特長としては次の2点です。

  • テーブルの内容が検索可能
  • csvなどのファイル読み込み可能

ですから、大規模な(情報量の多い)表を作成する時に利用すると便利

また、価格テーブルはその名の通り、商品などの価格をお洒落に表示する機能のことです。

ここでは、一般的な静的テーブルも動的テーブルも扱える人気のプラグイン「TablePress」を利用してWordPress上で表を作成する方法を紹介します。

WordPressプラグイン「TablePress」をインストール!

まずは表作成用プラグイン「TablePress」をインストールします。

インストールの方法は以下の通りです。

  1. プラグイン→新規追加
  2. 「TablePress」を検索してインストール

上記のステップでインストールが完了したら、下図のようにプラグインを有効化します。

WordPressプラグイン「TablePress」で表作成!

プラグインを有効化したら、左側に「TablePress」のメニューができるので、メニューの中から「新しいテーブルを追加」を選択します。

すると、下の画像のようなウィンドウが表示されるので、

  • テーブルの名前
  • 説明
  • 行数
  • 列数

を入力して「テーブルを追加」をクリックします。

更に、テーブルの内容を入力します。

セルのサイズは各々のセルの右下をマウスでドラッグして左右に動かすことで調整可能です。

入力が完了したら、画面の一番下にある「変更を保存」をクリックして表を完成させます。

この時、ショートコードが表示されているので、そのショートコードをコピーします。

WordPressの記事に作成した表のショートコードを記入!

WordPressの記事編集モードにて、先程コピーしたショートコードを記入します。

編集がGutenbergの場合はブロック追加の「ウィジット」から「ショートコード」を選択します。

ショートコードを記入したら、最後に記事を保存して確認してみましょう。

今回の場合は下の画像のようになりました。

TablePressで表を作成する時に細かい設定ができるので、あなたの目的に合った設定を行ってください。

TablePressを使うと、セルの結合も簡単にできるのでおすすめです。

ただし、TablePressは無料のWordPressプラグインですが、残念ながらレスポンシブ対応するには有料版が必要となります。その点だけ注意してください。

静的テーブルだけの作成の場合は、TinyMCE Advancedプラグインも人気です。

ですから、TbalePressが使いにくい場合には、TinyMCE Advancedを使用してみてください。

WordPressの表の作り方③
WordPressの無料プラグインを利用する
・TablePress
・TinyMCE Advanced

まとめ

今回はWordPressでの表作成についてhtmlタグ入力以外の3つの方法を紹介しました。

もう一度記事を振り返ってみましょう。

WordPressで表を作成するおすすめ方法は、次の3つでした。

  • テーブルブロックを追加する
  • 表計算ソフトを使用して表を作成する
  • WordPressの無料プラグインを利用する

WordPressの記事作成をGutenberg(ブロック入力)で行っている場合は、テーブルブロックによる作成方法が最も手軽にできるのでおすすめです。

また、Classic Editerでの記事作成をしている場合には、プラグインを使用するのが良いでしょう。

Excelなどの表計算ソフトを使用して表を作成し、その後WordPressに貼り付ける方法は他のソフトを使用するという点であまりおすすめではありません。

しかし、WordPressの編集に不慣れな場合には外部のソフトを使用する方が簡単かもしれません。

WordPressでの表作成は目的が達成できれば作り方は問題ではありません。ですから、あなたが作りやすいと感じる方法で作成してください。

ABOUT ME
高原 弘史朗 【株式会社PEEP代表取締役】
高原 弘史朗 【株式会社PEEP代表取締役】
【ブログ実績】 2015年ブログアフィリエイト開始→1年半で月100万円達成→2019年アフィリエイト報酬月1000万円達成・通算 1億円突破 【会社】 サイトとSNSを組み合わせた集客のアドバイスが得意。マーケティングまで含めたHP制作・デザインを承っています。 【僕】 嫁子供犬とのんびり暮らし 釣りとキャンプとお笑い大好きです。
ウルトラキャンペーンバナー ウルトラキャンペーンバナー