農家のWEB制作日記

【AFFINGER5のタブ機能】でサイトを見やすくする方法

投稿日:2019年3月30日 更新日:

AFFINGERのタブ機能を使って商品ページを改良しました。
タブ機能では商品説明と価格などを切り替えができるためスマホでも見やすい作りにできました。




項目内容
品種品種

商品説明


商品説明

+ 続きを読む


商品説明2




在庫・価格(税込・梱包料込)

在庫状況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 EX PACK3

テーマ AFFINGER 5 EX(上位Ver) 24,800
プラグイン AFFINGERタグ管理マネージャー3 21,800
ABテストプラグイン 4,800
クレジット削除プラグイン【通常価格:2,500円】 -
マニュアル AffiliateRun~なぜ売れないか? -
販売価格 39,800

価格は39,800と高価です。私も最初は通常のAFFINGERにしようかと思いましたが、
EX版のみに備わるスライドショーの機能やAFFINGERタグ管理マネージャー3プラグインを含んでこの価格なのでかなりお得です。
おそらく通常verを購入していたら追加でプラグインを購入していたりEX版への追加アップデートをしていたと思います。
それを考えれば最初から含んでいるバージョンを購入した方が追々購入するよりかは安くすみます。

AFFINGER関連記事

51view

農家のWEB制作日記

【AFFINGER5】カスタム投稿を追加し商品ページをつくる方法

ホームページビルダーで作成していた商品ページがaffinger5にしたところ表示されなくなってしまいました。 ※今は改善 ...

32view

農家のWEB制作日記

【AFFINGER5でPV増加】変更後4ヶ月目で月間6万PV達成!【SEO,内部リンク】

AFFINGER5に変更して月6万PVを達成できました(^^)/ 有料テーマに変更してあらためてタイトル付け方、内部リン ...

17view

農家のWEB制作日記

【解決済み】AFFINGER5のJETの関連記事の抜粋に不具合が生じる

ようやく解決しました! 子テーマのJETをつかっているのですが関連記事の抜粋が全て同じなる不具合が生じていて、それをひた ...

-農家のWEB制作日記
-

Copyright© 新鮮・完熟果物を直送 青木果樹園-藤稔誕生の直売所- , 2019 All Rights Reserved.