TablePressの使い方は？CSSでデザインカスタマイズもできる？

便利な表作成プラグインといえば『TablePress』ですよね。

WordPressで表を作ったりするのは難しそうに感じるかもしれませんが、TablePressを使えば、誰でも簡単に読みやすい表を作ることができます！例えば以下のような表も簡単に作成できます。

おおかみくん

なるほど、これは便利そうだ。

ひつじくん

データはまとまっていた方が見やすいし、SEO上での評価を得られる場合もあるよ。

商品のスペック比較をする場合には、文書でだらだら書くよりも、データを表にまとめて比較した方がわかりやすいことは多いです。また、非常にまとまった表であれば、その表だけ抜粋して、Googleの検索結果に表示されるようなケースもあります。それくらい表の存在はSEOでも重視されているのですね。

つまり表は使い方次第で、ユーザー理解をいっそう促すことができる上に、SEO上での評価も高められるというわけです。これを活用しない手はありませんね。

では、どうやってTablePressで表を作るのか、装飾はどうやって行うのかといったことを詳しく説明させていただきましょう。

TablePressのインストール方法

WordPress管理画面からプラグイン新規追加

まずはTablePressをインストールするために、WordPress管理画面>プラグイン>新規追加と進んでください。

TablePressを検索する

そして、検索窓で「TablePress」と入力して、検索をしましょう。そうするとプラグインが見つかるはずです。

TablePressをインストール

TablePressが見つかったら、「今すぐインストール」のボタンを押しましょう。インストールは10秒ほどで完了します。

TablePressを有効化

インストールが完了したら、そのまま「有効化」のボタンを押しましょう。

これで表が作成できるようになります。では続いて、表作成の方法に移っていくことに致しましょう。

TablePressの使い方（初期設定方法）

TablePressに関しては初期設定が必要ありません。なので早速TablePressの使い方から説明をしていこうと思います。

WordPress管理画面から、「TablePress」>「新しいテーブルを追加」という項目を選んでください。ここからTablePressを使うことができます。

TablePressで表を作成する方法

新しいテーブルを追加

まずは新しいテーブルの名前・行数・列数を決めます。

名前は自分がわかりやすいもので構いませんし、行数・列数は後で変更することができますから、ここは適当に決めてしまって進みましょう。

テーブル内容を記載する

テーブル内を記載すれば、これで表は完成です。とっても簡単ですね！

もし行数の追加・列数の追加をしたい場合には以下のようにして行えます。

行を追加

行を追加したい場合には、画像のようにして「追加」のボタンを押すだけで完了です。

逆に多すぎたら、消したい行を選択して「削除」のボタンを押すようにしましょう。

列を追加

同様にして、列を追加したい場合には、画像のようにして「追加」のボタンを押すだけで完了です。

逆に多すぎたら、消したい列を選択して「削除」のボタンを押すようにしましょう。

ショートコードを貼り付ける

表が完成したら「変更を保存」のボタンを押して保存することにしましょう。

そして、ショートコードをコピーして、投稿の表を挿入したい部分に貼り付けます。そうすると、とっても簡単に表を作り上げることができますよ！！

TablePressのライブラリ機能

先ほどの過程で表は完成したのですが、実際の表を見に行ってみると以下のようになっていて、これは少し予想していたものと違うと思います。

なんだか「検索」「○件表示」などの情報過多で見にくい印象ではありませんか？

これは不要なライブラリ機能がオンになっているためです。これをもっとシンプルにしてしまいましょう。

不要なライブラリをオフにする

先ほどのように「テーブル情報の編集画面」に戻り、以下のようにして、「DataTable」の項目のチェックを外してください。こうすることで一括でライブラリ機能をオフにすることができます。

このようにすると表の余計なライブラリが消えますので、シンプルな表が出来上がります。

TablePressのCSSデザインカスタマイズ

最後にデザインカスタマイズです。

僕はこのようにTablepressをCSSデザインしていますので、この方法をお伝え致しましょう。

当サイトの採用しているデザイン

まずはデザインを変更するために「TablePress」>「プラグインのオプション」と進みましょう。そうすると、以下のようなカスタムCSS入力画面が開きます。

ひつじくん

ここに以下のコードをコピペすると完了だよ！

そこに当サイトでは、以下のCSSを追加してデザインを変更しています。

.tablepress thead th {
	background-color: #043d78 !important; /*ヘッダー背景色*/
	color: #fff; /*ヘッダー文字の色*/
}

.tablepress .odd td {
	background: #fff !important; /*ボディ背景色*/
}

各カラーコードを（#043d78など）を変更していただけば、お好みの色に変更することが可能です。カラーコードはこちらのサイトを始めとする様々なサイトが紹介してくれていますので、お好みのコードを探して見てください。

【お好みで】文字を中央揃えにする

最後にここはお好みですが、文字を中央揃えにしたい場合には以下のCSS追記するようにして見てください。

.tablepress thead th {
	text-align: center;
}

.tablepress td {
	text-align: center;
}

これで表の文字が中央揃えになったはずです。表によっては中央揃えの方が見やすい場合もありますので、ここは適宜使い分けて見てください。

まとめ

TablePressの使い方まとめでした（今回は初心者向けで、基本的な使い方のみの紹介とさせていただきました。）

おおかみくん

よし、これで表は作れるようになったぞ！！

ひつじくん

応用的なテクニックを使うと、表を横スクロールさせたり幅を変更したりすることもできるんだけど、それは他のサイトにお任せします！

表を取り入れて情報を見やすくすることはユーザーのためだけでなく、SEO上での効果も期待することができます。特に僕の参入している格安SIMのような情報量の多いジャンルでは、表が役立つことは間違い無いでしょう。

Tablepressを使えばわかりやすい表が簡単に作ることができますので、是非取り入れて見てください！

X