ブログのつくり方

WordPressで表を簡単に作成する方法

投稿日:

ブログを書いていると、記事の中で「表」を使って何かを説明することもあります。

しかし、ブログを始めたばかりでWordPressを使うのに慣れていない時には、表のつくり方に迷ったり、体裁の良い表がつくれなくて悩んだりすることもあるのではないでしょうか。

そこで、ここではWordPressの投稿画面で簡単に表を作成する方法について説明します。

 

WordPressの投稿画面で簡単に表を作成する方法

それでは、以下にWordPressの投稿画面で簡単に表をつくる方法を説明します。

 

投稿画面で表をつくるには?

まず、WordPressの投稿画面でどうやって表をつくるかですが、実は表を作成する方法は一つではありません。

いくつかやり方はあるのですが、ここでは「TinyMCE Advanced」というプラグインを使った方法を紹介したいと思います。

なぜかと言うと、「TinyMCE Advanced」を使えば「見た目の整った表が簡単につくれる」からです。

また、表を挿入・作成する以外にも、「TinyMCE Advanced」があれば、記事の作成や編集に便利な機能がたくさん使えるようになるので、WordPressでブログを運営するなら、このプラグインをインストールしておくのがおすすめです。

では具体的にどうするのかと言うと、「TinyMCE Advanced」を使って表を作成するためには、以下の作業を行います。

表をつくるまでの流れ

  1. 「TinyMCE Advanced」をインストール・有効化する
  2. プラグインの設定を確認する
  3. 投稿画面でエディターに表を挿入する
  4. 表をカスタマイズして、見た目を調整する

上記①~④の詳しいやり方は、以下の項目で説明していきます。

 

①「TinyMCE Advanced」をインストール・有効化する

でははじめに、「TinyMCE Advanced」をインストール・有効化するの手順について解説します。

ここで行う作業は以下のとおりです。

「TinyMCE Advanced」のインストール・有効化手順

  1. WordPress管理画面のメニューから「プラグインを追加」画面を表示
  2. 画面の右上にある検索ウィンドウに「TinyMCE Advanced」と入力
  3. 検索結果に表示された「TinyMCE Advanced」の「今すぐインストール」をクリック
  4. インストールが完了したら、「有効化」をクリック

上記①~④の流れを詳しく見ていきます。

まず、WordPress管理画面のメニューから「プラグイン」⇒「新規追加」をクリックして、「プラグインの追加」画面を表示します。

そうすると、以下のような画面になるので、右上にある検索ウィンドウに「TinyMCE Advanced」と入力します。
TinyMCE Advancedのインストール画面

そして、検索結果の左上に「TinyMCE Advanced」が表示されたら、「今すぐインストール」をクリックしてください。

インストールが終わったら、以下のように「有効化」というボタンが表示されます。

TinyMCE Advancedの有効化ボタン

「有効化」をクリックしたら、ここまでの操作は完了です。

 

②「TinyMCE Advanced」の設定を確認する

次に、「TinyMCE Advanced」のエディター設定の状態を確認します。

ここで行う作業は、以下のとおりです。

「TinyMCE Advanced」の設定確認手順

  1. WordPress管理画面で「エディター設定」画面を表示
  2. 「Block Editor(Gutenberg)」または「Classic Editor(Tiny MCE)」タブをクリック
  3. エディターのツールバーに「テーブル」のボタンがあることを確認
  4. ③でツールバーにテーブルのアイコンがない場合は、「使用しないボタン」の中からドラッグ・アンド・ドロップで「テーブル」のボタンをツールバーの中に移動する
  5. ④の作業を行った後に「変更を保存」をクリックする

①~⑤の手順を詳しく見ていきます。

まず、WordPress管理画面で「設定」⇒「TinyMCE Advanced」をクリックして「エディター設定」という画面を表示します。

この画面は、以下のように「Block Editor(Gutenberg)」と「Classic Editor(Tiny MCE)」という2つのタブに分かれています。

TinyMCE Advancedのエディター設定画面

なので、投稿画面で自分が使用するエディターのタブを選択します。

そして、その中にあるエディターのツールバーに「テーブル」ボタン(表のマークをしたボタン)があるかどうかを確認します。

デフォルトではツールバーの中に含まれているはずです。

もしなければ「使用しないボタン」の中から、「テーブル」ボタンをドラッグ・アンド・ドロップして、ツールバーの中に収まるようにしてください。

ボタンを移動したら、「変更を保存」ボタンをクリックして設定を保存し、ここまでの作業が完了です。

こちらの記事も併せてどうぞ

 

③投稿画面でエディターに表を挿入する

次に、投稿のエディターにテーブルを挿入する方法について見ていきます。

以下の操作は、ブロックエディターとクラシックエディターどちらでもできますが、ブロックエディター(「Gutenberg」)を使う場合には、あらかじめ「Classic Paragraph」というブロックを追加してから行う必要があります。

投稿画面で表(テーブル)を挿入する流れは、以下のとおりです。

