AFFINGERのタブ機能を使って商品ページを改良しました。
タブ機能では商品説明と価格などを切り替えができるためスマホでも見やすい作りにできました。
| 項目 | 内容 |
| 品種 | 品種 |
商品説明
商品説明
在庫・価格（税込・梱包料込）
| 在庫状況 | kg | 入り数 | 価格 |
| テスト | テスト | テスト | テスト |
テスト
タブ機能について
[※st-tab-content memo="全体を包むボックスです"] [※st-input-tab text="タブ1" bgcolor="#fff" color="#1a1a1a" fontweight="" width="30" value="1" checked="checked"] [※st-input-tab text="タブ2" bgcolor="#fff" color="#1a1a1a" fontweight="" width="30" value="2" checked=""] [※st-input-tab text="タブ3" bgcolor="#fff" color="#1a1a1a" fontweight="" width="30" value="3" checked=""] [※st-tab-main bgcolor="" bordercolor="" value="1"]タブ1のコンテンツ[/st-tab-main] [※st-tab-main bgcolor="" bordercolor="" value="2"]タブ2のコンテンツ[/st-tab-main] [※st-tab-main bgcolor="" bordercolor="" value="3"]タブ3のコンテンツ[/st-tab-main] [/st-tab-content]
コピペする際は「※」は不要です
st-input-tab text="タブ1"←題名 これはタブの題名
bgcolor="#4CAF50"←タブの背景色 タブの背景の色を指定しています
color="#FFC107"←文字色 題名の文字色の指定
fontweight="bold"←題名のフォントの指定です boldは太くする指定です
タブの背景色を変えると見やすくなります。
ココがポイント
[※st-tab-content memo="全体を包むボックスです"]このコードで全体をタブ化することができます。
テーブルショートコード機能について
| テキスト① | テキスト② |
| テキスト③ | テキスト④ |
[※st-table width="100" bordercolor=""] [※st-tr bgcolor="" color="" fontweight="" center="on"] [※st-td width="40" bordercolor="" bgcolor="" color="" fontweight="" center="" colspan=""]テキスト①[/st-td] [※st-td width="60" bordercolor="" bgcolor="" color="" fontweight="" center="" colspan=""]テキスト②[/st-td] [/st-tr][/st-table] [※st-table width="100" bordercolor=""] [※st-tr bgcolor="" color="" fontweight="" center="on"] [※st-td width="40" bordercolor="" bgcolor="" color="" fontweight="" center="" colspan=""]テキスト③[/st-td] [※st-td width="60" bordercolor="" bgcolor="" color="" fontweight="" center="" colspan=""]テキスト④[/st-td] [/st-tr][/st-table]
コピペする際は「※」は不要です
bordercolor="線の色を指定"
bgcolor="背景色"
color="文字色"
fontweight="フォントの指定"
center="on"←文字を中央によせる
個々のテーブルを組み合わせる場合は width="" で幅の数字を同じ（同じ比率）にして center="on" にすればテーブルの形が統一されます。
ココがポイント
テーブルの形を整えるにはwithの比率を合わせる
感想
AFFINGERオリジナルのショートコードを組み合わせる事で見やすい商品ページをつくることができました。↓
最初から使える機能が揃っているのでAFFINGERに変更して良かったです。
AFFINGERの関連記事
関連道具や書籍など
AFFINGER EX PACK3
| テーマ | AFFINGER 5 EX（上位Ver） | ￥24,800 |
| プラグイン | AFFINGERタグ管理マネージャー3 | ￥21,800 |
| ABテストプラグイン | ￥4,800 | |
| クレジット削除プラグイン | ￥2,500 | |
| マニュアル | AffiliateRun～なぜ売れないか？ | 特別付録 |
| 特別価格 | （￥14,100お得！） |
|
|---|---|---|
価格は39,800と高価です。私も最初は通常のAFFINGERにしようかと思いましたが、
EX版のみに備わるスライドショーの機能やAFFINGERタグ管理マネージャー3プラグインを含んでこの価格なのでかなりお得です。
おそらく通常verを購入していたら追加でプラグインを購入していたりEX版への追加アップデートをしていたと思います。
それを考えれば最初から含んでいるバージョンを購入した方が追々購入するよりかは安くすみます。