【SWELL】テーブル(表)の作り方完全ガイド｜基本設定を徹底解説

ブログの記事で、商品の比較やサービスの違いを分かりやすく伝えたいときに便利なのが「表（テーブル）」。

WordPressテーマ「SWELL」のテーブルブロックには、WordPress標準にはない便利機能が揃っています。

たとえば、こんな商品比較表もかんたんに作れます。

〇×アイコンや、評価用スター、ボタンなど、表をわかりやすくする機能だけでなく、
背景色の変更、セルの結合、横スクロール表示など、細かいレイアウト調整も思いのままに行えます。

この記事では、テーブルブロックの基本から、「SWELLならではの独自機能」の使い方まで、画像付きでわかりやすく解説します。

SWELLのテーブル機能をマスターすれば、サービス比較表や、ボタン付きの一覧表も自由自在です。

見やすくおしゃれな表を作って、記事の価値をぐんとアップさせていきましょう。

SWELLテーブルブロックの基本的な使い方

まずは、 WordPress標準のテーブルブロックを使って「表本体」を作成します。

SWELLの便利機能やデザイン調整を加えていくベースになります。

テーブルの作りかた（基本の5ステップ）

以上で、基本のテーブルは完成です。

ここからは “見やすく整えるステップ” に進んでいきましょう。

テーブルの見た目を整える基本設定

基本の表が作れたら、次は 見やすさやバランス を整えていきましょう。
右サイドバーの「設定」から、細かな調整ができます。

1. 表のセル幅を固定 / 自動調整する

各列の幅を均等にする設定で、デフォルトでONになっています。
OFFにすると、セルの内容に応じて列幅が自動で調整されます。

設定方法

1. 表を選択した状態で、右サイドバーの「設定」タブを開く
2. 「セル幅を固定」をOFFまたはON

2. ヘッダー・フッターを追加する

表の上部に見出し行（ヘッダーセクション）、下部にまとめ行（フッターセクション）を追加できます。

ヘッダーセクションは、商品名やプラン名など、各列のタイトルを強調したい時、
フッターセクションは、合計金額や平均値、補足説明などを入れる場合にONにします。

設定方法

1. 右サイドバーの「設定」タブを開く
2. 「ヘッダーセクション」をON
3. 必要なら「フッターセクション」もON

3. ヘッダーをカスタマイズする

ヘッダーセクションをONにしたら、「テーブルヘッダー設定」でさらに見た目を整えることができます。

❶ ヘッダーの背景色を変える

デフォルトでメインカラー（サイトのテーマカラー）がつきますが、好きな色に変更できます。

設定方法

1. 右サイドバー最下部の「テーブルヘッダー設定」
2. 「ヘッダーカラー」から色を選択

❷ ヘッダーテキストを中央寄せにする

ヘッダーのテキストをセルの中央に配置できます。

設定方法

1. 右サイドバー最下部の「テーブルヘッダー設定」
2. 「ヘッダーテキストを中央寄せにする」にチェック

❸ ヘッダーを固定表示する

縦に長い表の場合、スクロールしてもヘッダーが常に表示されるように設定できます。
行数が多い比較表など、縦に長いテーブル表の場合は固定しておくと便利です。

設定方法

1. 右サイドバー最下部の「テーブルヘッダー設定」
2. 「ヘッダーの固定設定」から選択
   • 固定しない｜上部に固定（SP(スマホ)のみ）｜上部に固定（SP＆PC）

4. テーブル全体のフォントサイズを変更する

表全体の文字サイズを一括で変更できます。
小さくすれば情報をコンパクトに、大きくすれば読みやすさを重視できます。

設定方法

1. 右サイドバーの「テーブル設定」
2. 「テーブル全体のフォントサイズ」に数値を入力（例:14px、0.9em、1.1remなど）

5. テーブル1列目の横幅を設定する

項目名などが入ることが多い、1番左の列幅を指定できます。
「表のセル幅を固定」のON・OFFではうまく調整できない時に使うと便利です。

設定方法

1. 右サイドバーの「テーブル設定」
2. 「テーブル1列目の横幅」に数値を入力（例:150px、20%など）

6. テーブル全体のテキストを中央揃えにする

表内のすべてのセルのテキストを中央に配置できます。
下図のように、水平方向（左右）と垂直方向（上下）の配置を選べます。

設定方法

1. 右サイドバーの「テーブル設定」
2. 「テーブル全体の中央揃え設定」から選択
   • 指定しない｜垂直・水平｜水平方向だけ｜垂直方向だけ

