header
カスタマイズ

【WordPress】表を埋め込む設定方法

Excel にあるこんな表を画像で取り込むと、いざブログページを開いても文字を選べませんよね。今回はこの表を・・・

こんな風に文字も選べる形で表形式で記事に埋め込む設定方法の話です。

項目
いちご398円
ばなな159円
りんご98円

設定方法の種類

2種類あります。

ビジュアルエディタを利用する方法

WordPress のビジュアルエディタで「表」のブロックを選択すると簡単に表を作成することができます。ただし、どのように表示されるかは利用しているWordPress のテーマ側の設定に依存します。

html と css を使って設定する場合

自分自身で css と html を組み合わせて設定をする方法です。WordPress のテーマに表に関する設定が施されていない場合、もしくはテーマ側の設定とは違う形で表示をさせたい場合に使います。(詳細は後述)

ビジュアルエディタを利用する場合

本ブログでも採用している「JIN」の場合を例に記載します。テーマによってはできないものもあると思います。ご自身の環境でお試しください。

JINの場合、背景色やラインの太さ等はテーマ側の設定に依存しますが、使い手側としては細かいことは気にせずにポチポチ押すと表が作成できます。

まずは列の数と、ざっくりとした表示タイプを決めます。

作りたい表のイメージに合わせてヘッダーやフッターを設定します。

イッヌ

もう・・これで良くない?

いいと思う。後述する html や css を使った設定は、テーマ自体に表の設定がビジュアルエディタでも編集できるように事前設定がされていない場合やカスタマイズしたい人向きだから、JINでデフォルトでいいやって人は読み飛ばしてもいいよ。

html と css を使って設定する場合

css と html を組み合わせて実装します。

html

<table class="wp-table-tate">
  <tbody>
    <tr>
      <th>好きな食べ物</th>
      <td>フルーツ、クルミハニーヨーグルト、和食全般、チョコ</td>
    </tr>
    <tr>
      <th>好きな飲み物</th>
      <td>シャンパン、ビール、日本酒、ウィスキー、焼酎</td>
    </tr>
    <tr>
      <th>趣味</th>
      <td>一眼レフで写真を撮ること、旅行</td>
    </tr>
  </tbody>
</table>

<table class> ・・・</table>

テーブル全体の定義がここから始まるよ、という宣言部分。この class の指定部分が、css のどの部分を呼び出しているのかに関係します。ここからここまでがテーブルの定義だよ、という記述なので、一番最初と一番最後に書きます。

<tbody>・・・</tbody>

テーブルの中身はここからここやで、というもの。この tbody の中に表現したい表の中身を書いていきます。

<tr>・・・</tr>

table record の略称。一行分はここからここまで、を表します。

<th>・・・</th>

table header の略称。一番左の列です。一行の中身の一部なので、<tr>・・・</tr>の間に書きます。

<td>・・・</td>

table data の略称。データベースの世界では「要素」と言ったりもする部分。書きたいデータそのもの、と覚えたらいいと思います。一行の各内容を表現する header の右側に表示させたいので、<th>・・・</th>の次に書きます。

css

一旦、このままコピペすればOKです。

/* テーブル構成 */
/* たて向きテーブル */
.post table {
  border: none;
}
.wp-table-tate {
  width: 85%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 15px;
	margin:auto;
  table-layout: fixed;
}
.wp-table-tate th {
  background-color: #eee;
}
.wp-table-tate td {
  background-color: #fff;
}
.wp-table-tate td {
  text-align: center;
}
.wp-table-tate th, .wp-table-tate td {
  padding: 7px; border: 1px solid #ddd;
}
.wp-table-tate tr:first-child th {
  border-radius: 6px 0 0 0;
}
.wp-table-tate tr:first-child td {
  border-radius: 0 6px 0 0;
}
.wp-table-tate tr:last-child th {
  border-radius: 0 0 0 6px;
}
.wp-table-tate tr:last-child td {
  border-radius: 0 0 6px 0;
}

記述場所

WordPress なら、「外観」> 「カスタマイズ」の追加css に書き加えます。

JIN には追加CSS用のエディタも含まれています。JINの場合でデフォルトのテーブルデザイン以外に設定をしたい場合は、「外観」>「カスタマイズ」 > 「追加CSS」の場所に追記しましょう。

追加CSSの追記が終わったら「公開」のボタンを押下します。その後にページプレビューを更新すると、最新の設定内容で表現できているかどうかを確認できます。私のサンプルコードの場合、htmlとcssの結果を組み合わせると下記の表示になります。

好きな食べ物 フルーツ、クルミハニーヨーグルト、和食全般、チョコ
好きな飲み物 シャンパン、ビール、日本酒、ウィスキー、焼酎
趣味 一眼レフで写真を撮ること、旅行

カスタマイズ方法

いくつかカスタマイズ方法もご紹介しておきます。いろんなブログで紹介されていますので、こだわりたい人は他にも調べてみてくださいね。

色を変える

.wp-table-tate th {
  background-color: #eee;  <-- ★「th」で指定している部分の背景色
}
.wp-table-tate td {
  background-color: #fff;  <-- ★「td」で指定している部分の背景色
}
.wp-table-tate td {
  text-align: center;
}
.wp-table-tate th, .wp-table-tate td {
  padding: 7px; border: 1px solid #ddd; <-- ★枠線の色
}

お好みの色コードを探したいときは、下記のサイトがおススメです。

→ 原色大辞典

幅を調節する

.wp-table-tate {
  width: 85%;       <-- ★ここ。100%だと幅いっぱいになります。
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 15px;
	margin:auto;
  table-layout: fixed;
}

中央にする

.wp-table-tate {
  width: 85%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 15px;
	margin:auto; <-- ★ここ。未設定時は幅100%未満時にズレます
  table-layout: fixed;
}

まとめ

テーブル(表)を埋め込めるようになると表現の幅は広がります。表を作ることが目的ではないですが、表を埋め込むならこうする、というマイルールは決めておくといいですよ。ではでは。設定が成功することを祈ります。

css や html カスタマイズの設定はご自身の責任において実装ください。