WordPressのテーブルをプラグインを使って簡単に作る方法

muramatsu
書いた人 muramatsu

こんにちは。ライターのmuramatsuです。

WordPressを使って記事を書く際に、

「表(テーブル)を挿入したいな」

と思ったことはありませんか?

よく使うことのあるテーブルですが、思い通りに表示されなかったり、意外と時間がかかってしまうことがあります。

今回はWordpressのテーブルについて、

  • テーブルとは
  • テーブルの種類
  • テーブルを作る方法

の基本的な内容から、

  • プラグインTinyMCE Advancedを使ってテーブルを作る方法
  • プラグインTable Pressを使ってテーブルを作る方法

までを解説していきます。

時間をかけず、思い通りのテーブルを作る方法を優しく解説していきます!

wordpressのテーブル

テーブルとは

テーブルとはIT用語で縦の列と横の行があるのことを言います。

また縦の列のことをレコードまたはrow(ロウ)、横の行のことをカラム、1マスの中をセルまたはフィールドと呼びます。

テーブル図_1

テーブルはシンプルに分かりやすく情報を伝えることができるので、とてもよく使われます。

テーブルをうまく取り入れる事により、デザイン性のあるテーブルを使った視覚効果や、記事を読んでもらうのに、心理的負担を減らす効果もあります。

ただ、意外とテーブルを作るのには時間がかかったり、思い通りのものができなかったりする事もよくあります。

まずはテーブルの種類を理解し、テーブルの作り方の種類から理解して行きましょう。

テーブルの種類

WordPressのテーブルには静的なテーブルと、動的なテーブルがあります。

静的なテーブルとは、よく見る普通のテーブルのことで情報やデータを並べて表示しています。

動的なテーブルとは、下記のようなものです。

・サイト上にある記事や商品などを人気別、日付、カテゴリー別などに分けてまとめた情報を自動的にテーブルにして表示
・テーブル内のテキストや画像にリンクをつけて詳細画面に移動

テーブルを作成する前に、どのような用途でテーブル使いたいかを考え、静的・動的なテーブルのどちらかを選択しましょう。

テーブルを作る方法の種類

静的なテーブルまたは動的なテーブルのどちらを使用するのか決めたら、次はどのようにテーブルを作っていくかです。

WordPressでテーブルを作る方法は、以下があります。


1. HTMLで作る
2. マイクロソフト オフィスを使う
3. プラグインを使う

1. HTMLで作る

HTMLで作る方法とは、プログラミング言語を使って作る必要があります。

動的なテーブルにしたい場合はJavaScriptが必要になったり、デザイン性の高いテーブルにしたい場合はCSSが必要になってきます。

他のプログラミング言語の知識も必要となるため、初心者の方には少し難易度が高くなります。

2. マイクロソフト オフィスを使う

WordやExcel、PowerPointなどのマイクロソフト オフィスを使って表を作りそれをコピーして貼り付けることも可能です。

この方法では、オフィスを使い慣れている方にはとても簡単な方法で、取り入れやすいです。

ただ静的なテーブルのみとなってしまうのと、追加で行を増やしたいなど編集したいときに再度オフィスに戻り表を作り直して貼り直さないといけない手間が出て来てしまいます。

3. プラグインを使う方法

プラグインとはWordpressにダウンロードして追加することのできる色々な機能のことです。

もともとWordpressの機能はとてもシンプルなものとなっているので、プラグインを追加する事により、必要な機能を持たせ、かつ簡単に使うことができるようになります。

テーブル作成もプラグインによって簡単に作ることができるようになります。

プラグインは無料・有料のものがあり、有料なものは無料のものに比べデザイン性が高かったり、検索やソートなど色々な機能がついていたりしますが、無料版でもデザイン性の高い便利なテーブルはいくつかあります。

また、テキストを記述しただけで簡単にテーブルが作れるプラグインや、静的なテーブル・動的なテープルを作れるプラグインがあるので、用途に合わせた方法を選んでダウンロードすることができます。

簡単にデザイン性の高いテーブルを作りたい場合は、プラグインを使って作る方法が1番手っ取り早い方法となります。

TinyMCE Advancedで静的なテーブルを作る

TinyMCE Advancedは静的なテーブルを作れる他、フォントを変更したりテキストを箇条書きにできたりするプラグインです。

色々な機能のアイコンをビジュアルエディタ内に設定することができます。

視覚的に見ながらテーブルを作れる特徴があるので、実際にどういうテーブルになるのかを確認しながら作る事ができます。

またレスポンシブなテーブルと言って、パソコンやスマートフォンなどのさまざまな画面の大きさに合わせて自動的にサイズ修正してくれるテーブルを作ることができます。

レスポンシブ対応でないとパソコンではちゃんと見れるのに、スマートフォンなどの小さな画面で見たときにテーブルが切れて表示されてしまいます。

ダウンロード・セッティング方法

