JIN でいい感じのテーブル作れないの？
JINはWordPressの表（テーブル）作成機能を使っているので使いにくくて困ります。
- JIN で「見出し」付きのテーブルのつくり方
- Web サービスを使ったテーブルのつくり方
さらに、予めデザインされたテーブルを使えるサイトもご紹介しています。HTML と CSS を貼り付けるだけで格好いいのができます。
プラグインを入れたら解決するんだけど、ただでさえ🐢のJINさんにはあまり負担をかけたくない。
少しだけ HTML と CSS がわからないといけないけれど、JIN でテーブルを作る方法をご紹介します。
プラグインを購入する余裕があるのでしたら、SIMPLE BLOG DESIGN をオススメします。テーマごと変更するなら、有料テーマ SWELL が使いやすくて良いでしょう。
WordPress のプラグインとテーマ、ブログ記事作りに役立つ記事を書いてます。
テーマは、Cocoon、JIN、Lightning、SWELL を主に使ってます。
WP愛だけじゃ生きていけない😂
JIN の表は WordPress 基本のテーブル
Gutenbergのテーブル作成機能はまだまだ発展途上。
JIN には特別にテーブル作成のブロックが用意されていませんので、自然と Gutenberg のテーブルを使うことになります。
Gutenberg のテーブル機能はとても使いにくいです。
- 見出しが作れない
- セルの分割や結合ができない
- 文字の配置が調整できない
などなど。
標準のテーブル機能は、自分でHTMLとCSSを用意しないとカスタマイズができません。
サイトで紹介している SWELL や Ligthining G3 Pro Pack では、簡単に表を作成して調整する機能があります。
JIN で表に列見出しと背景色をつける方法
JIN のテーブルに見出し背景色の変更など変更項目はありません。
通常のテーブルの見出しを CSS 付きで作る方法は次のとおりです。
table を挿入する
挿入したい列と行を指定し、表を作成をクリックします。
表示されたテーブルをクリックします。
すると、右側に詳細設定が表示されます。
右側の詳細設定内の「表の設定」から「ヘッダーセクション」のスイッチを入れます
すると、一番上のセルに「ヘッダーラベル」という文字が表示されます。
※上の図のようにヘッダーラベルの下の線が見えない場合があります。その場合は、ヘッダーラベルの下が最初の行になりますので、値を入れてください。
なお、左端にヘッダーを表示させるには、少し工夫が必要です。のちほど紹介するテーブルタグ生成サービスを利用するのが良いです。
見出しに背景をつける
詳細設定内の「高度な設定」から「追加CSSクラス」の欄へ、半角英数字で[abc]と入れます（文字列は分かりやすいもので良い）
ここで一旦記事を保存します。
下の CSS をコピーする
/*table header*/
.abc th {
background-color:#3facb8;
}
/*table header end*/※Class を「abc」に設定した場合です。変更した場合は、abc を変更してください。
コピーしたら、WordPressの管理画面を別タブで開いてください。
WordPress の管理画面 → 外観 → カスタマイズへ移動する
追加CSS をクリックする
先程の CSS を貼り付けて「公開」をクリックする
これで、別のページに同じテーブルを作っても、列見出しの背景が同じ色になります。
JIN へテーブルタグを貼り付ける方法
Gutenberg の表作成機能を使っている JIN は、表の挿入が苦手です。
そこで、外部サイトの Table Tag Generator では、マウス操作でテーブルを直感的に作成することができます。
ここでテーブルを作成して、JIN の記事へ貼り付ける方法をご紹介します。
文字を入れたり、CSSを作成してくれるので、とても便利です。
WordPress にテーブルを挿入できる｜Table Tag Generator の使い方
このサイトでは、画面上部にある小さなテーブルを操作します。
以下、使い方です。
- まず表の大きさ（行と列）を決める。
・数字をキーボードで入力する
・スピナーをクリックする
・マウスホイールを回す - th タグ(見出し)を使いたい場合
① 変換したいセルをドラッグして選択
②「td ↔ th」 ボタンをクリックしてください。 - セルを結合する場合
①結合するセルをドラッグして選択
②「結合」ボタンをクリック
③結合したセルは「分割」ボタンで元に戻せる。 - 文字を入力する場合
①「文字」 ボタンをクリックして入力モードに。
②表に直接入力できます。
③入力後、「出力」ボタンをクリック。 - CSSを適用する場合
- セルに class を設定することができます。
- 失敗したら初期化ボタンで元に戻します。
- 表が完成したら、サイトにコピペする。
- カスタムHTML ブロックを呼び出す
- 空欄へ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 を貼り付けると完成です。
JIN に列見出し付きの表をつくるには
簡単な表なら、Gutenberg のテーブル挿入機能でもよいですが、凝ったテーブルを作りたいなら、外部サイトの例をコピペするもよし、もう少し手を加えたいなら、Table Tag Generator でオリジナルな表を作っても良いですね。
WordPress の使い方や、HTML＆CSS に不安がある場合は、書籍や Web 教材で基本だけでも学ぶことをおすすめします。それぞれ基本的な書物が手元にあるだけでも違いますよ。
WordPress と HTMLやCSS を学ぶなら
なにか本を持っておきたいなら、この２冊がオススメです。
書店にも並んでいるはずなので、見かけたら手にとって中を確かめてみてください。
ポチップ
Mana さんは、このWeb界隈で知らない人はいないくらい有名なWebデザイナーさん。書籍もさらっと丁寧に書かれてて、オススメしやすいです。
Udemy の動画を活用して学ぶ！
HTML や CSS の勉強は Web でもできるのですが、Udemy のような動画講座は、短くステップが区切ってあって、自分がやりたいことを確実に学んでいけることが実感できます。
私もいくつも購入して学んでいますが、通常購入だと高いのでセール期間中（割と多い）に購入することをおすすめします。
Udemy のアカウントを作っておけば、セール情報も得やすいですよ。
この２つの講座は WordPress 講座の中でも高評価。おすすめです。
