 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、会員制限時の会員グループごとの割引価格の文字色を変えたりラベルを表示したりする方法をご紹介します。
それぞれのログインユーザーに会員グループのランクによって訴求内容を変更できます。
 |
|
 |
 |
デザイン管理→スタイルシート編集から下記の指定を貼り付けてください。
※貼り付け位置は、最下部にお願い致します。
.member_group2から.member_group4がそれぞれのグループのclass名となります。
例えば、下記のURLの場合、.member_group4がclass名となります。
https://cafe-responsive.ocnk.net/product/4
※グループのIDの数字については、URLの数字と連動しております。管理画面の受注管理→会員グループ設定ページからも確認することができます。
・ラベルの文字
content: "VIP会員割引"; この文言がラベルの文字となります。
・ラベルの背景色
background-color: #164D84; このカラーコードが背景色となります。
・販売価格の文字
color: #164D84; このカラーコードが文字色となります。
.detail_page_body .membership .detail_item_data .selling_price > .price_label::before {
display: inline-block;
color: #FFF;
padding: 1px 3px;
margin-right: 5px;
position: relative;
top: -3px;
font-size: 11px;
}
.detail_page_body .member_group2 .detail_item_data .selling_price > .price_label::before {
content: "VIP会員割引";
background-color: #164D84;
}
.detail_page_body .member_group2 .detail_item_data .selling_price > .price_label,
.detail_page_body .member_group2 .detail_item_data .selling_price > .price_label + .colon + .figure {
color: #164D84;
font-weight: 700;
}
.detail_page_body .member_group3 .detail_item_data .selling_price > .price_label::before {
content: "会員割引";
background-color: #CC0000;
}
.detail_page_body .member_group3 .detail_item_data .selling_price > .price_label,
.detail_page_body .member_group3 .detail_item_data .selling_price > .price_label + .colon + .figure {
color: #CC0000;
font-weight: 700;
}
.detail_page_body .member_group4 .detail_item_data .selling_price > .price_label::before {
content: "スタッフ割引";
background-color: #1698A7;
}
.detail_page_body .member_group4 .detail_item_data .selling_price > .price_label,
.detail_page_body .member_group4 .detail_item_data .selling_price > .price_label + .colon + .figure {
color: #1698A7;
font-weight: 700;
}
上記の例では、3つのグループですが、さらにグループを追加する場合は、スタイルシートも追加してください。
.member_group5を追加する場合
content: "ラベル名";
background-color: #000000;
}
.detail_page_body .member_group5 .detail_item_data .selling_price > .price_label,
.detail_page_body .member_group5 .detail_item_data .selling_price > .price_label + .colon + .figure {
color: #000000;
font-weight: 700;
}
なお、お問い合わせは下記ページからお願い致します。
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.