商品表示
サブベース内のセル（td.contents）に表示される内容には以下のようなものがあります。
  1. 商品一覧（テキストのみ）
  2. 商品一覧（写真のみ）
  3. 商品一覧（写真＋説明）
  4. 商品詳細
  5. カート（カゴの中画面）
  6. カート（レジ画面）
  7. カート（確認画面）
  8. カート（注文完了画面）
  9. ユーザログイン
  10. ユーザ情報
商品一覧と商品詳細（上記番号１〜4）に使用されるクラスは以下のとおりです。
その他のページ（上記番号5〜10）については「ページごとの内容」の項をご覧ください。
◆商品一覧（テキストのみ）　（クラス名　.c1_box）

品名、品番、価格等、テキスト表示での一覧です。

例）項目名の下を2重線に、内容の下線に破線を使用する

.c1_box th { border-bottom : 3px double #000000;}
.c1_box td { border-bottom : 1px dashed #000000;}

◆商品一覧（写真のみ）　

画像、品名、品番、価格を表示した一覧です。テーブル全体にはクラス名「.c2_box0」、画像部分には「.c2_box1」品名・品番部分には「.c2_box2」が使用されています。

例）写真を中央揃えに、商品情報の背景は薄ピンクにする

.c2_box1 { text-align : center ; }
.c2_box2 { background-color : #FFCCFF;}

◆商品一覧（写真＋説明）

画像、品名、品番、価格に、商品概要も表示した一覧です。テーブル全体にはクラス名「.c3_box0」、画像部分には「.c3_box1」、品名・品番部分には「.c3_box2」、商品概要部分には「.c3_box3」が使用されています。

例）商品情報を枠線で囲み、概要部分の背景色を薄ピンクにする

.c3box0 { border : 1px solid #FFCCFF;}
.c3box3 {backgroundo-color : #FFCCFF;}

◆商品詳細

商品詳細表示用テーブルです。テーブル全体にはクラス名「.item_box0」、画像部分には「.item_box1」、品名・品番・ボタン等部分には「.item_box2」、商品説明部分には「.item_box3」が使用されています。

例）商品説明の文字色を灰色にする

.item_box3 {color : gray ; }

◆商品情報（クラス名.list_box)

品名、品番、価格を表示するテーブルです。

例）項目名（見出し）を右揃えにする

.list_box th { text-align : right ; }

◆商品詳細補足画像部分

管理画面管理画面「商品管理」で商品情報「他の商品画像」等を設定している際、商品詳細テーブル下に表示されるテーブルです。テーブル全体にはクラス名「.photo」、画像部分には「.ph0」、概要部分には「.ph1」が使用されています。

例）画像を中央ぞろえにし、概要部分の文字を斜体にする

.ph0 { text-align : center ; }
.ph1 { font-style : italic ; }

◆ソート、表示切替（クラス名　.navi1)

商品一覧で商品表示順を並べ替えたり、商品一覧画面を切り替える際に使用するナビゲーションです。

例）小さめの文字で表示する

.navi1 td{ font-size : smaller ; }

◆件数表示（クラス名　.navi2）

商品件数やページ数を表します。

例）リンク色を赤にする

.navi1 a:link{ color : #red; }

◆マーク表示（クラス名　.mark)

管理画面「カート設定」→「マーク設定」で設定されたマーク表示部分です。マークが表示される部分（商品一覧、商品詳細、トップページの「新着」「おすすめ」等）はすべてに共通します。

例）マーク画像の周りに5pxの空白を設ける

.mark img { margin : 5px;}

◆品名表示（クラス名　.item)

商品名部分です。すべてのページに共通します。

例）商品名を太字にする

.item {font-weight : bold ; }

◆価格表示（クラス名　.price)

価格表示です。すべてのページに共通します。

◆在庫表示（クラス名　.stock)

商品詳細ページで表示される在庫表示です。

例）在庫状況を斜体で表示する

.stock { font-style : italic; }

◆セール表示（クラス名　.sale)

管理画面「カート設定」→「セール設定」で対象になっている商品の価格表示部分です。

例）セール価格を赤字で表示する

.sale { color : red;}
商品表示　＜　HOME