Affinger レスポンシブ対応のテーブルレイアウト

WordPressテーマAffingerでテーブルレイアウトを使うときのためにデザインやショートコードについてまとめます。

ブロックエディターでテーブルを使う場合

ブロックエディターでテーブルを挿入すると、Affingerの場合、テーブルスタイルが6タイプ用意されています。

Afiingerでは「ヘッダーセクション」を有効にすると、スクロール時に上部に固定される仕様になっています。（PC・スマホ共通）

スタイル1 - デフォルト

全ての罫線があるタイプ。デフォルトのテーブルスタイルです。

スタイル2 - ストライプ

テーブル行がストライプになるタイプ。縦のラインはありません。

行が多い時にはストライプの方がわかりやすい場合もあります。

スタイル3 - スクロール

スマホ（599px以下）で横スクロールが表示されます。テーブルカラム数（列数）が多い時に活躍するレイアウトです。

スタイル4 - 中央寄せ

セル内のテキストを天地左右中央揃えにします。

スタイル5 - ラインのみ

横ラインのみのテーブルデザイン

スタイル6 - ラインのみ2

横ラインのみのテーブルデザインで左カラムもthにしたい時に使えるデザインです。

テーブルのデザインカスタマイズ

テーブルのデザインは、カスタマイザーで設定できます。

カスタマイザー＞オプション（その他）＞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>

カラフルボックスのサーバープランより

この場合の横スクロールは599px以下の場合に表示されます。

PCでも横スクロール

PCでも横スクロールできるようにするには、ラッパーのdivに「pc」クラスを追加します。

<div class="scroll-box pc">

</div>

テーブル - 中央配置

カラフルボックスのサーバープランより