アフィンガー５のタグって種類が多くて使い切れていなかったり、知らなかったものがあったりしますよね。
こてつも全部は把握していなし、まだ使ったことすらないタグがたくさんあります。
今日はアフィンガー５のタグで便利だと思ったレイアウトのデザインを紹介します。
いろんな人のブログを見ていてもコレを使っている人見たことないけど、何種類か紹介したいときや比較したいものがあるときにいいなと思いました。
それではさっそくやっていきましょう。
タブのレイアウトをデザインしよう
ダッシュボード→投稿→タグ→レイアウト→タブ→３つ
タブ1のコンテンツ
タブ2のコンテンツ
タブ3のコンテンツ
デフォルトのままだとこんな感じ。
枠なしで少し寂しいですよね。
枠をつけてみよう
本文１
本文２
本文３
上のデザインのコード
[st-tab-content memo="全体を包むボックスです" myclass=""]
[st-input-tab fontawesome="" text="タイトルを入力１" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="30" value="1" checked="checked"]
[st-input-tab fontawesome="" text="タイトルを入力２" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="30" value="2" checked=""]
[st-input-tab text="タイトルを入力３" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="30" value="3" checked=""]
[st-tab-main bgcolor="" bordercolor="#d3d3d3" value="1"]
本文１
[/st-tab-main][st-tab-main bgcolor="" bordercolor="#d3d3d3" value="2"]
本文２
[/st-tab-main][st-tab-main bgcolor="" bordercolor="#d3d3d3" value="3"]
本文３
[/st-tab-main]
[/st-tab-content]
bordercolorにカラーコードを入れてあげると枠ができます。
枠有りがいい人は好きな色を選んでいれてみてください。
まとめ
このタブ、小洒落ててお気に入りです。
いいなと思ったらぜひ使ってみてください。
アフィンガー５はこちらから>>
