おおきに！まめもんです。
WordPressでブログを始めてから、見やすいテーブルの作成方法がわからず試行錯誤してきました。
[box class=”green_box” title=”今回の記事は…”]
- スマホやPCでもきれいに表示できるテーブルを作成したい
- ブログでテーブルを作成したいけどCSSの知識が皆無
- 自分のブログにデザインに合ったテーブルを作成したい
という方向けに発信いたします！
[/box]
１．Wordpressでテーブル（表）を作成する方法
WordPressでテーブルを作成する方法は、大きくわけて３つあります。
①エディター備え付けの機能でテーブルを作成
試しに４行×５列のテーブルを挿入してみます。
数えてみたら３０行以上ありました
エディター備え付けの機能では自動的にコーディングしてくれるのですが、データの多いテーブルとなるとコードの量が膨大になります。
簡易的なテーブルを作成するには良いのですが、装飾には向いていません。
②画像でテーブルを作成
実際に画像でテーブルを作成した記事のスクショを載せてみます。
PC表示だとそこまで影響はないのですが、スマホ表示になると画像が画面サイズに合わせて縮小されるため、記事中のフォントよりサイズが小さくなり非常に読みづらくなります。
またデータに変更があった場合、容易に編集することができません。
③プラグインを利用してテーブルを作成
①・②をふまえたうえで、当ブログでも簡単にテーブルを作成できる方法がないかと模索した結果、TablePressというプラグインを利用することにしました。
[box class=”pink_box” title=”TablePressのメリット”]
- テーブルごとに管理できる
- エディター内がすっきりする
→どれだけのデータがあってもコードは１行だけ） - テーブルのデザインが容易になる
- レスポンシブ対応
→画面サイズに合わせてテーブルのレイアウトを自動調整してくれる
[/box]
２．TablePressをインストール
①Wordpressの左側のメニューから「プラグイン」をカーソルでかざし、「プラグインを追加」をクリック
②検索ボックスにTablePressと入力してEnter
③TablePress（一番左上に表示されるはず）の「今すぐインストール」をクリック
インストールが終わったら「有効」をクリックしてプラグインを有効化します。
３．TablePressの使い方
①テーブルを作成する
WordPressの左側のメニューにTablePressのアイコンが表示されているので、そのアイコンをカーソルでかざして「新しいテーブルを追加」をクリックします。
[aside type=”warning”]アイコンが表示されない場合は、サイトを更新してみてください[/aside]
①テーブルの名前を入力します。
②見出し行（または列）を含めた行数と列数を入力します。
③入力が終わったら下の「テーブル追加」をクリックします。
④「テーブルの内容」のテーブルにデータを入力していきます。
さらに下にスクロールをすると、テーブルの設定ができます。
今回はシンプルなテーブルを作成するため、「テーブルの最初の行を見出しにする」以外はチェックを外しました。
デフォルトでチェックが入っている項目に関してはお好みで。
JavaScriptの方も今回はチェックを外しました。
並べ替えや水平スクロールなど必要な機能がほしい場合以外は外しておきましょう。
最後に「変更を保存」をクリックします。
②作成したテーブルを記事に挿入する
[aside type=”warning”]旧型エディターでの説明になります[/aside]
エディターに新しいアイコンが追加されているので「TablePressからテーブルを挿入」をクリックします。
挿入したいテーブルの名前を見つけたら右側の「ショートコードを挿入」のボタンをクリックします。
[aside type=”normal”]テーブルをたくさん作成した場合、手動で探すのは大変なので上部にある「テーブルを検索」を利用しましょう[/aside]
エディターにテーブルのショートコードが挿入されたことを確認したら「プレビュー」をクリックします。
[aside type=”normal”]テーブルのショートコードは、ビジュアルエディター・テキストエディターどちらに挿入しても構いません[/aside]
記事にテーブルが挿入されました。
４．テーブル（表）のデザインと体裁を整える
①テーブルをブログのデザインと統一させる
①Wordpressの左側のメニューTablePressのアイコンをクリックします
②「プラグインのオプション」をクリックします
③カスタムCSS内にテーブルデザインのCSSを書いていきます。
（CSSがわからない方はのちにサンプルコードを記載いたしますのでそのまま下へ）
④「変更を保存」をクリック。テーブルをプレビューで確認します。
⑤テーブルのデザインがブログのデザインと統一しました。
[box class=”blue_box” title=”変更点”]
- テーブルの枠線の色→ブログのメインカラー
- 見出しの文字列→セルに対して中央揃え
※見出し行の背景色はデフォルトのままにしています。
[/box]
サンプルコードを用意しましたので、コピペして自身のブログに合ったカラーコード（サンプルコードでいうと#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;/*見出し行の背景色が薄い場合は、この１行（１１行目）を削除してください*/
}[aside type=”normal”]「カラーコードもわからない…！」という方はこちらのサイトを参考にしてみてください。
[btn class=”simple”]WEB色見本 原色大辞典 – HTMLカラーコード[/btn]
[/aside]
[aside type=”normal”]CSSがうまく反映されない…
有料テーマ「STORK」を使っている方は、カスタマイズ画面の「追加CSS」で記述してみてください。
[/aside]
②各テーブルごとにデザインを変更
今度は各テーブルごとにデザインを変更してみます。
先ほど作成したテーブル名「コンビニバイトの比較」の時給の項目（３列目）には金額のデータが記載されています。
基本的に数値を表すデータは、桁をそろえるために右揃えにすることが望ましいので、３列目を右揃えにするCSSを設定してみます。
先ほどと同じように
①Wordpressの左側のメニューTablePressのアイコンをクリックします
②「プラグインのオプション」をクリックします
３列目を右揃えにするCSSを追加します。こちらもサンプルコードをコピペしてご利用下さい。
/*表個別の設定*/
.tablepress-id-7 .column-3{
text-align: right;
}少しサンプルコードを解説すると、１行目の.tablepress-id-7…数字に見覚えありませんか？
そうです。テーブル名「コンビニバイトの比較」のID、つまり作成した各テーブルごとにふられている通し番号です。
[aside type=”normal”]テーブルのIDがわからない…
[/aside]
そして隣の.column-3、だいたい予想はつくと思いますが「３列目」を意味しています。
３を２に変更すれば「２列目」という意味になります。
下のtext-align: right;、これは右揃えです。
rightをcenterに変更すると、文字列が中央揃えになります。
サンプルコードを追加したら「変更を保存」をクリックし、３列目が右揃えになったことを確認します。
③テーブルの列幅を調整する
各列の幅がバラバラなので、３列とも同じ幅にしてみます。
再び
①Wordpressの左側のメニューTablePressのアイコンをクリックします
②「プラグインのオプション」をクリックします
コードを追加します。
.tablepress-id-7{
width:100%;
table-layout: fixed;
}コードを追加したら「変更を保存」をクリックして、テーブルの列幅が均等になっているか確認してみてください。
④各列ごとに幅を調整する
少し難易度が上がりますが、レイアウトを整えるために意外と使うので覚えておくといいでしょう。
テーブルを追加した記事の編集画面を開きます。
テーブルのコードに直接、列幅の指定をします。（赤下線の部分を追加します）
column_widths="20%|20%|60%"個別に列幅を指定するときは、合計が１００％（今回の例でいうと３列の幅の合計）になるよう指定します。
コードを追加したら「変更を保存」をクリック、「プレビュー」で確認します。
各列ごとに幅を指定することができました。
[aside type=”warning”]スマホでのプレビューも忘れずに！
基本的にTablePressは、表示する画面サイズに合わせて自動的にテーブルのレイアウトを調節してくれます。
しかし列幅を手動で変更した場合、PCではきれいに表示されていてもスマホだと崩れて表示されることがあります。
手動で列幅を変更した場合は、スマホでのプレビューも確認しておくことをおすすめいたします。
[/aside]
