みんなの笑顔は、私たちスマイルサーバの仕業です。



カタログ画面のカスタマイズ

スタイルシートを使って、当社が提供する商品カタログ画面の商品属性のスタイルをカスタマイズすることができます。カタログ画面をカスタマイズするには、以下の手順を行ってください。

1.ファイルマネージャを使って、template.htm を以下のように編集してください。ファイルマネージャの利用法については、ご利用マニュアルを参照してください。

template.htm の HEAD タグ内に customize.css の読み込み指定を追加する。

以下をコピー&ペーストして、customize.css というファイルの名前でクライアント端末に保存してください。


  <link rel="stylesheet" type="text/css" href="common/css/customize.css">


  .pm-name {
  line-height: 120%;
  font-weight: bold;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .in-partno {
  line-height: 120%;
  font-size: 75%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  }

  .pm-partno {
  line-height: 120%;
  font-size: 75%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  }

  .in-price {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .pm-price {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .in-fixedprice {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .pm-fixedprice {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .in-discount {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .pm-discount {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .in-shipping {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .pm-shipping {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .in-end {
  line-height: 120%;
  font-size: 75%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  }

  .pm-end {
  line-height: 120%;
  font-size: 75%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  }

  .in-stock {
  line-height: 120%;
  font-size: 75%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  }

  .pm-stock {
  line-height: 120%;
  font-size: 75%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  }

  .pm-description {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .pm-comment {
  line-height: 120%;
  font-size: 75%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  }

  .pmd-name {
  line-height: 120%;
  font-weight: bold;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .ind-partno {
  line-height: 120%;
  font-size: 75%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  }

  .pmd-partno {
  line-height: 120%;
  font-size: 75%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  }

  .ind-price {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .pmd-price {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .ind-fixedprice {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .pmd-fixedprice {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .ind-discount {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .pmd-discount {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .ind-shipping {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .pmd-shipping {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .ind-end {
  line-height: 120%;
  font-size: 75%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  }

  .pmd-end {
  line-height: 120%;
  font-size: 75%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  }

  .ind-stock {
  line-height: 120%;
  font-size: 75%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  }

  .pmd-stock {
  line-height: 120%;
  font-size: 75%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  }

  .pmd-description {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

  .pmd-comment {
  line-height: 120%;
  font-size: 80%;
  font-family: Osaka, "MS Pゴシック", "MS UI Gothic", sans-serif;
  letter-spacing: 1px;
  }

3. customize.cssファイルのクラス名仕様にしたがって、クライアント端末に保存した customize.css ファイルをメモ帳等で開いて、編集してください。編集する際は、変更が不要な部分を含め、すべてを記載するようにしてください。

【customize.cssファイルのクラス名仕様】

クラス名 該当するカタログ画面および商品属性
.pm-name 商品一覧画面の商品名
.in-partno 商品一覧画面の“品番”という項目名
.pm-partno 商品一覧画面の品番
.in-price 商品一覧画面の”販売価格”という項目名
.pm-price 商品一覧画面の販売価格
.in-fixedprice 商品一覧画面の“定価”という項目名
.pm-fixedprice 商品一覧画面の定価
.in-discount 商品一覧画面の“割引額”という項目名
.pm-discount 商品一覧画面の割引額
.in-shipping 商品一覧画面の“送料”という項目名
.pm-shipping 商品一覧画面の送料
.in-end 商品一覧画面の“販売終了日”という項目名
.pm-end 商品一覧画面の販売終了日
.in-stock 商品一覧画面の“在庫数”という項目名
.pm-stock 商品一覧画面の在庫数
.pm-description 商品一覧画面の商品詳細仕様
.pm-comment 商品一覧画面のコメント
.pmd-name 商品詳細画面の商品名
.ind-partno 商品詳細画面の“品番”という項目名
.pmd-partno 商品詳細画面の品番
.ind-price 商品詳細画面の“販売価格”という項目名
.pmd-price 商品詳細画面の販売価格
.ind-fixedprice 商品詳細画面の“定価”という項目名
.pmd-fixedprice 商品詳細画面の定価
.ind-discount 商品詳細画面の“割引額”という項目名
.pmd-discount 商品詳細画面の割引額
.ind-shipping 商品詳細画面の“送料”という項目名
.pmd-shipping 商品詳細画面の送料
.ind-end 商品詳細画面の“販売終了日”という項目名
.pmd-end 商品詳細画面の販売終了日
.ind-stock 商品詳細画面の“在庫数”という項目名
.pmd-stock 商品詳細画面の在庫数
.pmd-description 商品詳細画面の商品詳細仕様
.pmd-comment 商品詳細画面のコメント

【customize.cssファイルのカスタマイズ例】

商品一覧画面の販売価格という項目名の文字のサイズを120%に、販売価格を文字の色をレッドに、商品詳細画面の商品詳細仕様の文字の色をブルーにします。

商品一覧画面の販売価格という項目名の文字のサイズを120%する場合

商品一覧画面の販売価格を文字の色をレッドにする場合

商品詳細画面の商品詳細仕様の文字の色をブルーにする場合

カスタマイズ後の商品一覧画面

カスタマイズ後の商品詳細画面

4. ファイルマネージャを使って、3で編集したcustomize.cssを以下のディレクトリにアップロードしてください。

httpを選択された場合
/http/[入力したショップ用ディレクトリ名]/common/css/
httpsを選択された場合
/https/[入力したショップ用ディレクトリ名]/common/css/
←テンプレートファイルのカスタマイズ 独自の商品カタログ作成→

お問い合わせ・ご相談

マニュアルに関するお問い合わせがありましたら、
お気軽にお問い合わせください。

お電話でのお問い合わせ・ご相談
0120-414016 (平日 10:00〜12:00 13:00〜18:00)
フォームでのお問い合わせ・ご相談
お問い合わせ・ご相談フォーム

コントロールパネル

契約者パネル

※お客さま情報の確認、オプションサービス申し込みなど、ご契約に関する設定を行います。

管理者パネル

※WEB制作機能の利用やメールアカウント登録など、サーバに関する設定を行います。

利用者パネル

※メールアカウントごとにメールに関する詳細設定を行います。

通信状況確認ツール

お客さまのPC環境で管理者パネル・利用者パネルが使用可能かを確認できます。
本ツールはサーバ仕様Ver2.0、2.1用です

通信状況確認ツール


レンタルサーバのスマイルサーバNTTスマートコネクトが運営しています。

[ NTTスマートコネクトのサービス ]
メディアコネクト ラック・コネクティビティ・運用サービスを提供するハウジングサービス
スマートストリーム ライブ中継・オンデマンド配信に対応した映像配信サービス
Copyright © NTT Smart Connect Corp. All right reserved.