WordPressでブログを運営していて、表を作りたいとおもった事はありませんか?
表を使って綺麗にまとめて表示できれば、それだけでプロフェッショナルに見えますよね。
今回はそんな作成が難しそうなイメージがある表を簡単に作れるようになるプラグイン「TablePress」のご紹介です。
このプラグインをインストールすれば、簡単に表を作成してブログに表示できるようになります。
一方でプラグインをインストールするとサイトが重くなると思われる方のために、プラグインを使わなくても表が簡単に作れる方法もあります。
こちらの記事で、その方法を解説していますので、参考にしてください。
インストール方法
1. WordPress左一覧のプラグインより「新規追加」をクリックし、「TablePress」を検索して、見つけ出したら「今すぐインストール」をクリックします。
2. インストールが終わったら「有効化」をクリックしてください。
これでインストールは完了です。
表の作り方
それでは表を作ってみましょう！
1. WordPress左一覧に「TablePress」のアイコンが追加されていますので、そこにマウスカーソルを移動させます。
そして開いたメニューより「新しいテーブルの追加」をクリックしてください。
2. 作成したテーブルは保存されるようになります。
そのために名前を入力し、行数と列数に必要なセルの数を入力して「テーブルを追加」をクリックします。
行数と列数は実際に表を作成している最中に追加することも削除することもできますので、安心してください。
3. 空白のセルが並んでいて表ができています。
これらのセルにに入力をしていって表を作成してください。
もし、行や列を削除したい場合は、削除したい行や列にチェックを入れ（行であれば数字の横にある四角にチェックを、列であれば一番下の四角にチェックを入れます）、「削除」をクリックさせます。
行や列を挿入したい場合は、挿入させたい数を入力して、「追加」をクリックします。
4. 表を作り終えた後、画面を下へスクロールするとひとつだけ設定を変更したほうがいい項目があります。
「Date Table JavaScriptライブラリ機能」の中の「DateTablesを使用」の欄にあるチェックを外しておいてください。
5. 最後に「変更を保存」をクリックして表作成は終了です。
表の表示
表を表示するためにはショートコードを入手しなくてはいけません。
1. 作成した表の名前にアイコンを合わせるとメニューがでますので、「ショートコードを表示」をクリックします。
2. 表のショートコードが表示されますので、それをコピーしてください。
3. そのショートコードを表を表示させたい記事の場所に入力して、記事を公開すれば、表が表示されます。
表の修飾
表を装飾したい場合もでてくるかと思います。
枠の大きさの変更は、ショートコードにHTMLを付け加えるだけでできますし、中央寄せや太字、色の変更などは「カスタムCSS」から変更していきます。
枠の大きさの変更
表を作ったあと、実際にサイトを開いて見てみたら、各列の幅の割合がおかしい、なんてことありませんか？
明らかにこの列はもっと幅を広くして、他の列を縮めたほうが見栄えがいい、という具合です。
そんなとき、自動で決められている列の幅を指定する方法があるのです。
表を記事内に付け加えるには、「TablePress」が作成したショートコードを入力するだけですが、そのショートコードに「column_widths=”50%|10%|20%|20%” /」という記述を加えるのです。
基本 ％表記
例えば、この様な表を作ったとします。
| 1 | 2 | 3 | 4 |
| 40% | 20% | 30% | 10% |
この表のショートコードは、
[table id= 1 column_widths=”40%|20%|30%|10%” /]
となります。
注意点として、必ず100％になるようにしてください。
基本 px表記
幅の指定は％だけでなくpxでもできます。
| 1 | 2 | 3 | 4 |
| 40px | 20px | 30px | 10px |
応用 空白＆組み合わせ
幅の指定を空白にした場合、自動で決定されます。
また、「％」と「px」を合わせて使ってもきちんと表記されます。
ただし、必ず％の合計が100％になるようにしてください。
| 1 | 2 | 3 | 4 |
| 10px | 50% | 30% | 20% |
<table>
<tbody>
<tr>
<td style=”width: 10px;”>1</td>
<td style=”width: 50%;”>2</td>
<td style=”width: 30%;”>3</td>
<td style=”width: 20%;”>4</td>
</tr>
<tr>
<td style=”width: 10px;”>10px</td>
<td style=”width: 50%;”>50%</td>
<td style=”width: 30%;”>30%</td>
<td style=”width: 20%;”>20%</td>
</tr>
</tbody>
</table>
カスタムCSSを利用する
プラグイン「TablePress」の中にある「プラグインのオプション」を選択することでカスタムCSSを使って装飾することができます。
「プラグインのオプション」画面が開いたら、赤丸で記した部分にCSSを書き込んで「変更を保存」をクリックします。
この時に守らないといけないルールとして、必ずCSSで修正したい表のショートコードを入れないといけない、ということを注意してください。
表はいくつでも作れますが、追加CSSのページは一つだけですので、CSSにて修飾をさせたい表の指定をしないといけないためです。
例えば、ショートコードが「[table id=5 /]」として表を作ったとします。
この表で国名をセルの中央にして太字にし、、それ以外を右寄せにして、面積と人口の一番多いところのセルを目立たせようと赤文字にして背景色を変えた場合、
のCSSは、
.tablepress-id-5 .row-3 .column-2,
.tablepress-id-5 .row-5 .column-4 {
background-color: #7fffd4;
color: #ff0000;
}
.tablepress-id-5 .row-2 .column-1,
.tablepress-id-5 .row-3 .column-1,
.tablepress-id-5 .row-4 .column-1,
.tablepress-id-5 .row-5 .column-1 {
font-weight: bold;
text-align: center;
}
.tablepress-id-5 .row-2 .column-2,
.tablepress-id-5 .row-3 .column-2,
.tablepress-id-5 .row-4 .column-2,
.tablepress-id-5 .row-5 .column-2,
.tablepress-id-5 .row-2 .column-3,
.tablepress-id-5 .row-3 .column-3,
.tablepress-id-5 .row-4 .column-3,
.tablepress-id-5 .row-5 .column-3,
.tablepress-id-5 .row-2 .column-4,
.tablepress-id-5 .row-3 .column-4,
.tablepress-id-5 .row-4 .column-4,
.tablepress-id-5 .row-5 .column-4 {
text-align: right !important;
}
というものになります。
簡単にまとめますと、
1. 装飾をしたい表のセルを指定
表ID、列と行の位置、すべての項目の前に「.（ピリオド）」が必要
2. 装飾したい内容を指定
セルの指定の一番最後に「｛」を入力し、装飾内容を「｝」で囲むようにする
3. 右寄せは「text-align: right」、中央寄せは「text-align: center」
4. 文字の太字は「font-weight: bold」、文字の色替えは「color: （色彩コード）」
5. セルの背景の色替えは「background-color: （色彩コード）」
となります。
ただし、使っているテーマにもよるとは思いますが、1行目の文字は自動的に太字で表示されていますし、背景色も目立つように表示されています。
実際に記事を公開した後、表を確認すると、行ごとに背景色が僅かな違いを出しており、背景色をわざわざ変える必要はないように思いました。
最後に
いかがでしたでしょうか？
このプラグイン「TablePress」を利用すれば、非常に簡単に表をブログに追加することができます。
CSSと使っての修飾も他の修飾タグを利用すれば、色んなバリエーションがでますので、是非利用して、ご自身のブログをより見やすいように工夫していってください。
もし、サイトが重くなることを嫌って、プラグインに頼らずに他の方法で簡単に表を表示させたい場合は、こちらの記事を参考にしてください。