価格表や評価表など、数値や記号が多い表では「垂直・水平」で中央揃えにするのがおすすめです。

7. 列の最小幅を設定する

各列で最低限維持する幅を指定できます。
文字数が少なく、自動調整では列幅が狭くなりすぎる場合などに使うと便利です。

設定方法

1. 右サイドバーの「テーブル設定」
2. 「各列で最低限維持する幅」から選択
   • オフ｜約10%｜約20%｜約30%

8. スマホで縦並びに表示する

この設定をONにすると、PCでは横に並んでいた列が、スマホでは縦に並んで表示されます。

完成イメージ

PCでの見え方

スマホでの見え方

設定方法

1. 右サイドバーの「テーブル設定」
2. 「スマホで縦並びに表示する」をON

スマホで縦並び表示をONにする場合、
この例のように、元のテーブルの左1列目を強調するとスマホでも見やすくなります。
※設定方法は次の項目で解説します。

9. 左1列目を見出しセルとして強調する

表の1列目を見出しセルに変換し、背景色をつけることができます。
以下の2ステップで設定します。

設定方法

見出しセルを解除する

一度、見出しセルに設定した1列目を、通常のセルに戻したい場合は以下の手順で行います。

1. 右サイドバーの「セルの結合・変換」を開く
2. Shiftキーを押しながら見出しを解除したいセルを選択
3. タグの切り替えの「TD」をクリック

これで、見出しセルとして設定していた1列目が通常のセル（td）に戻り、背景色の強調も解除されます。

10. 横スクロールを有効にする

項目が多くて横に長い表を、横スクロールにすることができます。
特にスマホは画面幅が狭いので、横スクロールをONにすると見やすさがアップします。

右上に「スクロールできます→」というガイドが自動で表示されるので、読者も迷わずに読めます。

設定方法

1. 表を選択
2. 右サイドバーの「横スクロール設定」
3. 横スクロールにするデバイスを選択
   • 横スクロールなし｜SP(スマホ)のみ可能｜PCのみ可能｜SP&PCで可能

テーブル全体の横幅を指定

1列目を固定する

---

これで、基本的な表の作り方はマスターできました！

次の章では、画像やボタンの入れ方など、実践的なテクニックをご紹介していきます。

SWELLだけの便利な機能を使いこなそう

基本設定ができたら、次は表を装飾していきましょう。

SWELLには、WordPress標準にはない便利な機能がたくさんあります。
画像やボタン、〇×アイコンなどを使えば、 見やすくて分かりやすい表が作れます。

よく使うテクニックを紹介していくので、 「使ってみたい！」と思ったものから試してみてくださいね。

1. 画像を入れる（インライン画像）

画像を、表の中に直接入れることができます。
比較表やランキング記事で、商品のビジュアルを見せたい時に便利です。

設定方法

1. 画像を入れたいセルをクリック
2. ツールバーの▼(下向き矢印)をクリック
3. 「インライン画像」を選択
4. 「メディアを選択」または「アップロード」から画像を選択

画像のサイズを変更する方法

デフォルトでは幅150pxで表示されます。
画像サイズを変更したい場合は、以下の手順で幅を調整できます。

1. セル内の画像をマウスでなぞって選択
2. 表示されたウィンドウで「幅」を指定
3. 必要に応じて「代替テキスト（alt）」を入力
4. 「適用」をクリック

2. ボタンを作る（インラインボタン）

「詳細を見る」「購入する」といったリンクを、ボタンにできます。
普通のテキストリンクより目立つので、クリック率がアップします。

設定方法

1. ボタンにしたいテキストを入力する（例:「購入する」）
2. テキストを選択した状態で、ツールバーのSWELLアイコンをクリック
3. 「インラインボタン」をクリック
4. ボタンを選択する
5. ボタンにリンク先（URL）を設定する

3. セルの背景色を変える

特定のセルの背景色を変えて、重要な情報を目立たせることができます。
価格や評価など、注目してほしい部分に使うと効果的です。

設定方法

1. 背景色を変えたいセルを選択
2. ツールバーの「セル背景」をクリック
3. お好みの色を選択

色を使いすぎると逆に見づらくなるので、1〜2箇所に絞るのがコツです。

4. 〇×アイコンを使う

「できる/できない」「あり/なし」を、〇×△のアイコンで視覚的に表現できます。
文字で書くより、パッと見て分かりやすくなります。

設定方法

1. アイコンを入れたいセルを選択
2. ツールバーの「セル背景」アイコンをクリック
3. 「アイコン」タブを選択
4. お好みのアイコン(〇、×、△など)を選択
5. アイコンサイズ（大・中・小）を選択

