アプリ・サービス紹介

WordPress のJIN で見出し付き表(テーブル)を簡単に作ろう!

相談者

JIN でいい感じのテーブル作れないの?

JINはWordPressの表(テーブル)作成機能を使っているので使いにくくて困ります。

本記事の内容
  • JIN で「見出し」付きのテーブルのつくり方
  • Web サービスを使ったテーブルのつくり方

さらに、予めデザインされたテーブルを使えるサイトもご紹介しています。HTML と CSS を貼り付けるだけで格好いいのができます。

プラグインを入れたら解決するんだけど、ただでさえ🐢のJINさんにはあまり負担をかけたくない。

少しだけ HTML と CSS がわからないといけないけれど、JIN でテーブルを作る方法をご紹介します。

そよ

プラグインを購入する余裕があるのでしたら、SIMPLE BLOG DESIGN をオススメします。テーマごと変更するなら、有料テーマ SWELL が使いやすくて良いでしょう。

この記事を書いた人

WordPress のプラグインとテーマ、ブログ記事作りに役立つ記事を書いてます。
テーマは、Cocoon、JIN、Lightning、SWELL を主に使ってます。

WP愛だけじゃ生きていけない😂

そよ
そよ
Vektor Passport(ライセンス期間1年)

JIN の表は WordPress 基本のテーブル

Gutenbergのテーブル作成機能はまだまだ発展途上。

JIN には特別にテーブル作成のブロックが用意されていませんので、自然と Gutenberg のテーブルを使うことになります。

Gutenberg のテーブル機能はとても使いにくいです。

  • 見出しが作れない
  • セルの分割や結合ができない
  • 文字の配置が調整できない

などなど。

標準のテーブル機能は、自分でHTMLとCSSを用意しないとカスタマイズができません。

そよ

サイトで紹介している SWELLLigthining G3 Pro Pack では、簡単に表を作成して調整する機能があります。

JIN で表に列見出しと背景色をつける方法

JIN のテーブルに見出し背景色の変更など変更項目はありません。

通常のテーブルの見出しを CSS 付きで作る方法は次のとおりです。

table を挿入する

挿入したい列と行を指定し、表を作成をクリックします。

JIN でテーブルを作る方法1
STEP
1

表示されたテーブルをクリックします。

JIN でテーブルを作る方法2

すると、右側に詳細設定が表示されます。

STEP
2

右側の詳細設定内の「表の設定」から「ヘッダーセクション」のスイッチを入れます

JIN でテーブルを作る方法3
JIN でテーブルを作る方法3-2

すると、一番上のセルに「ヘッダーラベル」という文字が表示されます。

そよ

※上の図のようにヘッダーラベルの下の線が見えない場合があります。その場合は、ヘッダーラベルの下が最初の行になりますので、値を入れてください。

JIN でテーブルを作る方法3-3

なお、左端にヘッダーを表示させるには、少し工夫が必要です。のちほど紹介するテーブルタグ生成サービスを利用するのが良いです。

STEP
3

見出しに背景をつける

詳細設定内の「高度な設定」から「追加CSSクラス」の欄へ、半角英数字で[abc]と入れます(文字列は分かりやすいもので良い)

JIN でテーブルを作る方法4

そよ

ここで一旦記事を保存します。

STEP
4

下の CSS をコピーする

/*table header*/
.abc th {
    background-color:#3facb8;
}
/*table header end*/

※Class を「abc」に設定した場合です。変更した場合は、abc を変更してください。

そよ

コピーしたら、WordPressの管理画面を別タブで開いてください。

STEP
5

WordPress の管理画面 → 外観 → カスタマイズへ移動する

JIN でテーブルを作る方法6
STEP
6

追加CSS をクリックする

JIN でテーブルを作る方法7
STEP
7

先程の CSS を貼り付けて「公開」をクリックする

JIN でテーブルを作る方法9
STEP
8
そよ

これで、別のページに同じテーブルを作っても、列見出しの背景が同じ色になります。

※CSS は、カエテコ管理人のトミセンさんが書いてくれたのを少し変更したものです。トミセンさん、ありがとうございました♪

JIN へテーブルタグを貼り付ける方法

