STORK19を今すぐダウンロード!

テーブル(表)ブロックとテーマ専用オプション

WordPress標準で用意されているテーブルブロックを、STORK19テーマ専用に調整&機能拡張しています

ここでは、デザインや拡張オプションについてご紹介いたします。

動画でざっくり見てみる

テーブルブロックのスタイル

スタイルについては現時点で3種類。WordPressがデフォルトで用意している「デフォルト」「ストライプ」に加え、テーマ独自に「ボーダー」を追加しています。

スタイル3種

tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
デフォルト
tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
ストライプ
tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
テーマオリジナル:ボーダー

スタイル3種(ヘッダーあり)

ththth
tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
デフォルト ヘッダーあり
ththth
tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
ストライプ ヘッダーあり
ththth
tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
tableLorem ipsum dolor sit ametLorem ipsum dolor sit amet
ボーダー ヘッダーあり

その他のオプション

テーマが用意しているオプションをご紹介します。

テーブルスクロール

こちらのテーブルはスマートフォンなどの横幅の狭いデバイスで確認する場合、テーブルを横にスクロールできるようになります。

Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
テーブルをスクロールできる(スマートフォン表示の場合)

先頭セルをth風のデザインにする

WordPress6.0時点ではテーブルは一番最初の行しかthタグに変更することができません。そのため、WEBサイトでよく見かける一番左端のセルをthにすることはできません。

STORK19では、オプションで一番左のセルをth風のデザインにするオプションを追加しています。

ここがTH風にLorem ipsum dolor sit amet
ここがTH風にLorem ipsum dolor sit amet
ここがTH風にLorem ipsum dolor sit amet
一番左のセルをth風デザインにする

ただし、これはデザイン上thのようになっているだけで、tdタグが使用されている点に注意してください。ただそれでもデザイン上見やすくすることができるので重宝すると思います。

その他の仕様

テーブルブロックのテキスト色を変更した場合は、線の色も変わります

Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
デフォルト
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
ボーダー

ヘッダーとth風オプションを有効

ヘッダーとthデザインのオプション両方を有効にした場合はこのようになります。

ththth
th風sample textsample text
th風sample textsample textsample text
th風sample textsample textsample textsample text