WordPressプラグイン

コピペOK!WordPressプラグイン「TablePress」で見やすい表を作る5種類のCSSを公開!

こんな方に読んで欲しい!

  • Webサイトで表示している表を、見やすくしたい!
  • 表が味気ないのでスタイリッシュにしたい!
  • 表によってレイアウトを使い分けたい!

WordPressプラグイン「TablePress」を使うと、高機能な表が簡単に作成できます。

ただ、意外とこの表の「デザイン」に困ることが多いんです。

  • 記事中の表はこのデザイン
  • 価格と提供サービスを表すのはこのデザイン

というように、理解しやすくするために、複数のデザインを使い分けたいことも多いです

そこで今回は、「コピペOK」のTablePressデザイン用CSSを5つ、紹介します。気に入ったものがあれば、どんどんコピペして使ってください!

ここがポイント!

この記事に掲載しているCSSテンプレートは「TablePress」のカスタムCSSに組み込み使ってください。

1. 簡単に表が作れるプラグイン「TablePress」

表はWordPressの標準機能でも作れますが、見た目を良くしたいのであれば「TablePress」がおすすめです。

「TablePress」を使ったことがないという人は、以下の記事で徹底的に解説していますので、そちらもあわせて参考にしてください。

2. 基本的な使い方

2-1. 下準備

まず、お好きなデザインの表のCSSをコピーします。

次に、WordPressの左メニュー > TablePress > プラグインのオプション を開き、CSSを貼り付けます。

画面の下に「変更を保存」ボタンがあるので、お忘れなく!

ここがポイント!

複数のデザインを入れたい場合は、どんどん下に追記してください。

 

2-2. TablePressで表を作成するとき

実際に表を作成するときに、データ入力画面の下部にある「テーブルのオプション」項目に「追加のCSSクラス」という項目があります。

ここに、使いたいデザインのクラス名(例「tablspress_01」)を入力すると、さきほど貼り付けたCSSが呼び出され、指定した表のデザインが適用されます。

ここがポイント!

この項目に直接CSSを入力してはダメです。また、「class="tablepress_01"」のように書く必要はありません。クラス名(「tablepress_01」など)だけでOKです。

3. コピペOK!「TablePress」で使える目的別CSS

WordPressプラグイン「TablePress」で使える表のCSSを、目的別に5つ作ってみました。

3-1. TablePressデザインサンプル ①ランキング表

まずは、ランキング表を意識したシンプルなCSSです。

表を自由に構成してもレイアウトが崩れることがないので、色々な用途で使えます。

3-1-1. 表の構成

こちらはTablePressのデータ入力画面です。

この表は「列の数」や「行の数」の制限はありませんので、必要に応じて変更してください。

TeblePressのオプションには下記にチェックを入れています。

  • テーブルの見出し行
  • テーブル名を表示: テーブルの上に表示

3-1-2. CSSの特徴など

この表は次のような工夫をしています。

  • 文字の中央そろえ
  • 罫線あり
  • 1番から3番までは、王冠のアイコンを表示
  • 王冠のアイコンは金銀銅の3種類

この表の一番上の行の1列目の先頭には自動的に「金の王冠マーク」2番目に「銀の王冠マーク」3番目に「銅の王冠マーク」が付きます。

ここに注意!

この表のアイコンには外部ツールのFontAwesomeを利用していますので、再現するにはあらかじめFontAwesomeの設定が必要です。

3-1-3. コピペ用CSS

TablePressのプラグインオプションのカスタムCSSに張り付けたあとに、 テーブルの追加CSSクラスに「tablepress_01」を指定します。

3-2. TablePressデザインサンプル ②機能の比較表CSS

無料プランと有料プランの性能を比較する表CSSです。

ネットサービスの有料プランの案内によくある「有料プランにするとこんなに多くの機能が使えるようになりますよ!」という内容の表です。

ネットサービスだけでなく、プランが複数ある場合はどのような業種のサービスにも応用できます。

3-2-1. 表の構成

B列の1行目からD列の10行目までのチェックマークにFontAwesomeを使用していますが、この部分を他の文字や数字に置き換えていただいてもかまいません。

この表は列や行を増やしたり減らしたりしてもレイアウトが崩れることはありません。

ここに注意!

このCSSを使用する場合は、テーブルオプションの「DataTablesを使用」のチェックを外しておきます。

3-2-2. CSSの特徴など