アイコンを背景に表示する

この設定をONにすると、アイコンに文字を重ねることができます。
デフォルトでONになっているので、文字を重ねたくない場合はOFFにします。

アイコンの色を変更する

SWELLでは、テーブルブロックの〇×アイコンの色をエディター設定から変更できます。

1. WordPress管理画面で「SWELL設定」→「エディター設定」を開く
2. 「カラーセット」タブ→ 最下部の「テーブル設定」に移動
3. 「アイコンカラー」欄で、お好みの色を設定
4. 変更を保存する

設定した色は、以降テーブルブロックで使うアイコンに自動で反映されます。

5. 評価用スターを使う

星マークで評価を表現することで、商品やサービスの比較を直感的に分かりやすくできます。
レビュー表やランキング表に最適です。

設定方法

1. 星マークを入れたいセルを選択
2. ツールバーの「ショートコード」アイコンをクリック
3. 「評価用スター」を選択
4. 星の数を入力する
   • 例：「3/5」→ ★★★☆☆（5つ中3つ）
   • 例：「3/3」→ ★★★（3つ中3つ）

6. セルを結合・分割する

複数のセルを1つにまとめたり、結合したセルを元に戻したり（分割）できます。
見出しや複雑なレイアウト作成に便利です。

設定方法

1. 右サイドバーの設定タブ内「セルの結合・変換」
2. Shiftキーを押しながら結合したいセルを選択
3. 「セルを結合」をクリック

セルを分割する

結合したセルを元に戻したい場合は、同じ場所にある「セルを分割」をクリックすればOKです。

セルが崩れたとき

WordPress側のバグで、セル結合をすると表が崩れることがあります。
その場合は、「崩れたセルを修復する」ボタンをクリックしてみてください。

7. テーブル内書式を使う

SWELLでは、セルごとに文字や文章の見せ方を細かく調整できます。

設定方法

1. 設定したいテキストや画像を選択
2. ツールバーの「テーブル内書式」アイコンをクリック
3. 「折り返し禁止」「リスト風」「テキスト中央揃え」の中から必要なものを選択

1.折り返し禁止

セル内の文字を途中で改行せず、1行に表示したい場合に使えます。
横幅が狭いスマホでもレイアウトを崩さず見やすく表示できます。

2.リスト風表示

セル内で複数の情報をリスト風（箇条書き）にできます。
アイコンも使えるので、製品の特徴や対応項目など、一覧性を高めたい場合に便利です。

1行ずつテキストを選択して、「テーブル内書式」から「リスト風表示」を選び、アイコンを設定します。

3.テキスト中央揃え

セル内の画像やテキストを中央に揃えられます。
特定の列や行にだけ適用して見やすくしたい場合にも便利です。

---

ここまで、基本設定からSWELL独自機能まで、 たくさんのテクニックを紹介してきました。
これらを使いこなせば、どんな表でも作れるようになります。

「便利そうだけど、毎回設定するのは面倒かも…」
そう感じた方は、次にご紹介するテンプレート機能を活用してみてください。

時短したい人必見！テンプレートを活用

SWELLには、あらかじめデザインされた5種類のテンプレートが用意されています。

選ぶだけで、プロ並みの表が一瞬で完成します。
先ほどご紹介した「基本テクニック」を使えば、 あなた好みにカスタマイズすることもできますよ。

どんなテンプレートがあるの？

1. メリット・デメリット

2. 料金プラン比較表

3. 商品比較表1

4. 商品比較表2

5. 商品比較表3

それぞれ特徴が異なるので、見せたい内容に合わせて選んでみてください。
テンプレートからカスタマイズするだけで、ぐっと時短になります。

テンプレートの使い方

SWELLの「ブロックパターン」という機能に、あらかじめデザインされた表が登録されています。

設定方法

1. 記事編集画面で「+」ボタンをクリック
2. 検索窓に「テーブル」と入力
3. 好きなデザインをクリック

たったこれだけで、おしゃれな表が記事に挿入されます。

あとは中身を自分の内容に書き換えるだけ。
デザインに悩む時間がゼロになるので、時短したい方には特におすすめです。

まとめ：SWELLなら、初心者でも見やすい表が簡単に作れる

今回は、SWELLでのテーブルの作り方を基本から徹底解説してきました。

○×アイコンやインラインボタン、横スクロール機能など、 SWELLならではの便利な機能を活用すれば、 あなたのブログがもっと魅力的になるはずです。

ぜひ今日から実践して、読者に喜ばれる記事作りを楽しんでくださいね！