WordPressテーマAffingerでテーブルレイアウトを使うときのためにデザインやショートコードについてまとめます。
ブロックエディターでテーブルを使う場合
ブロックエディターでテーブルを挿入すると、Affingerの場合、テーブルスタイルが6タイプ用意されています。

Afiingerでは「ヘッダーセクション」を有効にすると、スクロール時に上部に固定される仕様になっています。(PC・スマホ共通)
スタイル1 - デフォルト
全ての罫線があるタイプ。デフォルトのテーブルスタイルです。
テーブルヘッダー1 | テーブルヘッダー2 | テーブルヘッダー3 | テーブルヘッダー4 |
---|---|---|---|
セル1-1 | セル1-2 | セル1-3 | セル1-4 |
セル2-1 | セル2-2 | セル2-3 | セル2-4 |
セル3-1 | セル3-2 | セル3-3 | セル3-4 |
セル4-1 | セル4-2 | セル4-3 | セル4-4 |
テーブルフッター1 | テーブルフッター2 | テーブルフッター3 | テーブルフッター4 |
スタイル2 - ストライプ
テーブル行がストライプになるタイプ。縦のラインはありません。
行が多い時にはストライプの方がわかりやすい場合もあります。
テーブルヘッダー1 | テーブルヘッダー2 | テーブルヘッダー3 | テーブルヘッダー4 |
---|---|---|---|
セル1-1 | セル1-2 | セル1-3 | セル1-4 |
セル2-1 | セル2-2 | セル2-3 | セル2-4 |
セル3-1 | セル3-2 | セル3-3 | セル3-4 |
セル4-1 | セル4-2 | セル4-3 | セル4-4 |
テーブルフッター1 | テーブルフッター2 | テーブルフッター3 | テーブルフッター4 |
スタイル3 - スクロール
スマホ(599px以下)で横スクロールが表示されます。テーブルカラム数(列数)が多い時に活躍するレイアウトです。
テーブルヘッダー1 | テーブルヘッダー2 | テーブルヘッダー3 | テーブルヘッダー4 |
---|---|---|---|
セル1-1 | セル1-2 | セル1-3 | セル1-4 |
セル2-1 | セル2-2 | セル2-3 | セル2-4 |
セル3-1 | セル3-2 | セル3-3 | セル3-4 |
セル4-1 | セル4-2 | セル4-3 | セル4-4 |
テーブルフッター1 | テーブルフッター2 | テーブルフッター3 | テーブルフッター4 |
スタイル4 - 中央寄せ
セル内のテキストを天地左右中央揃えにします。
テーブルヘッダー1 | テーブルヘッダー2 | テーブルヘッダー3 | テーブルヘッダー4 |
---|---|---|---|
セル1-1 | セル1-2 | セル1-3 | セル1-4 |
セル2-1 | セル2-2 | セル2-3 セル2-3 | セル2-4 |
セル3-1 | セル3-2 | セル3-3 | セル3-4 |
セル4-1 | セル4-2 | セル4-3 | セル4-4 |
テーブルフッター1 | テーブルフッター2 | テーブルフッター3 | テーブルフッター4 |
スタイル5 - ラインのみ
横ラインのみのテーブルデザイン
テーブルヘッダー1 | テーブルヘッダー2 | テーブルヘッダー3 | テーブルヘッダー4 |
---|---|---|---|
セル1-1 | セル1-2 | セル1-3 | セル1-4 |
セル2-1 | セル2-2 | セル2-3 | セル2-4 |
セル3-1 | セル3-2 | セル3-3 | セル3-4 |
セル4-1 | セル4-2 | セル4-3 | セル4-4 |
テーブルフッター1 | テーブルフッター2 | テーブルフッター3 | テーブルフッター4 |
スタイル6 - ラインのみ2
横ラインのみのテーブルデザインで左カラムもthにしたい時に使えるデザインです。
テーブルヘッダー1 | テーブルヘッダー2 | テーブルヘッダー3 | テーブルヘッダー4 |
---|---|---|---|
セル1-1 | セル1-2 | セル1-3 | セル1-4 |
セル2-1 | セル2-2 | セル2-3 | セル2-4 |
セル3-1 | セル3-2 | セル3-3 | セル3-4 |
セル4-1 | セル4-2 | セル4-3 | セル4-4 |
テーブルフッター1 | テーブルフッター2 | テーブルフッター3 | テーブルフッター4 |
テーブルのデザインカスタマイズ
テーブルのデザインは、カスタマイザーで設定できます。
カスタマイザー>オプション(その他)>table(表)


テーブルのショートコード
クラシックブロックから「タグ」>「レイアウト」>「table」で挿入できる。挿入できるtableは2種類あり。
- table(シンプル)
- table(属性あり)
table(シンプル)
1セルずつ囲みショートコードで作っていくのであまり使いやすいとは言えない感じがします。
[st-table]
[st-tr]
[st-td]テキスト[/st-td]
[/st-tr]
[/st-table]
テキスト |
table(属性あり)
[st-table width="100" bordercolor=""]
[st-tr bgcolor="" color="" fontweight="" center=""]
[st-td width="" bordercolor="" bgcolor="" color="" fontweight="" center="" colspan=""]テキスト[/st-td]
[st-td width="" bordercolor="" bgcolor="" color="" fontweight="" center="" colspan=""]テキスト[/st-td]
[/st-tr]
[/st-table]
テキスト | テキスト |
横スクロール
クラシック段落ブロックでクラシック版のテーブルを挿入できます。
作成したテーブルをdivで囲む。モバイル画面で横スクロールができるようになります。
スタイル>テーブル>横スクロール

<div class="scroll-box">
</div>
プラン | BOX1 | BOX2 | BOX3 | BOX4 | BOX5 | BOX6 | BOX7 | BOX8 |
初期費用 | 3ヶ月以上契約で初期費用無料(1ヶ月契約のみ¥2200) | |||||||
月額費用 (36ヶ月) |
¥528 /月 | ¥968 /月 | ¥1628 /月 | ¥2178 /月 | ¥3278/月 | ¥5478/月 | ¥7678/月 | ¥15378/月 |
カラフルボックスのサーバープランより
この場合の横スクロールは599px以下の場合に表示されます。
PCでも横スクロール
PCでも横スクロールできるようにするには、ラッパーのdivに「pc」クラスを追加します。
<div class="scroll-box pc">
</div>
プラン | BOX1 | BOX2 | BOX3 | BOX4 | BOX5 | BOX6 | BOX7 | BOX8 |
初期費用 | 3ヶ月以上契約で初期費用無料(1ヶ月契約のみ¥2200) | |||||||
月額費用 (36ヶ月) |
¥528 /月 | ¥968 /月 | ¥1628 /月 | ¥2178 /月 | ¥3278/月 | ¥5478/月 | ¥7678/月 | ¥15378/月 |
テーブル - 中央配置
プラン | BOX1 | BOX2 | BOX3 |
初期費用 | 3ヶ月以上契約で初期費用無料(1ヶ月契約のみ¥2200) | ||
月額費用 (36ヶ月) |
¥528 /月 | ¥968 /月 | ¥1628 /月 |
カラフルボックスのサーバープランより