Gutenberg の表作成機能を使っている JIN は、表の挿入が苦手です。

そこで、外部サイトの Table Tag Generator では、マウス操作でテーブルを直感的に作成することができます。

ここでテーブルを作成して、JIN の記事へ貼り付ける方法をご紹介します。

文字を入れたり、CSSを作成してくれるので、とても便利です。

WordPress にテーブルを挿入できる|Table Tag Generator の使い方

このサイトでは、画面上部にある小さなテーブルを操作します。

以下、使い方です。

  1. まず表の大きさ(行と列)を決める。

     ・数字をキーボードで入力する
     ・スピナーをクリックする
     ・マウスホイールを回す
  2. th タグ(見出し)を使いたい場合

     ① 変換したいセルをドラッグして選択
     ②「td ↔ th」 ボタンをクリックしてください。
  3. セルを結合する場合

     ①結合するセルをドラッグして選択
     ②「結合」ボタンをクリック
     ③結合したセルは「分割」ボタンで元に戻せる。
  4. 文字を入力する場合

     ①「文字」 ボタンをクリックして入力モードに。
     ②表に直接入力できます。
     ③入力後、「出力」ボタンをクリック。
  5. CSSを適用する場合
    1. セルに class を設定することができます。
  6. 失敗したら初期化ボタンで元に戻します。
  7. 表が完成したら、サイトにコピペする。
    1. カスタムHTML ブロックを呼び出す
    2. 空欄へHTMLを貼り付ける
そよ

見出しを横の列に作るときも、こちらのジェネレータで作成できます。

縦見出しの例

a a1 a2
b b1 b2
c c1 c2
<table class="abc">
	<tbody>
		<tr>
			<th>a</th>
			<td>a1</td>
			<td>a2</td>
		</tr>
		<tr>
			<th>b</th>
			<td>b1</td>
			<td>b2</td>
		</tr>
		<tr>
			<th>c</th>
			<td>c1</td>
			<td>c2</td>
		</tr>
	</tbody>
</table>

デザインされたテーブルを挿入するなら

相談者

ゼロからテーブルを作るのが大変
かっこよくデザインされたのが使いたい

テーブルに適用するCSSも、同様のサービスを利用することで簡単にかっこいいテーブルを作ることができます♬

こちらのページでGutenbergの表の作り方と一緒に紹介されています。

JIN に HTML と CSS を貼り付けると完成です。

GutenbergのテーブルをCSSで見栄えよく
GutenbergのテーブルをCSSで見栄えよくGutenbergでテーブルを作成する方法と、そのテーブルをCSSで見栄え良くする方法についてご説明します。...

JIN に列見出し付きの表をつくるには

簡単な表なら、Gutenberg のテーブル挿入機能でもよいですが、凝ったテーブルを作りたいなら、外部サイトの例をコピペするもよし、もう少し手を加えたいなら、Table Tag Generator でオリジナルな表を作っても良いですね。

WordPress の使い方や、HTML&CSS に不安がある場合は、書籍や Web 教材で基本だけでも学ぶことをおすすめします。それぞれ基本的な書物が手元にあるだけでも違いますよ。

WordPress と HTMLやCSS を学ぶなら

なにか本を持っておきたいなら、この2冊がオススメです。
書店にも並んでいるはずなので、見かけたら手にとって中を確かめてみてください。

著:Mana
¥1,980 (2022/10/27 04:16時点 | Amazon調べ)

→Amazonレビューをみる

→Amazonレビューをみる

そよ

Mana さんは、このWeb界隈で知らない人はいないくらい有名なWebデザイナーさん。書籍もさらっと丁寧に書かれてて、オススメしやすいです。

Udemy の動画を活用して学ぶ!

HTML や CSS の勉強は Web でもできるのですが、Udemy のような動画講座は、短くステップが区切ってあって、自分がやりたいことを確実に学んでいけることが実感できます。

私もいくつも購入して学んでいますが、通常購入だと高いのでセール期間中(割と多い)に購入することをおすすめします。

Udemy のアカウントを作っておけば、セール情報も得やすいですよ。

この2つの講座は WordPress 講座の中でも高評価。おすすめです。

Vektor Passport(ライセンス期間1年)
Vektor Passport(ライセンス期間1年)