【AFFINGER5】タブの作り方

投稿日:2019年1月27日 更新日:

情報をたくさん載せてしまうと、横長になってしまい、スマホ版の視認性が悪くなってしますよね (´;ω;`)

そこでぜひ活用したいのがタブ分割です ( ・ㅂ・)و ̑̑

 

タブ分割すると、ケースに応じて出しわけできるので画面がスッキリしますよ!

 

↓↓こんなん

AFFINGER カスタマイズ

AFFINGER カスタマイズ

 

 

https://twitter.com/teppesmn/status/1055662266278768642

 

上記のように、「1 タブ目: 概要」「2 タブ目: 詳細」といった使い方もできます (=゚ω゚)ノ

 

応用範囲は無限大ですね!

 

注意ポイント

タブは 1 記事につき、1 つしか配置できません。

2 つ以上配置すると、2 つ目はタブの中身が表示されなくなります。

 

タブを作る

AFFINGER カスタマイズ

  • 「タグ」 > 「レイアウト」 > 「タブ」  > 「2 つ」を選択する
  • タブ作成用のコードが表示される

 

ポイント

タブを 3 つ使う場合は「3 つ」を選択しましょう。

 

AFFINGER カスタマイズ

※上記画像では見やすくするため改行しています

 

  • 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"

 

AFFINGER カスタマイズ

  • タブ完成 ( ・ㅂ・)و ̑̑

 

 



Copyright© てっぺのマネーハック.INFO , 2023 All Rights Reserved.