SWELLのテーブルをカスタマイズ｜表のデザインを変える貼るだけCSS6種

2026年10月16日

比較表や料金表、仕様の一覧など、記事の中で表を使う場面は多くあります。SWELLのテーブルブロックはスタイルを4種類から選べますが、線の色や見出しの形を変えるにはCSSを足します。この記事では、「追加CSS」に貼るだけで使える表のデザインを6種類、表示画像とコピーできるCSSで紹介します。

表のスタイル（デフォルト・ストライプ・シンプル・二重線）のどれを選んでいても、見た目は画像と同じになります。貼る場所は、WordPressの管理画面の「外観」→「カスタマイズ」→「追加CSS」です。

CSSを貼る場所は「外観」→「カスタマイズ」→「追加CSS」

WordPressの管理画面で「外観」→「カスタマイズ」を開くと、左側にメニューが並びます。いちばん下にある「追加CSS」を押します。

「外観」→「カスタマイズ」を開くと、メニューのいちばん下に「追加CSS」があります

「追加CSS」を開くと、CSSを書く欄が出てきます。すでに何か書いてある場合は消さずに、いちばん下に貼ってください。

貼った内容は右側のプレビューで確かめられます。左上の「公開」ボタンを押すと、サイトを見に来た人の画面にも反映されます。

CSSを貼るときの注意点

表のスタイルは変えなくてよい

テーブルブロックには、右側の設定で選べる「スタイル」（デフォルト・ストライプ・シンプル・二重線）があります。この記事のCSSは、スタイルで付く線や色をそろえてから、新しいデザインを描きます。どのスタイルを選んでいても、見た目は画像と同じになります。

SWELLのテーブルの機能（横スクロール・1列目の固定・ヘッダーの固定など）を使っている表は、右側のプレビューで表示を見てから「公開」を押してください。

貼るデザインは1つだけ

デザインは1つだけ選んで貼ります。2つ重ねて貼ると、指定がぶつかって見た目が崩れます。

追加CSSに貼ったデザインは、サイトの中のすべての記事と固定ページの表に効きます。表の中身は変わりません。

色の変え方

どのCSSも、先頭近くにある次の1か所で色が決まります。

  --tbl-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */

var(--color_main) は、SWELLのカスタマイザーで決めた「メインカラー」のことです。そのままにしておけば、サイトの色に合わせて変わります。
好きな色にしたいときは、var(--color_main) を #2b7a78 のような色の番号に書きかえます。

SWELLのテーブルのCSSデザイン6種

画像の表は、見出しの行が1行、中身が4行です。

標準（CSSを足していない状態）

SWELLのテーブル：CSSを足していない状態（スタイル「デフォルト」） — CSSを足していない状態（スタイル「デフォルト」）

CSSを貼る前の、スタイル「デフォルト」の表です。見出しの行はメインカラーで、すべてのセルが灰色の線で囲まれています。

1. 行ごとに色を変えたデザイン（ストライプ）

SWELLのテーブル：1行おきにうすい色をしいたデザイン — 行ごとに色（ストライプ）

線をなくし、1行おきにうすい色をしいた表のデザインです。行が多い表でも、横に目で追いやすくなります。

/* テーブル：行ごとに色（ストライプ） */
.post_content .wp-block-table {
  --tbl-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  border: none;
}

/* SWELLとテーブルのスタイル（ストライプ・二重線など）で付く線や色をそろえる */
.post_content .wp-block-table table {
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  box-shadow: none;
}
.post_content .wp-block-table thead {
  border: none;
}
.post_content .wp-block-table th,
.post_content .wp-block-table td {
  border: none !important;
  padding: 0.7em 1em;
}

/* 見出しの行：濃い色に白い文字 */
.post_content .wp-block-table thead th {
  background: var(--tbl-color);
  color: #fff;
}

