【プラグイン無し】【オリジナル(自作)テーマ制作】WordPressで表を作成する方法

プログラミング備忘録
桔梗さんによる写真ACからの写真
スポンサーリンク

WordPressに表を入れる方法で困っていませんか?

どうも、ちゃんカマです。

WordPressのオリジナルテーマ制作の勉強中です。その際に、投稿に表を入れようとしたら、いろいろと手こずりました。しかし、最終的には何とか思い通りの表を入れることが出来たので、今回はその方法を書いていきます。

この記事の前提条件

  1. 公開されているテーマは使用せず。オリジナルのテーマに、自分でコーディングして表を入れてみます。

  2. プラグインは使用せず。

作りたい表はこれ!

WordPressで表を入れる

WordPressのデフォルト機能でやってみる

まずは、WordPressのデフォルトにある機能で表を入れてみます。
ブロックエディターの「フォーマット」→「テーブル」をクリック。そして、表の列と行の数を入力して「生成」をクリック。

生成された表のセルをクリックすると文字が入力出来ます。そして、出来上がった表はこんな感じ。

HTMLやCSSで表の体裁を整える

「むむむっ?」罫線も何も無い表になってしまいます。WordPressのデフォルトの機能では、このようになってしまうんですね。なので、ここからはHTMLの修正やCSSを指定するなどして、表の体裁を整えていきます。

まず、表の1列目(名称や所在地のある列)は見出しなので、そこを少し字が太くなるようにします。
「詳細設定」→「HTMLとして編集」をクリック。

これが、この表のHTMLになります。この中の名称や所在地の<td>タグを<th>タグに書き換えます。

表の1列目の文字が太くなりました。

次に、表全体の幅や背景色を付けるために以下のようなCSSを指定します。

/* tableに追加するCSS */

#content table {
  width: 100%;
  background-color: #f0ffff;
  border-collapse: collapse;
}

「#content」の部分はご自身で指定されているidに書き換えてください。自分の場合は、tableの親のidがcontentなので、#contentになります。

まず、表全体の幅を決めるために、tableにwidthを指定します。自分はtableの親の#contentの幅と同じになるように「width: 100%」としました。ちなみに#contentの幅はwidth: 700pxにしています。その100%なので、この表全体の幅も700pxになります。

「background-color」は、表の背景色を指定しています。

また、「border-collapse: collapse」は必ず指定してください。これを指定しないと、表の罫線を引いたときに、表のセルとセルの間に隙間が出来てしまいます。

border-collapse: collapseを指定しなかった場合の表

表全体の幅が決まり、背景色も付きました。
次は罫線を引いて、列幅や行間を整えていきます。以下のようにCSSを追加します。

/* tableに追加するCSS */

#content table {
  width: 100%;
  background-color: #f0ffff;
  border-collapse: collapse;
}

/* thとtdに追加するCSS */

#content th {
  width: 20%;
  border: solid 1px;
  padding: 10px;
}

#content td {
  width: auto;
  border: solid 1px;
  padding: 10px;
}

1列目は表全体の幅の20%、2列目は80%になるように「width」を指定しています。これで、表に入力した文字数に関係なく、列の幅を決めることが出来ます。

「border」で罫線を引いています。

表の行間が広がるように、「padding」を指定しています。

表に画像を挿入してみる

良い感じになってきたかと。

次に、所在地にMAPの画像を挿入します。挿入したい画像はあらかじめWordPressのメディアライブラリにアップロードしておいてください。その画像のURLをコピーしておいてください。URLはメディアライブラリで画像を開くと出てきます。

そのURLを下記のようにHTMLに挿入します。
<img src=”画像のURL”>

これで画像が挿入出来ました。しかし、画像のサイズが大きいので表のサイズを圧迫していますね。そこで、この画像にもCSSでサイズ調整をします。下記のようにCSSを追加します。

#content td {
  width: auto;
  border: solid 1px;
  padding: 10px;
}

/* imgに追加するCSS */

#content td img {
  width: 100%;
}

「width: 100%」とすることで、表のセルの幅に画像の幅を合わせるようにしています。これで、表のセルの幅に合わせて、画像のサイズを調整してくれます。

完成です。もっと簡単でスマートなやり方もあるのかもしれませんが、自分はこの方法でWordPressに表を入れることが出来ました。自分と同じように手こずった方の参考になればと。

以上、WordPressで表を入れる方法でした。

コメント

タイトルとURLをコピーしました