WordPress Tips

Affinger テーブルレイアウトの確認

2022-10-23

Affinger テーブルレイアウトの確認

テーブルのショートコード

クラシックブロックから「タグ」>「レイアウト」>「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/月

PCでも横スクロール

classに「pc」を追加する

<div class="scroll-box pc">
<figure class="wp-block-table is-style-regular">
<table style="border-collapse: collapse;">
<thead>
<tr>
<td>プラン</td>
<td class="has-text-align-center" data-align="center">BOX1</td>
<td class="has-text-align-center" data-align="center">BOX2</td>
<td class="has-text-align-center" data-align="center">BOX3</td>
<td class="has-text-align-center" data-align="center">BOX4</td>
<td class="has-text-align-center" data-align="center">BOX5</td>
<td class="has-text-align-center" data-align="center">BOX6</td>
<td class="has-text-align-center" data-align="center">BOX7</td>
<td class="has-text-align-center" data-align="center">BOX8</td>
</tr>
</thead>
<tbody>
<tr>
<td>初期費用</td>
<td class="has-text-align-center" colspan="8" data-align="center">3ヶ月以上契約で初期費用無料(1ヶ月契約のみ¥2200)</td>
</tr>
<tr>
<td>月額費用<br />(36ヶ月)</td>
<td class="has-text-align-center" data-align="center">¥528 /月</td>
<td class="has-text-align-center" data-align="center">¥968 /月</td>
<td class="has-text-align-center" data-align="center">¥1628 /月</td>
<td class="has-text-align-center" data-align="center">¥2178 /月</td>
<td class="has-text-align-center" data-align="center">¥3278/月</td>
<td class="has-text-align-center" data-align="center">¥5478/月</td>
<td class="has-text-align-center" data-align="center">¥7678/月</td>
<td class="has-text-align-center" data-align="center">¥15378/月</td>
</tr>
</tbody>
</table>
</figure>
</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 /月

-WordPress Tips
-