コピペでカスタマイズが完了するサービス SANGO Land

テーブルブロックの使い方

この記事では、SANGO Gutenberg プラグインが独自に拡張したテーブルブロックについて紹介します。

SANGO Gutenbergでは独自にテーブルブロックを拡張しており、通常のテーブルブロックの機能に加え独自の機能をいくつか追加しております。

サンプル例

例えば、SANGO Gutenbergを使えば以下のようなテーブルが実現できます。

ヘッダーテーブルLorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ヘッダーテーブルLorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ヘッダーヘッダーヘッダー
テーブルテーブルテーブル
テーブルテーブルテーブル
テーブルテーブルテーブル
テーブルテーブルテーブル
テーブルテーブルテーブル
テーブルテーブルテーブル
テーブルテーブルテーブル
テーブルテーブルテーブル

まずは、使い方をざっくりと掴んでいただけるように動画を用意しましたのでご覧ください。

テーブルブロックの呼び出し方

まずはエディターを開き、ブロック追加ボタンをクリックします。

クリックすると、ブロック一覧が表示されるのでその中から「テーブルブロック」と書かれたブロックを選択します。

各種設定項目

次に、テーブルブロックに対してSANGO Gutenbergが独自に拡張している設定項目について紹介します。

最初の列を見出しに

以下のように最初の列を見出しセルにすることができます。

見出しここに内容が入ります
見出しここに内容が入ります

また、見出しセルには「見出し色」「見出し背景色」を設定することで色づけすることもできます!

また、列だけではなく行に対しても同様に以下のように色付けすることができます。

見出し見出し
ここに内容ここに内容
ここに内容ここに内容

行を見出しにするにはテーブルブロックに標準で備わっている「ヘッダーセクション」にチェックを入れます。

罫線色変更

また以下のテーブルのように罫線色を変更することもできます。

ここに内容ここに内容
ここに内容ここに内容
ここに内容ここに内容
ここに内容ここに内容

行や列の固定

またページやテーブルをスクロールした際に行や列を固定することもできます。ただし、行の固定と列の固定の併用はできませんのでご注意ください。

また、行を固定する場合、スクロールヒントと併用するとテーブルを横スクロールできることがユーザーに伝わりやすいのでおすすめです。

ヘッダーテーブルLorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
ヘッダーテーブルLorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

セル幅の最大幅、最小幅設定

テーブル内の情報によっては列が大きくなりすぎたり、または小さくなりすぎるケースがあります。そこでSANGO Gutenbergでは以下の設定でセルの最大幅、最小幅を設定できるようにしています。

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。