テーブルブロック（表）

Contents

アフィリエイトを利用する時にテーブルはよく活用するかと思いますが、Diver Blocksを活用しているとテーブルブロックが拡張されてよりデザイン性の高いテーブルの作成が可能になります。

テーブルブロックはWordpress標準ブロックですが、下記の拡張機能を利用するためにはDiver Blocksを有効化していただく必要があります。

基本操作

STEP

テーブルブロックを挿入する

テーブルブロックを挿入すると[カラム数]と[行数]を設定して表を作成します。カラムや行は作成後に調整できます。

STEP

カラム・行を追加する

テーブルブロックのツールバーにはテーブル専用のボタンが追加されてるのでここから行や列（カラム）の操作をしてください。

指定の列を目立たせることが可能です。アクセントの位置やサイズ、カラーを調整してください。

セル内の背景にマークを設置することができます。比較表を作成するときに活用してみてください。

設置したマークは、個別でデザインを調整することも可能です。

デスクトップとモバイルでどちらでもみやすいテーブルを作成するためには、スクロールを可能にすることが不可欠です。

STEP

セル幅固定を解除する

まずはセル幅を固定をオフにしてください。

サービス	WPサポート	A社	B社	C社
初期費用	0円	0円	27,500円	33,000円〜
月額費用	20,000円	44,000円	50,000円	33,000円
最低契約期間	3ヶ月	3ヶ月	1年間	6ヶ月
サポート体制	24時間365日対応	無制限	メール	メール

STEP

テーブルの幅を固定する

通常は横幅に合わせて縮小されてしまうので、テーブルの横幅を指定してテーブルのサイズが可変にならないようにします。

この時点でスクロールで全体をがみれるテーブルになります。

サービス	WPサポート	A社	B社	C社
初期費用	0円	0円	27,500円	33,000円〜
月額費用	20,000円	44,000円	50,000円	33,000円
最低契約期間	3ヶ月	3ヶ月	1年間	6ヶ月
サポート体制	24時間365日対応	無制限	メール	メール

STEP

最初のカラムを固定する

テーブルの種類によっては、スクロールするとどの項目かが見えなくなってしまうかもしれません。その時には最初のカラムを固定してみてください。

スクロールしても

サービス	WPサポート	A社	B社	C社
初期費用	0円	0円	27,500円	33,000円〜
月額費用	20,000円	44,000円	50,000円	33,000円
最低契約期間	3ヶ月	3ヶ月	1年間	6ヶ月
サポート体制	24時間365日対応	無制限	メール	メール

Diver Blocksの文字装飾はテーブル内のテキストにも設置することができます。上記で紹介した機能以外でも、ボタンやアイコン、スターなど、テーブルに適している装飾もあるので積極的に活用してみてください。

合わせて読みたい