WordPressでプラグインを使用して表を挿入する方法を詳しく解説

ホームページ作成時に会社概要や料金表など、「表」を使用して掲載した方が閲覧者にとってより見やすくなる場面はたくさん存在します。
本記事ではそんな「表」の掲載方法について、利用者の多いWordPressにおいてどのように作成するのか、

を解説してまいります。
ぜひ本記事をWordPressでの表作成の参考になさってください。

なお、ホームページ作成をご検討なら、BESTホームページをご検討ください。

また、「テーブルプラグイン」としましたが、本記事ではテーブルプラグインは表を作成するためのプラグインとしています。
このテーブルプラグインで作成できる表には、「静的に作成された表」と「動的に作成された表」の２つのタイプが存在します。
テーブルプラグインのご紹介の前に、まずはこの２つの表タイプについて簡単に解説します。

「静的に作成された表」とは、一般的な行と列で形成されている表のことであり、表の中に直接、数字や文字といったデータが入力されています。
プラグインによっては検索機能があったり、並べ替えの機能があったりしますが、あくまでデータはその表に入力されているので、データを同じサイトの別の場所で使用したり、他のサイトで呼び出したりはできません。

これに対して「動的に作成された表」は、表にデータが直接入力されているわけではなく、サイトの別の場所や管理画面にデータが入力・保管されていて、システムが自動で作成している表のことを指します。

直接データを表に入力しているわけではないので、表の修正はそのデータが保管されている場所で行うほか、別の場所に同じ表を複数設置も可能で、データを編集すればそのデータを使用している全ての表が自動的に更新されます。

例えばブログなど投稿した記事の一覧を表にしたり、入力したスケジュールをスケジュール表として掲載したり、販売している商品やサービスの一覧を自動的に表にしたりする、といったことが可能です。

「静的に作成された表」は表に直接データを入力した表、「動的に作成された表」は別の場所に入力されたデータを使用して自動的に作成された表、を指すということで、表作成のプラグインについてこれからご紹介してまいります。

参考： ワードプレス(WordPress)とは　特徴をわかりやすく解説！

WordPressで表を掲載するのに簡単でおすすめの方法は、ご紹介したとおり「プラグインを導入すること」です。
それではおすすめのプラグインや実際にWordPressにインストールし設定する方法、表作成の方法まで解説してまいります。

今回は

の２つのプラグインをご紹介します。

２-１．Advanced Editor Tools（旧名称：TinyMCE Advanced）

URL：https://ja.wordpress.org/plugins/tinymce-advanced/

Advanced Editor Tools（旧名称：TinyMCE Advanced）はエディタに様々な機能を追加できるプラグインで、静的な表を作成できる機能も備わっています。
表の作成は文字色の変更やセルの背景色の変更など表の装飾のほか、行列の追加やセルの結合なども可能です。

ダウンロード ～ 設定

まずはAdvanced Editor Toolsをインストールし、使用できる状態にします。

表作成の方法

クラシックエディタの場合

文字を入力するほか、テーブルアイコンをクリックしてメニューから「表のプロパティ」や「セル」から「セルのプロパティ」を選択することで、表やセルの装飾ができます。

そのほか、行や列を追加したり、セルを結合したり、といったことも可能です。

ブロックエディタの場合

あとは上記「クラシックエディタの場合」と同様の手順で表が作成できます。

２-２．TablePress

URL：https://ja.wordpress.org/plugins/tablepress/

TablePressは動的な表を作成できるプラグインです。
複数箇所に設置したい同一の表を一元管理できるほか、並び替えや検索機能など閲覧者に便利な機能も設定できます。
Advanced Editor Toolsで作成したような静的な表とは異なりエディタ上で編集はできませんが、ショートコードを作成することで記事に簡単に表を掲載できます。

ダウンロード ～ 設定

まずはTablePressをインストールし、使用できる状態にします。

表作成の方法

表に使用するデータを入力し、表の設定をする

列や行を追加したり削除したりする場合は、追加したい箇所をクリックしてチェックボックスをオンにした上で、表の下にあるメニューから操作できます。

さらに「テーブルのオプション」から表にオプションを追加できます。
行の色を交互に変更したり、マウスカーソルをあてている間ハイライト表示したりすることによって、さらに表を見やすくできます。

ショートコードを使用して表を記事に掲載する

すでに作成済の表データであれば、「すべてのテーブル」で表示される一覧画面の「ショートコードを表示」からでも取得できます。

ショートコードを設置するだけで表が完成するので、複数のページに渡って同じ表を掲載したい場合などに便利です。
また表データが一括管理できるという利便性もあります。

この他にも、表作成画面で「DataTables JavaScriptライブラリの機能」を設定することにより、表に対して様々なオプションを設定できます。

など、便利な機能が存在します。

ただし、TablePressで設置した表は、表のセル色の変更や文字色の変更など、装飾に関してはHTMLやCSSといった専門的な知識が必要になってきます（「カスタムCSS」からCSSを設定する必要があります）。

