ブログ記事で商品比較や料金表を掲載するなら、テーブル（表）は欠かせません。
「商品比較表を作りたい」
「料金表を見やすく表示したい」
「スマホでも見やすい表を作りたい」
と考える方も多いのではないでしょうか。
AFFINGER7では簡単にイメージ通りの表を作成することができます。
実際、比較表があるだけで読者は情報を整理しやすくなり、記事の信頼性も高まります。
この記事では、AFFINGER7でテーブルを作成する方法から、見やすいデザインにするコツ、スマホ対応の設定まで初心者向けにわかりやすく解説しています。
※ この記事はAFFINGER6時代に作成した内容をAFFINGER7対応版として更新しています。
AFFINGER7でテーブルを作るメリット
まずはテーブルを活用するメリットから見ていきましょう。
情報を一目で比較できる
文章だけでは伝わりにくい情報も、表にすることで瞬時に理解できます。
例えばWordPressテーマの比較なら、
| テーマ | 価格 | 初心者向け |
|---|---|---|
| AFFINGER7 | ||
| SWELL | ||
| TCD |
このように整理できます。
読者の離脱を防げる
必要な情報を探しやすくなるため、読者のストレスを減らせます。
アフィリエイト記事と相性が良い
比較記事やランキング記事では、表を使うことで商品の違いを分かりやすく伝えられます。
この記事ではAFFINGER6でテーブル（表）を作成する方法を初心者向けに解説しています。また、AFFINGER6を使用していない方でも表の作成方法がわからない初心者の方にもお勧めの記事になっています。
AFFINGER7でテーブルを作成する方法
操作自体はとても簡単です。
テーブル（表）を挿入したい場所でブロックツールから「テーブル」を選択します。
作成したい表のカラム数（列数）と行数を指定して、「表を作成」をクリックすれば表が作成できます。
例えば、カラム数が２で行数が２のテーブル（表）を作成してみると下のようになります。
今は空欄ですが、テーブル（表）の中に文字や数字を入力して完成させていくわけです。
ちなみに、テーブル（表）を作成すると「キャプションを追加」と入力できる欄も一緒に表示されると思います。
キャプションとは簡単な説明文のことで、ここに表の説明文を入力します。（入力しない場合は空白です）
行や列を挿入・削除する方法
テーブル（表）に文字や数字を入力するのは感覚的にできると思うので、表の列や行数を増やしたり削除する方法を説明します。
テーブル（表）を作成して上部メニューの「表の編集」をクリックすると行や列の挿入や削除するメニューを選択することができます。
例えば、削除したい行をクリックして「行を削除」を選択すれば行を削除できます。
初心者でも直感で操作可能です。
表のセル幅を固定する方法
作成した表を選択して右の「表の設定」からセル幅を固定することができます。
セル幅を固定するとこんな感じになります。
| 商品名 | 価格 | 販売会社 |
| お菓子A | １００円 | AAAAAAAAAAAA社 |
| お菓子B | ２００円 | BBBBBBBBBBBBB社 |
セル幅を固定しない状態だと下のようになります。
| 商品名 | 価格 | 販売会社 |
| お菓子A | １００円 | AAAAAAAAAAAA社 |
| お菓子B | ２００円 | BBBBBBBBBBBBB社 |
ヘッダーセクションやフッターセクションを追加する
ヘッダーセクションとは１行目に項目を入力するような行を追加する機能で、フッターセクションは表の最後に追加できる機能です。
フッターセクションはあまり使用しないですが、ヘッダーセクションはテーマによってはヘッダーセクションだけ色を変更できたりもするのでよく設定します。
ヘッダーセクションを設定して表を作成した感じが下のようになります。
AFFINGER7ではヘッダーセクションの色などを変更できるので、こんな感じにすることができます。
| 商品名 | 価格 | 販売会社 |
|---|---|---|
| お菓子A | １００円 | A社 |
| お菓子B | ２００円 | B社 |
ここまでがワードプレスの初期機能で可能なテーブル（表）を作成する方法です。
AFFINGER7のテーブル機能活用術
AFFINGER7でテーブル編集の自由度が高く、しかも操作が簡単です。
例えば、次のようなことが簡単にできます。
- 表のスタイル変更
- セルの背景色を変更
- セルの結合・分割
- アイコンの挿入
表のスタイル変更
表を選択して右画面の設定ツールの「スタイル」から表のデザインを簡単に変更することができます。
変更できるスタイルは６種類です。
- デフォルト
- ストライプ
- 中央寄せ
- ラインなし
- ラインのみ
- ラインのみ２
デフォルト
何も変更しないスタイルです。
試しにデフォルトで表を作成してみるとこんな感じになります。
| 商品名 | 価格 | 販売会社 |
| お菓子A | １００円 | A社 |
| お菓子B | ２００円 | B社 |
ストライプ
行ごとに背景色が表示されます。
| 商品名 | 価格 | 販売会社 |
| お菓子A | １００円 | A社 |
| お菓子B | ２００円 | B社 |
中央寄せ
セルのテキストが中央に表示されます。
| 商品名 | 価格 | 販売会社 |
| お菓子A | １００円 | A社 |
| お菓子B | ２００円 | B社 |
ラインなし
| 商品名 | 価格 | 販売会社 |
| お菓子A | １００円 | A社 |
| お菓子B | ２００円 | B社 |
ラインのみ
文字通りラインのみの表です。
| 商品名 | 価格 | 販売会社 |
| お菓子A | １００円 | A社 |
| お菓子B | ２００円 | B社 |
ラインのみ2
１列目だけ背景色が表示されます。
| 商品名 | 価格 | 販売会社 |
| お菓子A | １００円 | A社 |
| お菓子B | ２００円 | B社 |
セルの背景色を変更
作成したセルの背景色を簡単に変更可能です。
背景色を変更したいセルをクリックし、ツールバーの「セル色設定」で設定できます。
セルの背景色を変更するとこんな感じです。
参考：デフォルトの背景色等を変更する方法
テーブルを作成した際のデフォルト状態のボーダー色やヘッダーセクションの背景色などを設定しておくことができます。
設定手順は次のようになります。
WordPresメニューから「外観」→「カスタマイズ」を選択します。
「オプション（その他）」→「table（表）」を選択します。
次の項目のデフォルトカラーを設定可能です。
- 表のボーダー色
- 偶数行のセルの色
- 縦一列目の背景色
- 縦一列目の文字色
- ヘッダーセクションの背景色
- ヘッダーセクションの文字色
変更したい項目の色を設定したら「公開」をクリックすれば反映されます。
セルの結合・分割
AFFINGER7ではセルの結合・分割が可能で、より自由な表を作成することができます。
セルの結合をするとこんな感じです。
| 商品名 | 内容 | 価格 |
|---|---|---|
| セット商品A | 商品① | 税込み〇〇円 |
| 商品② | ||
| 商品③ |
アイコンの挿入
AFFINGER7では表にアイコンを簡単に表示させることができます。
表示させるにはセルをクリックし、ツールバーの「セルアイコン設定」で設定可能です。
アイコンを表示させるとこんな感じです。
| 項目① | 項目② | 項目③ | |
|---|---|---|---|
| 商品A | |||
| 商品B |
また、ショートコードを利用すれば100種類以上の他のアイコンも表示させることができます。
AFFINGER7のマニュアルからアイコンのクラス一覧と表示させる方法も確認できますので確認してみてくださいね。
また、AFFINGER7で使用できるアイコン一覧はこちらからも確認できます。
スマホでも見やすいテーブルを作る方法
スマホのみの閲覧幅を設定しておく
スマホは画面が小さい為、横スクロールで表が見れるようにすると表が見やすくなります。
横スクロールで表示させる為にスマホのみの閲覧幅を設定しておきましょう。
また、改行しないタブを有効化することによっても見え方は変わってきます。
表の規模にもよるので一概にこの設定が良いとは言えませんので、実際のスマホ表示画面を確認して見やすい設定にすることがお勧めです。
列数を増やしすぎない
スマホ表示を考えると、3〜5列程度に収めるのがおすすめです。
重要項目を左側に配置する
スクロールした場合でも最初に見えるよう、
- 商品名
- 項目名
は左側に配置しましょう。
まとめ
AFFINGER6からAFFINGER7への移行した際にテーブル機能が大幅に使いやすくなっていることに驚きました。
とても自由度が高く簡単に思い通りのテーブルを作成することができます。
テーブルを使いこなせれば、記事の完成度も読者の満足度も収益も大きく変わります。
比較記事との相性が非常に良いため、レビュー記事やランキング記事では積極的に活用してみてくださいね。
\\ 収益化に強い圧倒的人気テーマ！//
AFFINGER7がついにリリース！
AFFINGER6から更に機能がパワーアップ！
※ AFFINGER6は現在、AFFINGER7へと移行となりました。