WEB(ホームページ)制作

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

2019年3月30日

AFFINGER5のタブ機能




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

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に変更して良かったです。

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

AFFINGERの関連記事

関連道具や書籍など


AFFINGER EX PACK3

AFFINGERの値段 1

テーマ AFFINGER 5 EX(上位Ver) ¥24,800
プラグイン AFFINGERタグ管理マネージャー3 ¥21,800
ABテストプラグイン ¥4,800
クレジット削除プラグイン ¥2,500
マニュアル AffiliateRun~なぜ売れないか? 特別付録
特別価格 ¥53,900¥39,800
¥14,100お得!

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

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

全カテゴリー

関連記事

  • この記事を書いた人
  • 最新記事

青木果樹園

梨やブドウ、フィンガーライムなどの果樹栽培に関する記事や農業資材のレビューを書いています。
フォローして頂けると記事を書く励みになります。
青木果樹園のBASE shopはこちら

-WEB(ホームページ)制作
-

Copyright© 藤稔発祥の青木果樹園-藤沢の直売所 梨・ブドウを販売・直送・通販- , 2019 All Rights Reserved.