かずぽんノート

管理人のかずぽんがお役立ち情報を発信するブログです。

*

TablePress-テーブル作成プラグインの幅変更やカスタムCSSの使い方

      2016/03/07

TablePress

色々なものを比較するのに、視覚的に表で表現すると分かりやすさがグンとUPして訴求力が高まります。

このブログはWordPressで作っているのですが、表を作ろうと思ったらちょっとややこしい。

いや、まあ私が初心者なだけなんですがね。(笑)

そんな私でも、簡単に表を作成できるプラグインがないかなぁ・・・。と探していたら、ありましたよ(^^)

すっごく便利で、使いやすいプラグインが♪

その名は「TablePress」!!

これ、想像以上に使いやすく高機能。使いこなせば、Tableタグではかなり苦労しそうなことも楽ちんで出来てしまいます。

今回は、そんなおすすめのプラグイン「TablePress」のシェアと、使い方の備忘録も兼ねて記事にしました。

1回使ったら、これなしではあり得ないというくらい便利ですのでぜひ試してみてくださいね~(^^♪

TablePressのインストール

まず、これをしなきゃ始まりません。

と、いってもインストール自体はすごく簡単。

まず始めに、ダッシュボードメニューのプラグインから「新規追加」をクリック。

プラグインの新規追加

次に、検索バーに「TablePress」と入力し、検索をします。

検索バーにTablePressと入力

すると検索結果が表示されますので、お目当てのプラグインで間違いがないかを確認し、「いますぐインストール」をクリック。

いますぐインストールをクリック

※TablePressと名前がついたプラグインが、いくつか出てきますが完全一致のものを選択してください。

プラグインの有効化をしたら、下記画像のようにダッシュボードメニューにTablePressの項目が追加されます。ここまでくれば、使う準備はOKです♪

ダッシュボードメニューにTablePressが追加

TablePressの使い方 基本編

テーブルの追加

使用方法は何通りかあるのですが、まず基本的な「テーブルの追加」から。

ダッシュボードメニューのTablePressを選択し、「新しいテーブルの追加」をクリックします。

新しいテーブルを追加

すると、下記画像のような入力画面が表示されます。

新しいテーブルの追加

テーブルの名前:管理しやすい名前を入力。(後で修正をする時に、分かりやすいように)

説明:省略可(特段入力をしなくても問題なし。後で説明するオプションとして表示させる場合は入力)

行数:横の分割数(後で追加・削除は自由にできます。)

列数:縦の分割数(後で追加・削除は自由にできます。)

上記を入力後、「保存」をクリックするとテーブルの内容を入力する画面が出てきますので、直接入力をしていきます。

表の内容を直接入力

テーブルのオプション

テーブルのオプション

1.テーブルの見出し行:チェックを入れることで、最初の行に「カスタムCSS」で設定した背景色へ変更できます。

2.テーブルのフッター行:最後の行をフッターにできます。使いどころはよくわかりません。m(__)m

3.行の色を交互にする:表を見やすくするために使用しても良いかもです。

4.カーソルのある行をハイライト表示:マウスをもっていった行がハイライトで表示されます。

5.テーブル名を表示:表の上または下にテーブル名を見出し表示させることが可。

6.テーブルの説明の表示:表の上または下に説明分を表示させることが可。(説明を入力している時のみ)

ライブラリの機能

ライブラリの機能

この機能を使って、訪問者に表の並び替え等をさせることができますが、私は機能を使わずに使用したいので「DateTablesを使用」のチェックを外してます。

使用するテーブルの用途によっては、ユーザビリティをUPさせてくれますので、状況に応じていろいろと試してみるといいかもです。

追記:スマホで見たときに、列数の多いテーブルだと表示がはみ出します。その場合は水平スクロールを有効にしてください。

テーブルを表示させる方法

テーブル(表)を表示させるのは、すごく簡単。

テーブル情報の右上にショートコードが作成されてますので、これをコピーして貼り付けるだけです。

テーブルを表示させる方法

※プレビュー画面では、テーブルの左下に「編集」と表示されていますが、実際に公開された記事には表示されません。

エクセルの表からも作成可能

エクセルで作成してある表も、簡単に取り込みが可能。個人的にはこちらの方が楽なので、主にこの方法で表を作成してます。

使用方法は、まずエクセルの表を作りたい範囲を選択してコピー。

エクセルのデータをコピー

次にTablePressから「テーブルをインポート」をクリックします。

テーブルをインポート

下記画像のように表示されますので、手動入力を選択し、赤枠内に先ほどコピーしたものを貼り付けます。

エクセルデータを貼り付け

インポートをクリックして、「新しいテーブルの追加」と同じように、テーブルのオプションとライブラリ機能の設定をして完成です。

▽テーブルのインポートから作成した表

 まさのり君たろう君花子さん
学年1年2年3年
50m走9秒38秒58秒3
走り高跳び1m20cm1m15cm1m40cm
幅跳び1m20cm2m20cm1m80cm
垂直とび30cm45cm50cm
握力20kg30kg25kg
1500m走7分30秒7分00秒6分50秒

※上記は架空のデータです。

TablePressの使い方 応用編

カスタムCSSの追加

ここまでの作業で表はできていますが、枠線がなかったりでちょっと見映えが悪いです。

CSSで枠線や背景色の装飾ができますので、装飾をしてみましょう。

入り口は、ダッシュボードメニューのTablePressから「プラグインのオプション」を選択。

プラグインのオプションをクリック

すると下記画像が表示されますので赤枠部分にCSSを記述します。

カスタムCSS

今回、私が作成した表と同じでよければ下記CSSをコピペして貼り付けてください。

上記CSSは、

見出し(最初の行)の背景色:青色(カラーコード#1E8CBE)

見出し(最初の行)の文字色:白色(カラーコード#FFF)

セル内の文字位置:中央寄せ(center)

となっていますので、表の用途に合わせて該当箇所を修正してください。

▽下記のような表が出来上がります♪

 株式投資FX不動産投資
初期費用1万円~4000円~300万円~
難易度易しい比較的易しい難しい
総合評価

※上記はテーブル表示例用に作成したもので、データは実際のものと異なります。

表に画像を挿入する方法

写真やキャプチャ画像も簡単にテーブルに表示させることが出来ます。

方法としては、テーブルの操作の「画像を挿入」をクリックして、表示させたい箇所をクリックします。

画像を挿入をクリック

すると、メディアライブラリが表示されるので、画像をライブラリから選ぶかアップロードをします。

これだけで画像が挿入されますが、画像は左寄せになっています。中央寄せにしたい場合は下記のようにタグで囲んでください。

▽画像を挿入した表

パソコンをする女性
驚く男性
パソコン
画像も挿入可。追加・削除も簡単。日本語対応。

星マークも表示可能

今回作成した表には、「Shortcode Star Rating」というプラグインを使って星マークを表示させています。

表示させる方法は、テーブルの操作の「高度なエディタ」をクリックして表示させたい箇所を選択。

高度なエディター

すると、下記画像のように表示されるので「Star Rating」をクリックします。

StarRatingをクリック

上記のショートコードが挿入されますので、●の部分に表示させたい星の数を入れて保存するだけ。

「Shortcode Star Rating」プラグインの詳細は、下記を参考にどうぞ♪

参考星評価を簡単に作成できるプラグインShortcode Star Rating

セルの結合方法

状況に応じて、セルの結合が必要な場合があると思いますが、そのような場合にも対応可能です。

行の結合をするときは、下記画像のように結合するセルの一番左にだけ入力し、右の方は「#colspan#」と記述します。

セルの結合

▽結合したテーブルの表示例

 国語算数理科
平均点72点56点67点
偏差値504753
学年5年生

列を結合したいときは、同じ要領で結合するセルの一番上にだけ入力し、下の方は「#rowspan#」と記述します。

特定セルの背景色や文字色変更

強調したい箇所の、セル背景色や文字色を変えたいときはカスタムCSSに記述します。

上記記述の内容は、

.tablepress-id-●:テーブルIDを●の部分に入れる。
row-●:上から●番目の箇所
column-●:左から●番目の箇所

background-color:指定箇所の背景色(カラーコード#CCFFFF)
color:指定箇所の文字色(カラーコード#FF0000)
と、なります。

▽上記CSS記述時のセル背景色・文字色表示例

row-1 column-1row-1 column-2row-1 column-3
row-2 column-1row-2 column-2row-2 column-3
row-3 column-1row-3 column-2row-3 column-3
row-4 column-1row-4 column-2row-4 column-3
row-5 column-1row-5 column-2row-5 column-3

列の幅を変更

デフォルトでは、それぞれの列の幅は自動で調整されますが、個別に調整をすることも可能。

方法は、貼り付けたテーブルのショートコードを以下のように変更します。

上記の例では、table id=5の後ろにcolumn_widthsを追記して左の列から順番に10%、40%、10%、40%で指定しています。

 国語算数理科
平均点72点56点67点
偏差値504753
学年5年生

テーブル全体のスタイルを、100%としたときの割合比で指定するので、合計は必ず100%となるようにしてください。

また、テーブルの一番左の列だけを調整したい場合は、下記のように記述します。

 国語算数理科
平均点72点56点67点
偏差値504753
学年5年生

指定をしていない残りの列は、自動で幅が調整されます。便利ですね(^^♪

%割合比で説明をしましたが、px(ピクセル)の単位で指定をすることもできます。その場合は%の部分をpxに置き換えてください。

本日のまとめ

機能的にとても優れたプラグインですので、すべての機能を紹介できていませんが、今回説明した内容だけでもかなり見映えのよい表が作成できるのではないかと思います。WordPress初心者の私でもできたので、ちょっと表を作成するのは難しそうと敬遠している方もチャレンジする価値は十分にあると思いますよ♪

 - WordPressカスタマイズ