AFFINGER

【AFFINGER5】便利なタブのレイアウトを紹介

2020年5月14日

 

アフィンガー5のタグって種類が多くて使い切れていなかったり、知らなかったものがあったりしますよね。

 

こてつも全部は把握していなし、まだ使ったことすらないタグがたくさんあります。

 

今日はアフィンガー5のタグで便利だと思ったレイアウトのデザインを紹介します。

 

 

いろんな人のブログを見ていてもコレを使っている人見たことないけど、何種類か紹介したいとき比較したいものがあるときにいいなと思いました。

 

それではさっそくやっていきましょう。

 

 

タブのレイアウトをデザインしよう

ダッシュボード→投稿→タグ→レイアウト→タブ→3つ

 





タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ


 

デフォルトのままだとこんな感じ。

枠なしで少し寂しいですよね。

 

枠をつけてみよう





本文1

本文2

本文3


 

上のデザインのコード

[st-tab-content memo="全体を包むボックスです" myclass=""]
[st-input-tab fontawesome="" text="タイトルを入力1" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="30" value="1" checked="checked"]
[st-input-tab fontawesome="" text="タイトルを入力2" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="30" value="2" checked=""]
[st-input-tab text="タイトルを入力3" bgcolor="#fff" bordercolor="" color="#1a1a1a" fontweight="" width="30" value="3" checked=""]
[st-tab-main bgcolor="" bordercolor="#d3d3d3" value="1"]

本文1

[/st-tab-main][st-tab-main bgcolor="" bordercolor="#d3d3d3" value="2"]

本文2

[/st-tab-main][st-tab-main bgcolor="" bordercolor="#d3d3d3" value="3"]

本文3

[/st-tab-main]
[/st-tab-content]

 

bordercolorカラーコードを入れてあげると枠ができます。

 

枠有りがいい人は好きな色を選んでいれてみてください。

 

まとめ

このタブ、小洒落ててお気に入りです。

 

いいなと思ったらぜひ使ってみてください。

 

アフィンガー5はこちらから>>

-AFFINGER

© 2020 こてつの自由帳 Powered by AFFINGER5