投稿画面で表を挿入する手順

  1. 投稿画面のエディターで表を挿入したい位置にカーソルを置き、ツールバーにある「テーブル」ボタンをクリック
  2. メニューの一番上にある「テーブル」をクリック
  3. マウスオーバーして、表の列と行の数を選択
  4. 必要な列と行の数を選択したら、クリックしてエディターにテーブルを挿入する

次に、上記①~④の手順を詳しく見ていきます。

まず、投稿画面で表を挿入したい位置にカーソルを置いて、エディターのツールバーに表示されている「テーブル」ボタンをクリックします。

そうすると、以下のように「テーブル」というメニューを選択できるので、「テーブル」をクリックしてください。
TinyMCE Advancedのエディターを使ってテーブルを挿入する時の操作

次に、右側に表示されるマス目の部分をマウスオーバーすることで、テーブルの列と行の数を選択できるので、必要な数だけ列と行を選択します。

選択できたら、そのままクリックすると、以下のように表が挿入されます。

TinyMCE Advancedのエディターでテーブルを挿入した時の画面

 

④表の設定をカスタマイズして、見た目を調整する

次に、テーブルをカスタマイズして見た目を調整する方法について説明します。

表を挿入しただけの状態だと、まだ枠線が表示されているだけなので、セルの背景色を指定したり、文字の位置を指定したりして、体裁を整えていきます。

この作業は「セルのプロパティ」から行うことが可能です。

「セルのプロパティ」からは、以下の設定が可能です。

「セルのプロパティ」でできること

  • セルの種類を選択 ※ヘッダーセル(見出し)か普通のセルかを選択
  • セルの背景色を指定
  • セルに表示する文字の位置を指定
  • 枠線の色を指定

では「セルのプロパティ」はどのように表示するかと言うと、以下の手順で表示することが可能です。

「セルのプロパティ」を表示する手順

  1. まずは設定をしたいセルにカーソルを置き、ツールバーの「テーブル」ボタンをクリック
  2. メニューの中にある「セル」をクリック
  3. 「セルのプロパティ」をクリック

以下に、①~③の操作について詳しく見ていきます。

「セルのプロパティ」は、以下のように「テーブル」メニューを選択して表示することができます。
TinyMCE Advancedのテーブルメニュー

ただ、「セルのプロパティ」を表示するには、あらかじめ設定をしたい表のセルを選択しておくことが必要です。

設定する必要があるのが一つのセルなら、そのセルにカーソルを置いた状態にしておきます。

複数のセルを同時に設定したい場合には、セルをドラッグして複数を選択した状態にします。

そして、「セルのプロパティ」を表示したら、以下のように「一般」「高度な設定」というタブが表示されるので、それぞれのタブから必要な設定を行います。

セルのプロパティの一般タブ

セルのプロパティの高度な設定タブ

たとえば、表の1行目に「セルの種類:ヘッダーセル」「横位置:中央」「縦位置:Middle」「背景色:#ddecef」を指定、2行目以下で「横位置:中央」「縦位置:Middle」を指定すると、以下のような見た目の表になります。

京都 名古屋
バス 7時間前後 6時間ほど
新幹線 およそ2時間30分 およそ1時間30分

また、「セルの結合」というメニューを選択すると、複数のセルを結合することも可能です。

その場合は、以下のように「テーブル」⇒「セル」⇒「セルの結合」を選択します。

セルの結合メニュー

そうすると、以下のように、セルの一部を結合した表を作成することができます。

見出し

そして、「テーブル」⇒「表のプロパティ」から表全体の位置や枠線の色などを指定することも可能です。

表のプロパティ画面

ちなみに、表全体の横幅はデフォルトで「100%」セルの横幅は行のセル数に応じた割合(列が4つの場合は25%など)で設定されています。

この状態だと、表示した時の画面の幅に応じてサイズが可変してうまく収まるように表示されるので、そのままの設定にしておくことをおすすめします。

 

まとめ

以上、WordPressの投稿画面で簡単に表を作成する方法について説明しました。

プラグイン「TinyMCE Advanced」を使うと、WordPressの投稿画面で簡単に表を作成することができます。

事前に複雑な設定も必要なく、エディターのツールバーにあるボタンをクリックするだけで表の挿入が可能です。

また、プロパティから色や位置の調整、背景色の設定をすれば、簡単に見た目の整った表が出来上がります。

WordPressやHTMLに詳しくなくても手軽に投稿に表を挿入できるので、表の作り方に悩んだ時には「TinyMCE Advanced」を活用してみることをおすすめします。

スポンサーリンク

  • この記事を書いた人

ミヤノ カナコ

ブログ運営歴5年目のブロガー・フリーランスライター。OL時代には、多くのカスタマーセンターやヘルプデスクでメール・電話での問い合わせ対応に従事。現在は、ブログでの情報提供のほか、エッセイの発信を中心に活動中。このブログでは、ブログのつくり方や文章の書き方など、ネットビジネスに役立つ情報をお届けします。

Copyright© ミヤノカナコ.com , 2019 All Rights Reserved.