この表は次のような工夫をしています。

  • 隣のセルとの間に距離を一定の間隔に設定
  • チェックマークを中央そろえ
  • タイトルの背景色と文字色を変更
  • 1番左の列以外の文字色を緑で統一
  • 1番左の列の幅を固定

3-2-3. コピペ用CSS

このCSSを使うには、TablePressのプラグインオプションのカスタムCSSに張り付けたあとに、 テーブルの追加CSSクラスに「tablepress_02」を指定します。

3-3. TablePressデザインサンプル ③プラン比較表CSS(その1)

プランごとのサービスを比較する表のCSSです。

料金が上がることによって、できることがランクアップするような印象でプランを比較できます。

3-3-1. 表の構成

この表は列や行を増やしたり減らしたりしてもレイアウトが崩れることはありません。

ここに注意!

このCSSを使用する場合は、テーブルオプションの「DataTablesを使用」のチェックを外しておきます

3-3-2. CSSの特徴など

この表は次のような工夫をしています。

  • 隣のセルとの間に距離を一定の間隔に設定
  • タイトルと1行目のセルにグラデーションを設定
  • 1行ごとに背景色を変更
  • 2列目を他の列と区別するためにデザインを変更
  • 2列目1行目の文字色、文字サイズを変更

3-3-2. コピペ用CSS

このCSSを使うには、TablePressのプラグインオプションのカスタムCSSに張り付けたあとに、 テーブルの追加CSSクラスに「tablepress_03」を指定します。

3-4. TablePressデザインサンプル ④プラン比較表CSS(その2)

プランごとのサービスを比較する表のCSSです。

サーバーの性能比較などでよく使われている表で、月額料金の違いを同じ項目で比較したい時に適しています。

3-4-1. 表の構成

この表は列や行を増やしたり減らしたりしてもレイアウトが崩れることはありません。

ここに注意!

このCSSを使用する場合は、テーブルオプションの「DataTablesを使用」のチェックを外しておきます

3-4-2. CSSの特徴など

この表は次のような工夫をしています。

  • 隣のセルとの間に距離を一定の間隔に設定
  • freeプラン、限定プラン、その他のプランでレイアウトを変更
  • 1行ごとに背景色を変更
  • 2列目を他の列と区別するためにデザインを変更
  • 2列目を他よりも大きく見えるようにデザイン

3-4-2. コピペ用CSS

このCSSを使うには、TablePressのプラグインオプションのカスタムCSSに張り付けたあとに、 テーブルの追加CSSクラスに「tablepress_04」を指定します。

3-5. TablePressデザインサンプル ⑤プラン比較表CSS(その3)

プランごとのサービスを比較する表のCSSです。

基本的には「プラン比較表CSSその2」と同じような内容ですが、レイアウトにこだわって作ってみました。

見た目はスタイリッシュにできましたが、汎用性には欠けています

3-5-1. 表の構成

パッと見は4カラムですが、実は8カラム構成で作っています。

かなり細かくCSSを設定しているので、カラムを追加すると全体の印象がかなり変わってしまいます。

10カラム以上で使う場合は、コピペ用CSSを参考にしてCSSを追加してください。

ここに注意!

このCSSを使用する場合は、テーブルオプションの「DataTablesを使用」のチェックを外しておきます。

3-5-2. CSSの特徴など

この表は次のような工夫をしています。

  • 隣のセルとの間に距離を一定の間隔に設定
  • 背景色をダークカラーで統一
  • 1列ごとに背景色を変更
  • 2列目を他の列と区別するためにデザインを変更
  • 2列目を他よりも大きく見えるようにデザイン

ここがポイント!

この表はWebサイトで確認すると4カラムで構成されていますが、セルの結合を利用していますので、実質8カラムで構成されています。

ここに注意!

CSSでは指定するセルの列数は、表示されたカラムではなく構成画面でのカラム数なので注意が必要です。

3-5-3. コピペ用CSS

このCSSを使うには、TablePressのプラグインオプションのカスタムCSSに張り付けたあとに、 テーブルの追加CSSクラスに「tablepress_05」を指定します。

4. まとめ

この記事に掲載している表の中で使ってみたいと思った表があればどんどんコピペして使ってください。

もちろん色や構成は、あなたの作りたい表に合わせて変えて頂いても構いません。

このCSSを使うには、WordPressプラグイン「TablePress」が必要ですので、まだインストールしていない人は、レスポンシブ対応の「表」を簡単に作れる!「TablePress」プラグインを徹底解説!を参考にしてください。

\参考になったらポチッとお願いします!/

-WordPressプラグイン
-, ,

© 2020 インターネットビジネスラボ