表デザインを簡単作成/WPプラグイン「TablePress」

TablePress00


WordPressプラグイン「TablePress」

投稿や固定ページに表デザインを簡単に作れるプラグイン。

インストール方法

  • (1)管理画面左側「プラグイン」から「新規追加」でこのプラグインを検索
  • (2)「いますぐインストール」をクリック
  • (3)「プラグインを有効化」をクリックして有効に

インストール方法をもっと詳しく

参考までにダウンロードサイト

はじめに

 統計的なデータを分かりやすく見せるなどの表は、ユーザビリティの観点からやっておいた方が良いと思います。
 
こんなやつです。
TablePress00-01

 しかし、いざHPに表示させようとすると、CSSなどを多少知っていないと、作る事は以外に難かしい。

 結果的に代わりに表の画像データをアップさせるなどしてる場合もあるけど、修正があればメンドイ。

 やはり表を作れるならばやりたいのが人情ってもの。

 これは投稿や固定ページで表をショートコードを用いて簡単に作成できるので、そんな表作成ビギナーにも使えるものです。

有効化後の設定、使い方

サイドバーの「TablePress」から、「新しく追加」をクリックします。

TablePress01

次にテーブルの名前、そして行数、列数を入力し、「テーブルを追加」をクリックします。

TablePress02

 テーブルの内容に、表として表示する文字を入力し、変更保存します。

TablePress03

 一旦、どのように表示されるかプレビューを確認します。
 
TablePress04

右上に表示されているショートコードをコピーします。

TablePress05

固定ページに貼付けて、公開します。

TablePress06

表示を確認します。 

TablePress10

表示されました。

しかし、若干のデザインの変更と、それと上下に不思議なものが追加されてます。それを修正する必要がありそうです。

オプションでデザインを変更する

先ほどの設定の下の場所にオプションで変更できます。

まずデーターの内容が同列なのに、一番上の行の色が違うのでこれをを変更します。「テーブルの最初の行はテーブル見出しです」のチェックを外します。

TablePress10-01

統一感がでました。

また「連続する行の背景色を別々の色にします」は見やすいのでそのままでチェックを入れます。次の「マウス カーソルを行に合わせている間、行の背景色を変更してハイライト表示します」も同様にチェックをいれます。

TablePress12

なんかクールです!!

さらに高度な設定をする

 「DataTables JavaScriptライブラリ」の機能を使ってかなり高度な使い方もできます。ただ始めは驚きますが、使い方はイメージできません。

 ただ、そこはさておき、テストします。

 まず[テーブルのオプション]セクションの[テーブルの見出し行]チェックボックスがオンになっている必要があるので、先ほど外したチェックを復活させて使っています。

その後、必要に応じてチェックをいれます。

 TablePress21

1、テーブルの並べ替えを選択できるようにする。
2、テーブルの検索またはフィルターを使用できるようにします。テーブル内の検索語を含む行だけが表示されます。
3、テーブルのページ分割(一度に表示する行数の指定)を訪問者が使用できるようにします。
4、ページ分割で表示する行数を訪問者が変更できるようにします。
5、行数など、現在表示されているデータに関する情報を含め、テーブル情報の表示を有効にします。
6、列数の多いテーブルを見やすくするために、水平スクロールを有効にします。

 公開画面を確認すると。

TablePress22

 このようになります、膨大なデーターが必要な場合は必要かもしれませんが、やはりイメージ湧きませんね・・・。

表のデザインを変えたい

 プラグインのオプションでカスタムCSSの中にCSSを記述すればデザインをいじることも可能です。

TablePress23

デモ

WPで作ったデモ

まとめ

 シンプルなデザインですが、逆にどのサイトでも適応できそうな感じです。CSSを使わないで小難しい表をさくっと作成できるのはありがたい。マウスオーバーした時に色が変わったりと、コネタが光ることも嬉しい。
 

LINEで送る
Pocket

WordPressこれで学びました

  • WordPressの参考書は、制作ものが多いけど、この本はSEOに特化した割り切りが良い。初めてWordPress導入し、SEO対策をどうしようと悩んでいた時に購入しました。
     WordPressは基本的にはSEOに優れたCMSでありますが、能力を最大化するには、パーマリンク等のSEOに適した設定やSE対策のプラグインなどでパワーアップさせる必要があります。読んだ時は、目から鱗が落ちる内容で、当初はそのまま実践してました。
     また、WordPressだけでなく、基本的なSEO対策の本として、キーワードやタイトル設定なども勉強になりました。

コメントを残す