SWELLの表ブロックの設定法！色んなデザインでオリジナルの表が作れる！

この記事を読むのにかかる時間: 4 分

こんな悩みに応えます。

こんにちは、おもデジ！ライブラリのたこなまです。

今回は、SWELLで使える表ブロックで出来ることを紹介する記事。

通常のWordPressにも表機能は付いていますが、SWELLでは更にオリジナルの機能や設定が追加されています。

普通に表を使うのではなく、記事を彩るものとして表を使いこなせるようなものになっているので、ぜひ使ってみてくださいね。

デフォルト設定の時とは全く違う使い心地にびっくりするはずですよ。

では行こう！

表ブロックの使い方

まず初めに、表ブロックの使い方から紹介していきます。

今回の記事では、ブロックエディターで表を使う時の方法のみ、お伝えしておきます。

使い方は簡単で、ブロックから『テーブルブロック』を選択してから…

行と列の数を決めて『表を作成』を押すだけ。

これで、表を使うことができます。

そしてなんと！通常ならこれ以上の機能は無いのですが、SWELLではこの表に細かいカスタマイズができます。

以降では、SWELLだけで使える表ブロックの設定やデザインをしっかり見ていきます。

場面に合った表や自分の好みに応じた表を作成して、ブログ記事をもっと華やかにしちゃいましょう！

表ブロックのスタイル一覧

まず、SWELLの表ブロックでは、４種類のスタイルを選ぶことができるようになっています。

TABLE	BLOCK
CELL – 01	ABCDEFG
CELL – 02	HIJKLMN
CELL – 03	OPQLSTUVWXYZ

TABLE	BLOCK
CELL – 01	ABCDEFG
CELL – 02	HIJKLMN
CELL – 03	OPQLSTUVWXYZ

TABLE	BLOCK
CELL – 01	ABCDEFG
CELL – 02	HIJKLMN
CELL – 03	OPQLSTUVWXYZ

TABLE	BLOCK
CELL – 01	ABCDEFG
CELL – 02	HIJKLMN
CELL – 03	OPQLSTUVWXYZ

SWELLにのみ追加されている、表ブロックの設定項目

さらに、サイドバーには以下のような設定項目が用意されています。

「１列目のtdをth風に」

ブロックエディターの標準機能では今のところ、tdタグをthタグに変換することができません。

そこで、SWELLでは見た目だけthタグ風にできる設定が追加されています。

「各列で最低限維持する幅」

表ブロックは、１つの列の内容がとても長い時、その他の列の横幅が極端に狭くなってしまいます。

この現象を防ぐため設定で、どの程度の横幅を最低限維持するかを３段階で選べるようになっています。

テーブル設定を行う様子

「スマホでの追加設定」

さらに、スマホサイズで表示される時に表を組み替えて「縦並びに表示する」か「テーブルヘッダーを固定する」、または「表を横スクロールできるようにして表示する」かを選択できます。

表を横スクロール可能にするとき、自動でガイド表示も追加されるよ

テーブルブロックの「スマホで横スクロールを可能にする設定」がオンの時は、「スクロールできます」というガイドテキストが表の右上に表示されます。

SWELLの表ブロックで分かりやすい表にしよう！

SWELLで使える表ブロックは、場面に応じて柔軟にデザインを変更できる優れモノです。

表やリストをうまく使うことで、ブログ記事は非常に分かりやすいものに出来ると考えています。

文字ばかりで伝えるよりも、パッと見て分かる方がユーザーにとってはありがたい。

Google先生に評価してもらうためにも、表が使えそうなときはしっかり使ってあげると良いと思います。