【TablePress】テーブル(表)をPC・スマホで表示してもレイアウトが崩れないプラグイン<WordPress>

テーブル(表)をPC・スマホできれいに表示できるプラグイン「TablePress」

おおきに!まめもんです。

WordPressでブログを始めてから、見やすいテーブルの作成方法がわからず試行錯誤してきました。

今回の記事は…
  • スマホやPCでもきれいに表示できるテーブルを作成したい
  • ブログでテーブルを作成したいけどCSSの知識が皆無
  • 自分のブログにデザインに合ったテーブルを作成したい

という方向けに発信いたします!

1.Wordpressでテーブル(表)を作成する方法

WordPressでテーブルを作成する方法は、大きくわけて3つあります。

①エディター備え付けの機能でテーブルを作成

試しに4行×5列のテーブルを挿入してみます。

テキストエディタでテーブルを作成
エディタでテーブルを作成してみたら…

数えてみたら30行以上ありました

エディター備え付けの機能では自動的にコーディングしてくれるのですが、データの多いテーブルとなるとコードの量が膨大になります。

簡易的なテーブルを作成するには良いのですが、装飾には向いていません。

②画像でテーブルを作成

実際に画像でテーブルを作成した記事のスクショを載せてみます。

画像でテーブルを作成

PC表示だとそこまで影響はないのですが、スマホ表示になると画像が画面サイズに合わせて縮小されるため、記事中のフォントよりサイズが小さくなり非常に読みづらくなります。

またデータに変更があった場合、容易に編集することができません。

③プラグインを利用してテーブルを作成

①・②をふまえたうえで、当ブログでも簡単にテーブルを作成できる方法がないかと模索した結果、TablePressというプラグインを利用することにしました。

TablePressのメリット
  • テーブルごとに管理できる
  • エディター内がすっきりする
    →どれだけのデータがあってもコードは1行だけ)
  • テーブルのデザインが容易になる
  • レスポンシブ対応
    →画面サイズに合わせてテーブルのレイアウトを自動調整してくれる

2.TablePressをインストール

TablePressのインストール方法

①Wordpressの左側のメニューから「プラグイン」をカーソルでかざし、「プラグインを追加」をクリック

②検索ボックスにTablePressと入力してEnter

③TablePress(一番左上に表示されるはず)の「今すぐインストール」をクリック

TablePressを有効化

インストールが終わったら「有効」をクリックしてプラグインを有効化します。

3.TablePressの使い方

①テーブルを作成する

新しいテーブルを追加

WordPressの左側のメニューにTablePressのアイコンが表示されているので、そのアイコンをカーソルでかざして「新しいテーブルを追加」をクリックします。

アイコンが表示されない場合は、サイトを更新してみてください
新しいテーブルの作成

テーブルの名前を入力します。

②見出し行(または列)を含めた行数列数を入力します。

③入力が終わったら下の「テーブル追加」をクリックします。

テーブルのデータを入力

「テーブルの内容」のテーブルにデータを入力していきます。

テーブルのオプション

さらに下にスクロールをすると、テーブルの設定ができます。

今回はシンプルなテーブルを作成するため、「テーブルの最初の行を見出しにする」以外はチェックを外しました。

デフォルトでチェックが入っている項目に関してはお好みで。

Javascriptの設定

JavaScriptの方も今回はチェックを外しました。

並べ替えや水平スクロールなど必要な機能がほしい場合以外は外しておきましょう。

最後に「変更を保存」をクリックします。

②作成したテーブルを記事に挿入する

旧型エディターでの説明になります
TablePressからテーブルを挿入

エディターに新しいアイコンが追加されているので「TablePressからテーブルを挿入」をクリックします。

テーブルのソースコードを挿入

挿入したいテーブルの名前を見つけたら右側の「ショートコードを挿入」のボタンをクリックします。

テーブルをたくさん作成した場合、手動で探すのは大変なので上部にある「テーブルを検索」を利用しましょう
テーブルコードが挿入されたか確認

エディターにテーブルのショートコードが挿入されたことを確認したら「プレビュー」をクリックします。

テーブルのショートコードは、ビジュアルエディター・テキストエディターどちらに挿入しても構いません
記事にテーブルを挿入

記事にテーブルが挿入されました。

4.テーブル(表)のデザインと体裁を整える

①テーブルをブログのデザインと統一させる

プラグインのオプション

①Wordpressの左側のメニューTablePressのアイコンをクリックします

「プラグインのオプション」をクリックします

