CSSの設定方法

 

 

 

 

 

 

 

シンプル表示

 

CSS class名

  • shops_item:アイテム表示一番外側のフレーム
  • shops_image:アイテムのメイン画像
  • aligncenter
  • shops_info:アイテム名と価格を表示するdiv
    • <h4>:アイテム名表示
    • proprice:価格(価格を入力すると表示されます。)
    • right:価格を右側に表示。
  • linkbutton:ショップリンクボタンのdiv
    • shoplinksmall:Amazon,楽天市場,Yahoo!ショップのリンクボタン
    • kakakulinksmall:価格比較のリンクボタン
  • shops_footer:メーカー・モデルを表示するdiv
    • maker:メーカー名(メーカーを入力すると表示されます。)
    • model:モデル名(モデルを入力すると表示されます。)

 

特徴は記入しても表示されません。

ランキング表示

 

CSS class名

  • rankframe:アイテム表示一番外側のフレーム
  • rank-top1,2,3,rank-boltなど:ランキングのアイコン、ナンバー以外にもFont Awesomeアイコンもあります。
  • proimg:アイテムのメイン画像
    • aligncenter:メイン画像のセンター
  • prolight:画像右側に表示されるメーカーやスペック表のdiv枠
    • maker:メーカー名(メーカーを入力すると表示されます。)
    • model:モデル名(モデルを入力すると表示されます。)
    • proprice:価格(価格を入力すると表示されます。)
    • right:価格を右側に表示。
  • shoplinksmall:Amazon,楽天市場,Yahoo!ショップのリンクボタン
  • kakakulinksmall:価格比較のリンクボタン

 

横スクロール表示

 

  • scrollable-table
  • ransystable
  • best-top[0-9]
  • feature
  • kakakulink

 

 

 

 

価格調査

 

CSS class名

  • itemcount:アイテムの合計や各ショップの件数
  • itemtable:テーブル枠
  • def:見出し(<th>)のスタイル<tr>
  • shop:ショップ名の<td>
  • images:テーブルに表示される画像の<td>
  • 右端
    • point:テーブル右側に表示されるポイント<td>
    • price:テーブル右側に表示される価格<td>
    • soumu:テーブル右側に表示される送料<td>
  • api:一番下に表示される楽天やYahoo・ランシスのリンク

 

 

 

 

タイトルとURLをコピーしました