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

2022-10-232024-10-06

WordPress Tips

この記事にはプロモーションが含まれています

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

レスポンシブテーブルデザインについては以下の記事でもまとめています。>> 縦横スクロール CSSでtableをレスポンシブにする方法

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

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

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

スタイル1 – デフォルト

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

スタイル2 – ストライプ

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

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

スタイル3 – 中央寄せ

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

スタイル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にしたい時に使えるデザインです。

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

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

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