テーブルのCSSを挿入

③カスタムCSS内にテーブルデザインのCSSを書いていきます。

(CSSがわからない方はのちにサンプルコードを記載いたしますのでそのまま下へ)

変更を保存

「変更を保存」をクリック。テーブルをプレビューで確認します。

テーブルのデザインをブログと統一

⑤テーブルのデザインがブログのデザインと統一しました。

変更点
  • テーブルの枠線の色→ブログのメインカラー
  • 見出しの文字列→セルに対して中央揃え

※見出し行の背景色はデフォルトのままにしています。

サンプルコードを用意しましたので、コピペして自身のブログに合ったカラーコード(サンプルコードでいうと#4aa7d6の部分)に変更してください。

下記のコードはTablePressで作成したテーブルすべてに反映されるようになっています。

/*表全体の設定*/
.tablepress thead th,
.tablepress tbody td,
.tablepress tfoot th {
	border: solid #4aa7d6 !important;
}

.tablepress thead th {
 text-align: center !important;
  background-color:#4aa7d6;
 color:#fff;/*見出し行の背景色が薄い場合は、この1行(11行目)を削除してください*/
}
「カラーコードもわからない…!」という方はこちらのサイトを参考にしてみてください。

CSSがうまく反映されない…

STORKの追加CSS

有料テーマ「STORK」を使っている方は、カスタマイズ画面の「追加CSS」で記述してみてください。

②各テーブルごとにデザインを変更

今度は各テーブルごとにデザインを変更してみます。

先ほど作成したテーブル名「コンビニバイトの比較」の時給の項目(3列目)には金額のデータが記載されています。

基本的に数値を表すデータは、桁をそろえるために右揃えにすることが望ましいので、3列目を右揃えにするCSSを設定してみます。

文字列を右揃えにしたい

先ほどと同じように

①Wordpressの左側のメニューTablePressのアイコンをクリックします

「プラグインのオプション」をクリックします

右揃えにするコードをコピペ

3列目を右揃えにするCSSを追加します。こちらもサンプルコードをコピペしてご利用下さい。

/*表個別の設定*/
.tablepress-id-7 .column-3{
text-align: right;
}

少しサンプルコードを解説すると、1行目の.tablepress-id-7…数字に見覚えありませんか?

そうです。テーブル名「コンビニバイトの比較」のID、つまり作成した各テーブルごとにふられている通し番号です。

テーブルのIDがわからない…

テーブルのIDの確認方法

 

そして隣の.column-3、だいたい予想はつくと思いますが「3列目」を意味しています。

3を2に変更すれば「2列目」という意味になります。

下のtext-align: right;、これは右揃えです。

rightcenterに変更すると、文字列が中央揃えになります。

文字列が右揃えになる

サンプルコードを追加したら「変更を保存」をクリックし、3列目が右揃えになったことを確認します。

③テーブルの列幅を調整する

各列の幅がバラバラなので、3列とも同じ幅にしてみます。

列幅をそろえたい

再び

①Wordpressの左側のメニューTablePressのアイコンをクリックします

「プラグインのオプション」をクリックします

列幅をそろえるコードを挿入

コードを追加します。

.tablepress-id-7{
	width:100%;
	table-layout: fixed;
}

コードを追加したら「変更を保存」をクリックして、テーブルの列幅が均等になっているか確認してみてください。

すべての列幅が同じ

④各列ごとに幅を調整する

少し難易度が上がりますが、レイアウトを整えるために意外と使うので覚えておくといいでしょう。

エディターで列幅を指定

テーブルを追加した記事の編集画面を開きます。

テーブルのコードに直接、列幅の指定をします。(赤下線の部分を追加します)

column_widths="20%|20%|60%"

個別に列幅を指定するときは、合計が100%(今回の例でいうと3列の幅の合計)になるよう指定します。

コードを追加したら「変更を保存」をクリック、「プレビュー」で確認します。

列ごとに幅を指定した結果

各列ごとに幅を指定することができました。

スマホでのプレビューも忘れずに!

基本的にTablePressは、表示する画面サイズに合わせて自動的にテーブルのレイアウトを調節してくれます。

しかし列幅を手動で変更した場合、PCではきれいに表示されていてもスマホだと崩れて表示されることがあります。

手動で列幅を変更した場合は、スマホでのプレビューも確認しておくことをおすすめいたします。

レイアウトが崩れたテーブル
テーブル(表)をPC・スマホできれいに表示できるプラグイン「TablePress」