上記ではプラグインを使用した表の作成方法についてご紹介しましたが、それ以外の方法で表を掲載する方法も併せてご紹介します。

３-１．Microsoft officeのWordを使用する

「Microsoft office Word」を使用して表を作成し、それをコピーしてWordPressに貼り付ければ表が作成できます。

貼り付ける際は、クラシックエディタの場合はビジュアルモード、ブロックエディタの場合は任意の場所に貼り付けられます。

ただしこの方法の場合、Wordの方で表を装飾してコピーしても、WordPressにペーストした時点で装飾がなくなった表になってしまいます。
装飾をするためには、前述したAdvanced Editor Toolsなどのプラグインを入れて装飾する、HTMLやCSSを使って装飾する、後述するブロックエディタにある表の装飾機能を使用するなどの対応が必要になります。

３-２．Google スプレッドシートを使用する

「Google スプレッドシート」を使用して表を作成し、それをコピーしてWordPressに貼り付けても表が作成できます。

Google スプレッドシートにはGoogleアカウントが必要です。あらかじめ作成しておきましょう。
スプレッドシートに表のデータを入力し、セルを選択してコピーします。

Wordと同じく貼り付ける際は、クラシックエディタの場合はビジュアルモード、ブロックエディタの場合は任意の場所に貼り付けられます。

この方法も同様にスプレッドシートで表を装飾してコピーしても、WordPressにペーストした時点で装飾がなくなった表になってしまいますので、装飾をしたい場合はプラグインをインストールするなどの対応が必要になります。

３-３．HTMLを使用する

HTMLで表を作成し、クラシックエディタの場合テキストモードにして、ブロックエディタの場合は「カスタムHTML」で作成したHTMLを直接入力します。

表は
<table> ～ </table>
というHTMLを使用します。

<tr></tr> が行、<td></td> がセルを表し、<tr><td></td></tr> という形で作成します。

例を挙げると、

このようなHTMLになります。
これをエディタに貼り付けます。装飾なども併せてCSS等で行います。

上記のとおり、表を作成するためのHTMLは少々複雑でHTMLから表の出来上がりイメージが難しく、これにさらにセルの結合などが含まれるとよりHTMLは複雑になってきます。
テーブルタグを作成するためのオンラインツールなども存在はしますが、やはりHTMLを直接作成するのではなく別のツールを使って表を作成した方が簡単に作成できます。

３-４．WordPressのブロックエディタを使用する

WordPressのクラシックエディタには表作成の機能がなく、表を作成する場合はこれまでご紹介したような方法を利用する必要がありました。
しかし現在WordPressに搭載されている「ブロックエディタ」であれば、標準機能で表作成ができるようになっています。

まずはブロックエディタで「テーブル」ブロックをクリックして追加します。
表示されていない場合は、「すべて表示」をクリックして表示される左メニューからクリックします。

表作成ブロックが追加されるので、カラム（列）数、行数を指定して「表を作成」ボタンをクリックします。
作成した後に行列は追加・削除ができるので、この段階では正確でなくても構いません。

表が作成されます。目的のデータを入力します。

ブロックエディタではこの後、表の装飾も可能です。

次はブロックエディタを使用した表の装飾方法をご紹介します。
ブロックエディタでの表の装飾はこれまでご紹介した方法で作成した表に対しても可能です。

４-１．表全体のスタイル（デザイン）を変更する

ブロックエディタの標準機能では、表のスタイルは「デフォルト」「ストライプ」の２種類から選択できます。
ツールバーからも選択できますが、今回は右に表示される「追加設定」から選択します。

右に追加設定が表示されていない場合は、表のどこかをクリックして上部に表示されるツールバーの「︙」をクリックし、「追加設定を表示」をクリックします。

右メニューが表示されている場合、対象の表のどこかをクリックし、右メニューの上部タブ「ブロック」が選択されていることを確認します。
「スタイル」の「ストライプ」をクリックします。
表のデザインが変更されます。

選択できるスタイルは、使用しているWordPressテーマによって様々あります。
ボタンひとつで簡単に変更できますので、色々試してみましょう。

４-２．表のセル幅を固定する

通常、表はセルに入力されているコンテンツ量に応じて幅が狭くなったり広くなったりしています。
表のセル幅を固定することによって、セルの幅が全て同じになります。

表をクリックし、右メニューの上部タブ「ブロック」から、「表の設定」の「表のセル幅を固定」をクリックします。
表のセルの幅が均一になります。

４-３．ヘッダーセクション、フッターセクションを追加する

表の上部にヘッダーセクションと呼ばれる見出しセル、下部にフッターセクションと呼ばれる見出しセルを追加できます。
見出しの項目名として使用したり、集計結果などのセルとして利用したりできます。

