WordPress Tips

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

2022-10-23

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

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

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>
プランBOX1BOX2BOX3BOX4BOX5BOX6BOX7BOX8
初期費用3ヶ月以上契約で初期費用無料(1ヶ月契約のみ¥2200)
月額費用
(36ヶ月)
¥528 /月¥968 /月¥1628 /月¥2178 /月¥3278/月¥5478/月¥7678/月¥15378/月

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

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

PCでも横スクロール

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

<div class="scroll-box pc">

</div>
プランBOX1BOX2BOX3BOX4BOX5BOX6BOX7BOX8
初期費用3ヶ月以上契約で初期費用無料(1ヶ月契約のみ¥2200)
月額費用
(36ヶ月)
¥528 /月¥968 /月¥1628 /月¥2178 /月¥3278/月¥5478/月¥7678/月¥15378/月

テーブル - 中央配置

プランBOX1BOX2BOX3
初期費用3ヶ月以上契約で初期費用無料(1ヶ月契約のみ¥2200)
月額費用
(36ヶ月)
¥528 /月¥968 /月¥1628 /月

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

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大50%キャッシュバッグ月額495円&ドメイン永久無料 - 2024年4月3日(水)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額643円 55%OFF ドメイン2個無料 - 2024年4月5日(金)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WordPress Tips
-