【2020年最新】TablePressの使い方・CSSカスタマイズ方法まとめ

TablePressは、WordPressで読みやすい表を簡単に作成できるプラグインです。

HTMLやCSSの知識がなくても、行数や列数を入力するような直感的な操作だけで、おしゃれなテーブルが完成します。

表作成に欠かせないTablePressの基本的な使い方やカスタマイズ方法とは?

本記事は、ブログブートキャンプブログの始め方-WordPressプラグインに関する内容となります。

レオのアイコン画像レオ

WordPressで表を作ってみたんだけど、なんかダサくて…

アレックスのアイコン画像アレックス

それならTablePressというプラグインがおすすめだ!おしゃれな表が簡単に作れるぞ。

スポンサーリンク

ジャンプできる目次

この記事の著者

アレックス
Alex

ブログブートキャンプ アレックス

10年間のブログ経験を活かしてブログブートキャンプを2020年に設立。ブログ運営スキルを鍛え上げるためのノウハウを発信中。

TablePressとは

TablePressは、WordPressで読みやすくておしゃれな表を簡単に作成できるプラグインです。

商品・サービスの紹介をするような場合には、要点を表にまとめて比較すると非常にわかりやすく、読者の理解をより深めることができます。

例えば、作成できる表のイメージとしては次のような感じになります。

項目XXサーバーYYサーバー
おすすめ度★★★★★★★★★☆
初期費用〇〇円〇〇円
月額料金△△円△△円
レオのアイコン画像レオ

見やすくて、かなりいい感じ!

アレックスのアイコン画像アレックス

表にまとめると読者が見やすいのはもちろんだが、Googleの強調スニペットに採用されることもあるんだ。

スポンサーリンク

TablePressの使い方・設定方法

TablePressの使い方

TablePressの使い方は簡単で、表の情報を入力して記事にショートコードを設置するだけです。

プラグインの新規追加ページでTablePressをインストール・有効化してから、基本的な使い方の流れを確認していきましょう。

表(テーブル)の作り方

WordPress管理画面 TablePress

WordPressの管理画面で「TablePress→新しいテーブルを追加」をクリックしてください。

新しいテーブルの追加

TablePress 新しいテーブルを追加

作成する表の基本情報として、以下の項目を入力してください。

  • テーブルの名前: 管理する上での名前を入力
  • 行数: 縦方向の項目数を入力
  • 列数: 横方向の項目数を入力
アレックスのアイコン画像アレックス

表の行数・列数は、後からでも変更できるので大体でOKだ。

テーブルの内容を入力

TablePress 内容を入力

指定した行数・列数の表の入力欄が表示されるので、表に記載する内容を入力しましょう。

行や列を追加する場合
TablePress 行・列の追加

テーブルの操作で、「行を追加」「列を追加」をクリックすると、表に行・列が追加されます。

TablePress 行・列を途中に追加

行や列を表の途中に追加したい場合は、追加したい箇所を選択した上で「選択した行/列: 挿入」をクリックすればOKです。

行や列を削除する場合
TablePress 行・列の削除

行か列を選択した上で「選択した行/列: 削除」をクリックすると、行/列が削除できます。

セルを結合する場合
TablePress セルの結合

セルを結合するには、「セルを結合」をクリックしてから、結合したいセルを選択します。

結合したいセルを選択すると、以下のタグが自動的に入力されます。

  • 縦方向に結合: 右側のセルに#rowspan#を入力
  • 横方向に結合: 下側のセルに#colspan#を入力

テーブルのオプションを設定

TablePress テーブルのオプション

最後に、必要に応じてテーブルのオプションを設定しましょう。よく使う項目は、次の通りです。

  • テーブルの見出し行
  • 行の色を交互にする
  • カーソルのある行をハイライト表示

設定が完了したら、最下部の「変更を保存」をクリックしておいてください。

ショートコードの設置

続いて、TablePressで作成した表のショートコードを記事に設置していきます。

TablePress ショートコードの確認

テーブル情報で確認できるTablePressで作成した表のショートコードをコピーしてください。

記事の投稿画面 ショートコードの設置

記事の投稿画面で「ブロックの追加→ショートコード」を選択します。

TablePressのショートコード設置

先ほどコピーしておいたTablePressのショートコードを貼り付けます。

プレビュー画面で確認してみると、作成した表が記事に挿入されています。

TablePressで作成した表

TablePressのCSSカスタマイズ

TablePressのCSSカスタマイズ

TablePressのデザインを変更したい場合は、CSSのカスタマイズを設定すればOKです。

今回は、CSSコードのコピペですぐに使えるカスタマイズ方法を2つ紹介します。

TablePress CSSのカスタマイズ

これから説明するCSSのカスタマイズをする際には、「TablePress→プラグインのオプション→カスタムCSS」から設定をします。

文字を中央揃えする方法

TablePress 文字の中央揃え

TablePressで作成した表の文字は、デフォルトでは左揃えですが、中央揃えにも変更可能です。

設定画面の「プラグインのオプション→フロントエンドオプション→カスタムCSS」に以下のコードをそのまま貼り付けてください。

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

枠線に縦線を追加する方法

TablePress 枠線に縦線の追加

TablePressで作成したデフォルト状態の表には、枠線に縦線が入っていません。

枠線に縦線を追加したい場合は、「プラグインのオプション→フロントエンドオプション→カスタムCSS」に以下のコードを設置してください。

.tablepress thead th, .tablepress tbody td, .tablepress tbody th {
	border: 1px solid #ccc;
}

縦線の色を変更したい場合は、#cccの部分を任意のカラーコードに変更すればOKです。

まとめ

今回は、WordPressプラグインのTablePressについて、使い方やカスタマイズ方法を解説しました。

記事のポイントをまとめます。

本記事のポイント
  • TablePressは、WordPressでおしゃれな表を簡単に作成できるプラグインです
  • 使い方としては、行数や列数を設定してから、ショートコードを設置します
  • CSSカスタマイズとして、文字に中央揃えや枠線に縦線の追加を紹介しました

同じカテゴリーの記事

以上、「TablePressの使い方・カスタマイズ方法まとめ」でした。

スポンサーリンク

ジャンプできる目次
閉じる