情報をたくさん載せてしまうと、横長になってしまい、スマホ版の視認性が悪くなってしますよね (´；ω；｀)
そこでぜひ活用したいのが「タブ分割」です ( ･ㅂ･)و ̑̑
タブ分割すると、ケースに応じて出しわけできるので画面がスッキリしますよ！
↓↓こんなん
https://twitter.com/teppesmn/status/1055662266278768642
上記のように、「1 タブ目: 概要」「2 タブ目: 詳細」といった使い方もできます (=ﾟωﾟ)ﾉ
応用範囲は無限大ですね！
注意ポイント
タブは 1 記事につき、1 つしか配置できません。
2 つ以上配置すると、2 つ目はタブの中身が表示されなくなります。
タブを作る
- 「タグ」 > 「レイアウト」 > 「タブ」 > 「2 つ」を選択する
- タブ作成用のコードが表示される
ポイント
タブを 3 つ使う場合は「3 つ」を選択しましょう。
※上記画像では見やすくするため改行しています
- 1 つ目の st-input-tab text="" に 1 番目タブのタイトルを入力する
※例: st-input-tab text="ふるさと納税する人" - 2 つ目の st-input-tab text="" に 2 番目タブのタイトルを入力する
※例: st-input-tab text="ふるさと納税しない人" - 「st-tab-main bgcolor="" bordercolor="" value="1"」と 「/st-tab-main」の間に、1 番目タブの内容を入力する
※上記例では画像挿入 - 「st-tab-main bgcolor="" bordercolor="" value="2"」と 「/st-tab-main」の間に、2 番目タブの内容を入力する
※上記例では画像挿入
ポイント
標準ではタブ中身のコンテンツの枠線がありません。
枠線が必要な場合は、bordercolor="" で枠線の色を設定しましょう。
※例: bordercolor="#fff"
- タブ完成 ( ･ㅂ･)و ̑̑
