STORK19の「タブ」ブロックの使い方を説明します。このブロックを利用することで、複数のコンテンツをタブ形式で切り替え表示できます。
タブ項目内には画像や文章、投稿リストなどのブロックを設置でき、コンテンツの分類表示や比較などに活用できます。
このブロックはver.5.17で追加されました。
タブブロックの表示例
▼デザイン:シンプル
これはタブ1のコンテンツです。 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
これはタブ2のコンテンツです。
これはタブ3のコンテンツです。 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
▼デザイン:ボックス
これはタブ1のコンテンツです。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
これはタブ2のコンテンツです。
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
これはタブ3のコンテンツです。
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
▼デザイン:下線
これは最初のタブのコンテンツです。 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
これは2番目のタブのコンテンツです。
ページ読み込み時に表示させるタブ項目を設定できます。
これは最後のタブのコンテンツです。 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
▼デザイン:プレーン
これは最初のタブのコンテンツです。 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
ページ読み込み時に表示させるタブ項目を設定できます。
これは3番目のタブのコンテンツです。
これは最後のタブのコンテンツです。 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
タブブロックの使い方
タブブロックの使い方について説明します。使い方のイメージとして、下記の動画もご覧ください。
タブラベル名を変更する
タブ項目の「タブラベル:」欄に入力したテキストがタブラベルに反映されます。

タブ項目の追加と並び順の変更
タブブロックを選択した状態で「+タブを追加」ボタンでタブ項目(子ブロック)を追加できます。

また、タブ項目(子ブロック)を選択した状態で「上(下)に移動」でタブの並び順を入れ替えることができます。

リストビューでタブ項目(子ブロック)をドラッグアンドドロップで並び順を入れ替えることもできます。
タブ設定
| デザイン | タブの表示タイプを選択できます。 シンプル / ボックス / 下線 / プレーン |
| 初期表示タブ | ページ読み込み時に表示しておくタブ項目を選択できます。 |
| タブの配置(PC / スマホ) | タブラベルの配置スタイルを選択できます。 テキストに合わせる / 均等分 / 半等分(固定幅50%) / 四等分(固定幅25%) |
色の設定
タブラベルの背景色と文字色は、カラーピッカーで自由に変更できます。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.






















このブロックをコンテンツに追加するには、以下の2通りの方法があります。
/tabを入力して追加