/* 1行おきに、うすい色をしく */
.post_content .wp-block-table tbody td,
.post_content .wp-block-table tbody th {
  background: var(--color_content_bg, #fff);
}
.post_content .wp-block-table tbody tr:nth-child(even) td,
.post_content .wp-block-table tbody tr:nth-child(even) th {
  background: color-mix(in srgb, var(--tbl-color) 10%, #fff);
}

2. 横線だけのデザイン

SWELLのテーブル：縦の線をなくし、行の下にだけ線を引いたデザイン — 横線だけ

縦の線と見出しの背景をなくし、行の下にだけ線を引いた表のデザインです。見出しの行の下だけ、色の付いた太い線にします。文章になじむ、すっきりした見た目になります。

/* テーブル：横線だけ */
.post_content .wp-block-table {
  --tbl-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  border: none;
}

/* SWELLとテーブルのスタイル（ストライプ・二重線など）で付く線や色をそろえる */
.post_content .wp-block-table table {
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  box-shadow: none;
}
.post_content .wp-block-table thead {
  border: none;
}
/* 縦の線をなくし、行の下にだけ線を引く */
.post_content .wp-block-table th,
.post_content .wp-block-table td {
  background: var(--color_content_bg, #fff);
  border: none !important;
  border-bottom: 1px solid #ddd !important;
  padding: 0.8em 0.6em;
}

/* 見出しの行：色の付いた太い下線 */
.post_content .wp-block-table thead th {
  background: none;
  color: inherit;
  border-bottom: 2px solid var(--tbl-color) !important;
}

3. 1列目に色を付けたデザイン

1列目（項目名）に、うすい色と太字を付けた表のデザインです。「項目名と説明」のような2列の表に向いています。

/* テーブル：1列目に色 */
.post_content .wp-block-table {
  --tbl-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  border: none;
}

/* SWELLとテーブルのスタイル（ストライプ・二重線など）で付く線や色をそろえる */
.post_content .wp-block-table table {
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  box-shadow: none;
}
.post_content .wp-block-table thead {
  border: none;
}
.post_content .wp-block-table th,
.post_content .wp-block-table td {
  background: var(--color_content_bg, #fff);
  border: none !important;
  border-bottom: 1px solid #e3e3e3 !important;
  padding: 0.7em 1em;
}

/* 見出しの行 */
.post_content .wp-block-table thead th {
  background: var(--tbl-color);
  color: #fff;
  border-bottom: none !important;
}

/* 1列目（項目名）に、うすい色と太字 */
.post_content .wp-block-table tbody tr > :first-child {
  background: color-mix(in srgb, var(--tbl-color) 12%, #fff);
  font-weight: 700;
}

4. タイル風のデザイン

セルのあいだに白いすき間をあけ、角を少し丸めた表のデザインです。1つひとつのセルが、タイルのように並びます。

/* テーブル：タイル風 */
.post_content .wp-block-table {
  --tbl-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  border: none;
}

/* SWELLとテーブルのスタイル（ストライプ・二重線など）で付く線や色をそろえる */
.post_content .wp-block-table table {
  border: none;
  border-collapse: separate;
  border-spacing: 4px;
  box-shadow: none;
}
.post_content .wp-block-table thead {
  border: none;
}
/* セルのあいだに白いすき間をあけ、角を少し丸める */
.post_content .wp-block-table th,
.post_content .wp-block-table td {
  border: none !important;
  border-radius: 4px;
  padding: 0.7em 1em;
}
/* ストライプのスタイルを選んでいても、すき間に行の色が出ないようにする */
.post_content .wp-block-table tbody tr:nth-child(n) {
  background: none;
}
.post_content .wp-block-table thead th {
  background: var(--tbl-color);
  color: #fff;
}
.post_content .wp-block-table tbody td,
.post_content .wp-block-table tbody th {
  background: color-mix(in srgb, var(--tbl-color) 10%, #fff);
}

5. 外枠を角丸にしたデザイン

表の外枠の角を丸めたデザインです。内側の線は、行の下と列のあいだにだけ引きます。

/* テーブル：角丸の外枠 */
.post_content .wp-block-table {
  --tbl-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
}

/* SWELLとテーブルのスタイル（ストライプ・二重線など）で付く線や色をそろえる */
.post_content .wp-block-table table {
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  box-shadow: none;
}
.post_content .wp-block-table thead {
  border: none;
}

/* 内側の線：行の下と、列のあいだ */
.post_content .wp-block-table th,
.post_content .wp-block-table td {
  background: var(--color_content_bg, #fff);
  border: none !important;
  border-bottom: 1px solid #ddd !important;
  border-right: 1px solid #ddd !important;
  padding: 0.7em 1em;
}
.post_content .wp-block-table tr > :last-child {
  border-right: none !important;
}
.post_content .wp-block-table tbody tr:last-child > * {
  border-bottom: none !important;
}

/* ストライプのスタイルを選んでいても、行の色が出ないようにする */
.post_content .wp-block-table tbody tr:nth-child(n) {
  background: none;
}

/* 見出しの行 */
.post_content .wp-block-table thead th {
  background: var(--tbl-color);
  color: #fff;
}

6. 見出しに三角を付けたデザイン

SWELLのテーブル：見出しの行の下に下向きの三角を付けたデザイン — 見出しに三角

見出しの行の下に、下向きの三角を付けた表のデザインです。見出しから中身へ、目線が自然に下りていきます。

/* テーブル：見出しに三角 */
.post_content .wp-block-table {
  --tbl-color: var(--color_main); /* 色を変えるときはここだけ書きかえる */
  border: none;
}

/* SWELLとテーブルのスタイル（ストライプ・二重線など）で付く線や色をそろえる */
.post_content .wp-block-table table {
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  box-shadow: none;
}
.post_content .wp-block-table thead {
  border: none;
}
.post_content .wp-block-table th,
.post_content .wp-block-table td {
  background: var(--color_content_bg, #fff);
  border: none !important;
  border-bottom: 1px solid #e3e3e3 !important;
  padding: 0.7em 1em;
}

/* 見出しの行：濃い色に白い文字 */
.post_content .wp-block-table thead th {
  background: var(--tbl-color);
  color: #fff;
  border-bottom: none !important;
  z-index: 1; /* 三角が下の行に隠れないように */
}

/* 見出しの下に、下向きの三角を付ける */
.post_content .wp-block-table thead th::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 8px solid transparent;
  border-top-color: var(--tbl-color);
  transform: translateX(-50%);
}

/* 三角と文字が重ならないよう、最初の行の上をあける */
.post_content .wp-block-table tbody tr:first-child > * {
  padding-top: 1.1em;
}

CSSが反映されないときの確認方法

貼ったのに見た目が変わらないときは、次の順に確かめてください。

確かめること	どうするか
「公開」を押したか	追加CSSの画面で、左上のボタンが「公開済み」になっているか見る
テーブルブロックで作った表か	表がテーブルブロックで作られているか、ブロックの名前を見る
古い表示が残っていないか（キャッシュ）	ブラウザで再読み込みし、キャッシュのプラグインがあればその画面でキャッシュを消す
ほかのCSSとぶつかっていないか	デザインを2つ貼っていないか、前に貼った表のCSSが残っていないか見る

まとめ

SWELLの表は、「追加CSS」にCSSを貼って「公開」を押すと、サイト全体でデザインが変わります。表のスタイルは、変えなくても画像と同じ見た目になります。

デザインは1つだけ選んで貼る
色は先頭の --tbl-color の1か所で変える
反映されないときは「公開」・ブロックの種類・キャッシュ・ほかのCSSの順に確かめる

見出しのデザインも変えたいときは、SWELLの見出しをカスタマイズする方法に同じ形でCSSをまとめています。まずは右側のプレビューで2〜3種類を貼りかえて見比べ、記事に合うものが決まったら「公開」を押してください。

よくある質問

Q. 元の見た目に戻すにはどうしますか

追加CSSから、貼ったCSSを消して「公開」を押します。表のスタイルで選んでいる見た目に戻ります。

Q. CSSに !important が付いているのはなぜですか

表のスタイル「ストライプ」は、セルの線を、ほかの指定より優先させる印（!important）付きで消しています。そのままだと、ストライプを選んだ表ではこの記事のデザインの線も消えてしまうため、線の指定にも !important を付けています。消すとスタイルによって見た目が変わるので、そのまま貼ってください。

Q. 1つの表だけデザインを変えられますか

できます。その表のブロックを選び、右側の「高度な設定」の「追加CSSクラス」に my-table のような名前を入力します。CSSの .post_content .wp-block-table を .post_content .wp-block-table.my-table に書きかえると、その名前を付けた表だけに効きます。