まずはプラグインをダウンロードします。

WordPressの左側の「プラグイン」から「新規追加」を選択します。

右側に出てきたキーワードのところに「TinyMCE Advanced」を入力して検索してヒットしたTinyMCE Advancedの「今すぐインストール」をクリックします。

TinyMCE Advanced_1

ダウンロードが終わったら「有効化」をクリックします。

TinyMCE Advanced_2

これでダウンロードは終了で使用できるようになりました。

次に設定をするので同じ画面のTinyMCE Advanced枠ないの「設定項目」をクリックします。

TinyMCE Advanced_3

エディター設定で必要なボタンを設定します。
これは、ビジュアルエディタ内に表示されるアイコンとなります。

必要なアイコンはドラッグ&ドロップで好きな場所に持っていきます。

TinyMCE Advanced_4

次に下の段にスクロールして行き「設定」「高度なオプション」「管理」をセッティングします。

特にこだわりのない方はデフォルト(初期設定)のままで構いません。

「高度なオプション」の「段落タグの保持」は改行を入れた際に、ビジュアルエディタからテキストエディタに切り替えると改行が消えてしまうことを防いでくれるので、チェックを入れておくと便利です。

TinyMCE Advanced_5

セッティングはここまでです。早速テーブルを作っていきましょう。

テーブルの作り方

新規投稿画面のビジュアルエディタタブをクリックします。

「テーブル▼」または TablePress_i をワンクリックしてメニューを表示させます。

「テーブル」のところにカーソルを持っていくと右側に四角がたくさん並んで表示されるので、ここで行数と列数を決めます。

カーソルを希望のマス目のところに持って行ったら、そこでワンクリックします。

TinyMCE Advanced_6

すると下記のようなテーブルが表示されます。

TinyMCE Advanced_7

テーブルの中にカーソルを合わせ適当なテキストを入力したら、テーブルのヘッダー(タイトル部分)を作成します。

※ここでテキストのサイズ長さに合わせてテーブルの幅数をマウスを使って変更することも可能ですが、ドラッグしてセルの大きさを変更してしまうと、レスポンシブ対応ではなくなってしまうので注意しましょう。

1行目を全て選択してテーブルボタンをワンクリックし「セル」にカーソルを当て、出てきたメニューから「セルのプロパティ」を選択します。

TinyMCE Advanced_8

「セルのプロパティ」を選択すると以下の画像ようなウィンドウが出てきます。

「セルの種類」から「ヘッダーセル」を選択します。

TinyMCE Advanced_9

テキストの長さに合わせて幅を変えたい場合は「幅」のところでパーセント(%)で入力するとレスポンシブ対応のテーブルが保持されます。

ここで自動的に数字が入っている場合は、ピクセルで幅が指定されていることになり、レスポンシブ対応のテーブルではなくなっています。

もしレスポンシブ対応にしたい場合はパーセントで数字を入力し直します。

また、テキストを中央寄せや左寄せにしたい場合は「横配置」から選択します。
「縦配置」はセル内のテキストを上部・中部・下部の配置に設定できます。

TinyMCE Advanced_10

次に「詳細」タブでセルの背景色を選択します。

「背景色」の右側にある四角い部分をワンクリックすると、カラーパレットが表示されます。

TinyMCE Advanced_11

赤丸で囲った白いバーをドラッグして好きな色のところに持っていき、その後左側の部分にマウスを持っていき、色のトーンを決めます。

もし好みの色の番号を知っている方は、右側の「#」のところにカラーコードを入力して指定することも可能です。

色が決定したら「OK」ボタンをクリックします。

TinyMCE Advanced_11-2

同じ要領で、他のセル内のテキストの位置や枠線の色、背景色などを変更したり、メニューバーから中央寄せや右寄せなどのアイコンを使って編集することも可能です。

また「テーブル」→「表のプロパティ」でテーブルの枠線の太さや線の種類、テーブル全体のテキストの位置などを変更する事もできます。

TinyMCE Advanced_11-3

TinyMCE Advanced_11-4

テーブルの1行目の背景、テキストの位置が変更され、テキストも太文字になっていますね。

TinyMCE Advanced_12

もし追加で行を追加・削除したい、列を追加・削除したい時は「テーブル」→「行」または「列」から挿入・削除・コピーなどが選択できます。

TinyMCE Advanced_13

TinyMCE Advancedのプラグインは見ながらテーブルを作成することができるので、初心者の方でも簡単に素早く好みのテーブルを作ることができます。

動的なテーブルも作れるTablePressを使う

TablePressのプラグインは動的なテーブルを作ることができたり、テーブル内で検索・ソートなどができたり、ExcelやHTML、CSVファイルからテーブルをインポートすることができる、優れものです。

ただ無料版だとレスポンシブ対応のテーブルではないため、レスポンシブ対応のテーブルが必要な場合は、有料の拡張機能をインストールしなければなりません。

