WordPressでキレイな表を挿入したい
記事を書くときに、表を使いたくなることがありますよね。
とくに、ランキングや比較記事を作るとき、まとめなどに比較表などを作るとよりみやすく、ユーザーがどの商品にしようか最終決定しやすくなり、購買につながります。
そんなときはTablePressというプラグインがとても便利です！
TinyMCE Advancedというプラグインは、文字装飾などする際にとても便利なプラグインなので、インストールしている人が多いかと思います。
TinyMCE Advancedにも表作成の機能はありますが、レスポンシブ対応の仕方が少しコツがいる点や、定形を保存できないために毎回作成しなおす必要があります。
もし頻繁に表作成をする、TinyMCE Advancedでのレスポンシブ対応が上手くいかないという方にはTablePressがおすすめです。
TablePressを使うと表の作成が簡単になるだけでなく、パターンを保存しておけるのでとても便利です。
TablePressのインストール方法
インストール方法はとても簡単。
①プラグイン→新規追加
②TablePressで検索をし、インストール
③有効化
すると、左にTablePressが出現します。これでインストール完了です。
TablePressで新規表の作成
インストールしたら、さっそく表を作っていきましょう。
新しいテーブルを追加する
まず、TablePress→新しいテーブルを追加をクリック。
テーブルの名前を入力し、作成したい行、列の数を入力します。
行は横で列は縦です。ここはあとから追加、削除ができるので、おおよその数でも問題ありません。
入力出来たら「テーブルを追加」をクリックしましょう。
表に記載する文字の入力と行列を整える
テーブルの内容を記入していきます。入力したい文字を行、列に入力します。
もし行を追加したい場合、削除したい場合はテーブル操作から可能です。
テーブルにオプションなどを設定する
出力する文字や行、列が整ったら、テーブルの細かい設定をしていきます。
TablePressでは、表の装飾が細かくできるようになっていますが、シンプルなデザインにしたい場合は上図のようなチェック項目だけで構いません。
必要に応じて、閲覧者が表を絞り込んだり、項目を検索したりする機能をつけることができます。
今回はシンプルな表を作るので、上図のように「テーブルの最初の行をテーブル見出しにする」のみにチェックを入れます。
これで完成です。保存を押しましょう。
作成した表を掲載したい場所に挿入する
作った表を記事に挿入するには、作成したテーブルのショートコードをコピーします。
それを、記事や固定ページなどの掲載したい箇所に貼り付けるだけ。
プレビューで見ると、きっちり表が挿入されています。とても簡単ですね。
表のデザインを変える
基本のデザインでもきれいな表なのでそのまま使えますが、TablePressでは表のデザインを変えることもできます。
表のカスタマイズの仕方
まず、TablePressのプラグインのオプションをクリックします。
以下の「カスタマイズCSS」コマンドを読み込み、テーブルのスタイルを変更にチェックを入れます。
そしてそこにCSSを入力し、変更を保存をクリック。
これでカスタマイズは完成！
本サイトのカスタマイズCSS
本サイトでは下記表のようなデザインにしています。
| 日付 | 商品A | 商品B |
|---|---|---|
| 2018/1/1 | 1,000 | 1,500 |
| 2018/1/2 | 1,050 | 2,000 |
| 2018/1/3 | 3,000 | 1,200 |
デフォルトとの違いは、
①一行目の背景と文字の色
②表全体に枠線をつける
です。
.tablepress thead th {
background-color: #008080 !important; /*ヘッダー背景色*/
color: #fff; /*ヘッダー文字の色*/
}
.tablepress .odd td {
background: #fff !important; /*ボディ背景色*/
}
.tablepress thead th,
.tablepress tbody td,
.tablepress tfoot th {
border: 1px solid #EDEDED;/*枠線の色*/
}
このコードをこのままコピペすれば使えます。
各種色を変えたい場合は、
色の名前とカラーコードが一目でわかるWEB色見本 WEB色見本 原色大辞典 - HTMLカラーコード
こちらのサイトを参考に色のコードを入れてください。
TablePressで作った表の設定を複製したい
表の中の文字だけを変えて違う記事で使いたい。そんなときもTablePressなら簡単です。
すべてのテーブルをクリックし、複製したいテーブルのコピーをクリック。
コレだけです！これで複製が完了し、新しいテーブルIDが発行されます。
TablePressで楽々表作成♪
TablePressを使えば表作成も簡単にできます。
これを使って、様々な商品の比較や、箇条書きでは見にくいデータをまとめ、より購買意欲を高めるような記事を作成しましょう！