表をクリックし、右メニューの上部タブ「ブロック」から、「表の設定」の「ヘッダーセクション」または「フッターセクション」をクリックします。
ヘッダーセクションをクリックすると表の上部に、フッターセクションをクリックすると表の下部にセルが挿入されます。
必要なデータを入力します。

４-４．文字の色を変更する

表の文字の色を変更します。

表をクリックし、右メニューの上部タブ「ブロック」から、「色」の「テキスト」をクリックします。
左にデフォルトのカラーパレットが表示されるほか、カラーパレット上部の色表示部分をクリックすると、好きな色が選択できるようになっています。

ブロックエディタのテキスト色変更は、特定のセルだけの文字色変更はできません。
特定のセルの文字色だけを変更したい場合は、プラグインをインストールするか、編集ができるWordPressテーマをインストールする必要があります。

４-５．背景色を変更する

表の背景色を変更します。

表をクリックし、右メニューの上部タブ「ブロック」から、「色」の「背景」をクリックします。
テキストと同じく左にデフォルトのカラーパレットが表示されるほか、カラーパレット上部の色表示部分をクリックすると、好きな色が選択できるようになっています。

背景色にはグラデーションも設定できます。

左に表示される色選択ウィンドウの上部タブ、グラデーションをクリックすると、グラデーションが設定できます。
デフォルトのカラーパレットがあるほか、ご自身でもグラデーションの色が設定できますので、見やすい表を意識して設定しましょう。

背景色は、スタイルでストライプを選択していた場合は、色がついていない行が着色されます。

また背景色も文字色と同様、特定のセルだけの色変更はできません。
特定のセルの背景色を変更したい場合は、同じくプラグインをインストールするか、編集ができるWordPressテーマをインストールする必要があります。

４-６．文字の大きさ、外観を変更する

表全体の文字の大きさを変更したり、太字など外観を変更したりします。

表をクリックし、右メニューの上部タブ「タイポグラフィ」から、文字の「サイズ」や「外観」を選択します。
サイズはタイトル右にあるスライダーのアイコンをクリックすることで数値入力もできます。

これも表全体の設定となりますので、個別に大きさやスタイルを変更したい場合は、エディタを使って編集、もしくはプラグインなどを使用することになります。

４-７．文字を左揃え、中央揃え、右揃えにする

表をクリックして表示されるツールバーで、セル内の文字を左右中央揃えにできます。
操作を行いたいセルをクリックし、表示されたツールバーのアイコンから行いたい動作をクリックします。

ただし、左右中央揃えにできるのは列ごとになるので、個別のセルの設定はできません。

４-８．列・行を追加、削除する

表をクリックして表示されるツールバーで、列・行を追加、削除ができます。
表の列や行を追加、削除したいセルをクリックし、表示されたツールバーのアイコンから行いたい動作をクリックします。

４-９．表に画像を掲載する

表をクリックして表示されるツールバーで、列・行を追加、削除ができます。
写真を掲載したいセルをクリックし、表示されたツールバーのアイコンから「インライン画像」をクリックします。

メディアライブラリが表示されますので、掲載したい画像をクリックしてチェックボックスをオンにし、右下の「選択」ボタンをクリックします。

画像が掲載されます。
画像をクリックすると表示される幅入力ボックスで、写真の表示の大きさを変更できます。

表を作成するためのテーブルプラグインを利用する際には、いくつかの注意点が存在します。

５-１．スマートフォンでの表示を確認する

パソコンで表を作成していると、どうしてもパソコンでの表示のみに気を取られてしまいがちですが、実際にはスマートフォンユーザーも多くホームページを閲覧します。
ですので、必ず表はスマートフォンでも見やすく表示されているかどうか、チェックしましょう。

【PC】

↓

【スマートフォン】

５-２．文字の大きさや改行の調整をする

スマートフォンでチェックした際、表が見にくい場合は、下記のような調整を行い、見やすい表に修正します。

これらを調整しながら、できるだけパソコン、スマートフォン双方で見やすい表を作成していきましょう。

【PC】

↓

【スマートフォン】

本記事ではWordPressを使用した表作成について解説してまいりました。
CMSはホームページを簡単に作成できる分、制限があったり、使いこなすには学習コストが必要であったりと、難しい面もあります。

そこでオススメしたいのが、弊社の提供する「BESTホームページ」です。
BESTホームページはWordPressと同じホームページを作成するためのツール（CMS）で、より直感的な操作が可能で、簡単にホームページが作成できます。
もちろん、表作成も簡単にでき、装飾も可能です。

そのほか、BESTホームページは

など、多種多様な業種に合わせてオリジナリティのあるホームページの作成が可能です。

初期費用は無料で月額税込6,490円と、導入コストを極限まで抑えられるようなプランをご用意しております。
実際に多くの企業様に導入いただき、使いやすさや運用・管理のしやすさにご評価をいただいております。
今なら15日間の無料体験も実施中ですので、この機会にぜひBESTホームページをご利用ください。