ダウンロード方法

プラグインをダウンロードします。

WordPressの左側の「プラグイン」から「新規追加」を選択します。

右側に出てきたキーワードのところに「TablePress」を入力して検索してヒットしたTablePressの「今すぐインストール」をクリックします。

TablePress_1

ダウンロードが終わったら「有効化」ボタンが出てくるのでそこをクリックします。

TablePress_1-1

ダウンロードが終了すると左側のメニューバーにTablePressが表示されます。
これでダウンロード終了です。

TablePress_2-1

続けてテーブルを作成する場合は、プラグインページTablePress部分の「プラグインページ」をクリックします。

TablePress_2

テーブルの作り方

左側メニューバーの「TablePress」の「新しいテーブルを追加」またはTablePressページの「新規追加」タブを選択します。

TablePress_3

新しいテーブルを追加ページでテーブルの名前や行数・列数を指定し「テーブルを追加」ボタンをクリックします。

名前はどのテーブルかがわかるように、一目でわかるような名前にするといいでしょう。

TablePress_5

次に表示される「テーブル情報」のショートコードはこれから作成するテーブルコードとなり、記事内にこのコードを入力することによりテーブルが表示されるようになります。

「テーブルの内容」では行と列にテキストを入力していきます。

TablePress_6

セル内にテキストを入力した際に順番を変えたり、セルの幅を変えることができます。

列の上部に書かれているアルファベット(A,B,C)の右横にある矢印「▲▼」を押すと昇順・降順表示にできます。

左側の数字の部分にマウスを持っていくとマウスの矢印が変わり、その時にドラッグ&ドロップで行の位置を変更することができます。

また赤丸で囲った部分にマウスを持っていき左右にドラッグすると、列の幅を変更することができます。
列の幅を指定しない場合は、テキストの長さによって自動的に幅が決められます。

TablePress_7

「テーブルの内容」の編集が終わったら、下へスクロールします。

TablePress_8

「テーブルの操作」ではセルを結合したり画像を挿入したり、行や列を追加・削除などすることができます。

TablePress_8-1

「テーブルの内容」にある、四角いチェックボックスに挿入・追加または削除したい場所にチェックを入れて希望の操作のボタンを押します。

TablePress_8-2x

「テーブルのオプション」を指定します。必要な箇所にチェックを入れてください。

TablePress_8-2

「DataTable JavaScriptライブラリの機能」では動的なテーブルに設定することができます。

もし必要のない場合は「DataTablesを使用:」のチェックボックスを外すと全ての選択が外されます。

必要な箇所にチェックを入れてください。

TablePress_8-3

設定が完了したら「変更を保存」のボタンを押します。

またショートコードをコピーします。

TablePress_8-4

「投稿」ページでテーブルを挿入したい記事を選択または、記事を新規追加します。

テキストエディタまたはビジュアルエディタのどちらで、テーブルを挿入したい場所にカーソルを置き、先ほどコピーしたショートコードを貼り付けます。

TablePress_9

「投稿」ページ右側にある「公開」部分で「下書き保存」をした後に「プレビュー」ボタンを押すと、作成したテーブルが表示されます。

TablePress_11

作成したテーブルが表示されていますね。

TablePress_10

もしテーブルの修正をしたい場合は、プレビュー画面にある「編集」を押すと、テーブル作成した画面に移ります。

または左側のメニューバー「TablePress」を選択して出てきた一覧から編集したいテーブル名を選択して編集する事も可能です。

まとめ

いかがでしたか?

この記事ではテーブルについての基礎的な知識と、プラグインを使ったテーブル作成方法を解説しました。

プラグインを使うと初心者の方でも簡単にデザイン性のあるテーブルを素早く作ることがでますね。

色々と機能をいじってみて、もっともっとおしゃれで見やすいテーブルを作っていってください。

未経験者でも安心の徹底サポート!まずは完全無料の体験レッスン!

「プログラミングに興味があるけど未経験だし、、、」とお悩みの方はご安心ください。

  • 24時間質問し放題
  • あなただけのオーダーメイドカリキュラムで学習の効率化
  • 仕事獲得方法からオリジナルアプリ開発方法

侍エンジニア塾では徹底したサポートによる「オーダーメイドカリキュラム」を作成しています。

まずは無料体験レッスンで、「挫折しない学習方法」や「あなただけの学習ロードマップ」を知り、学習の効率化をしましょう。独学の難点である「オリジナルアプリの作り方やエラーの対処法」についてもアドバイスさせていただきます。

詳しいサービス内容は、下記よりご参照ください。

cta_mtm1

非常識な結果を出す卒業生多数!

エンジニアキャリア戦略

人気記事セレクション

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

muramatsu

muramatsu

世界中の人たちと友達になって、その友達の家を巡る旅をしたいと密かに思っている。

複雑な内容を誰にでもわかりやすく、そして納得のいくような解説をする、をモットーにしています!