SWELLの表は、WordPress標準の「テーブル」ブロックにSWELL独自の装飾が乗っかった作りになっています。結論、ヘッダーの色やストライプ、スマホ用の横スクロールまで、コードなしで設定できます。つまずきやすいのは表の幅とスマホでのはみ出し。ここを押さえれば、比較表も料金表もきれいに作れます。
ブログ歴6年・SWELL歴5年、WordPressの自作プラグインも販売している僕が、基本の表からアフィリエイトで使う比較表まで解説します。
- 基本の表（テーブル）の作り方
- 色・幅・スマホ横スクロールの設定
- 比較表・料金表をきれいに作るコツ
表は「スマホで崩れる」相談が一番多いです。先に横スクロールの設定を知っておくと安心ですよ。
目次
SWELLの表は標準のテーブルブロックで作れる
SWELLでは、WordPress標準の「テーブル」ブロックを使って表を作ります。SWELLがこのブロックを拡張していて、ヘッダーの色・ストライプ（縞模様）・横スクロール・見出し列などをブロック設定から変更できます。専用のプラグインは不要です。
基本の表（テーブル）の作り方
編集画面でブロック追加（＋）から「テーブル」を選びます。最初に列数・行数を指定して作成します。
ブロック設定で「ヘッダーセクション」をオンにすると、1行目が見出しになります。比較項目を入れる行です。
各セルに文字を入力。行や列の追加・削除はツールバーから行えます。
画像挿入：テーブルブロックの編集画面のスクリーンショット
表のデザイン・色を変える
テーブルを選択すると、右側のブロック設定で見た目を変えられます。よく使うのは次の項目です。
- ヘッダーの背景色・文字色：サイトのメインカラーに合わせる
- ストライプ（縞模様）：行ごとに色を変えて見やすく
- 見出し列：最左列を見出しとして装飾（縦横の比較表向き）
ヘッダー色を見出しデザインと揃えると、記事全体に統一感が出ます。
表の幅・スマホの横スクロール対応
列が多い表は、スマホで見ると文字がつぶれたり、はみ出したりします。SWELLでは横スクロールを設定すれば解決します。
- 横スクロールの最小幅を指定する（比較表なら900px前後が目安）
- 幅を超えるとスマホでは自動で横スクロールになり、レイアウトが崩れない
- スクロールヒントをオンにすると「横にスクロールできる」と読者に伝わる
比較表・料金表をきれいに作るコツ
アフィリエイトでよく使う比較表は、ひと工夫で「読みやすさ」と「クリック率」が変わります。
- ◎○△×のアイコンを使って、優劣をひと目で伝える
- 左端に「商品名」、上に「比較項目」を置く縦横レイアウトにする
- 推したい商品の列をさりげなく目立たせる（背景色など）
- 項目を詰め込みすぎない（5〜7項目が見やすい）
SWELLのテーブルでも◎○△×のセルアイコンが使えますが、「ランキング形式の比較表」や「ボタン付きの売れる比較表」まで作り込むなら、専用のブロックプラグインを使うほうが速く、見栄えも段違いです。僕はSWELLでも使えるブロック型の比較表プラグインを自作・販売しています。標準テーブルで物足りなくなったらのぞいてみてください。
まずは標準テーブルで十分です。記事数が増えて「比較表を量産したい」となったら、専用ブロックを検討するくらいでOKです。
よくある質問（FAQ）
- 表がスマホではみ出します。どうすればいいですか？
テーブルのブロック設定で横スクロールの最小幅（例：900px）を指定してください。幅を超えるとスマホで自動的に横スクロールになり、レイアウトが崩れなくなります。
- 列の幅を個別に変えられますか？
「固定幅テーブル」をオンにすると列幅が均等になります。特定の列だけ変えたい場合は、追加CSSでセル幅を指定する方法もありますが、まずは固定幅でバランスを見るのがおすすめです。
- 比較表にチェックマーク（◎○△×）は入れられますか？
SWELLのテーブルはセルにアイコンを表示できます。◎○△×で優劣を示すと、読者がひと目で比較できて便利です。
まとめ：表は「ヘッダー色」と「横スクロール」で決まる
SWELLの表は、標準のテーブルブロックでヘッダー色・ストライプ・横スクロールまで設定できます。スマホ対策の横スクロールさえ押さえれば、比較表も料金表も崩れません。アフィリエイトの比較表を量産したくなったら、専用ブロックも検討してみてください。他のカスタマイズは、使い方ガイドの早見表から逆引きで進められます。
これからSWELLを導入する方へ。表をはじめ、装飾の多くがコードなしで整うのがSWELLの強みです。買い切りで複数サイトに使えます。
