 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、会員制限時の会員グループごとにトップページに案内を出す方法をご紹介します。
それぞれのログインユーザーに会員グループのランクによって訴求内容を変更できます。
デモアカウント
・VIP会員
アカウントID：demo1@cafe-responsive.ocnk.net
パスワード：OCNKDEMO1
・通常会員
アカウントID：demo2@cafe-responsive.ocnk.net
パスワード：OCNKDEMO2
・社内スタッフ
アカウントID：demo3@cafe-responsive.ocnk.net
パスワード：OCNKDEMO3
 |
|
 |
 |
デザイン管理→配置/画像/コメント設定より自由記入欄を利用して下記のHTMLタグを貼り付けてください。
会員登録なしの方用のコンテンツとなります。ログイン後は非表示になります。
information_titleが文字サイズの大きいタイトル、information_descが説明となります。
会員登録ページへ遷移するをボタンを設置しています。
リンク先はご自身のショップURLに変更してください。
<div class="memberinformation">
<div class="information_title"><span>会員登録すると10％割引</span></div>
<div class="information_desc"><span>会員登録していただくと、全商品10%OFFです。会員ランクがVIPに上がるとなんと30%OFF！</span><span class="information_btn"><a href="https://cafe-responsive.ocnk.net/register">会員登録はこちら</a></span></div>
</div>
デザイン管理→スタイルシート編集から下記の指定を貼り付けてください。
※貼り付け位置は、最下部にお願い致します。
.member_group2から.member_group4がそれぞれのグループのclass名となります。
例えば、下記のURLの場合、.member_group4がclass名となります。
https://cafe-responsive.ocnk.net/product/4
※グループのIDの数字については、URLの数字と連動しております。管理画面の受注管理→会員グループ設定ページからも確認することができます。
ID欄の数字が、class名の数字のidとなります。
/* 文言 */
.top_page_body .member_group2 .memberinformation .information_title::beforeで指定している
content: "VIP会員でログインしています";
の行がタイトルの文言となります。
.top_page_body .member_group2 .memberinformation .information_desc::beforeで指定している
content: "VIP会員の方は全商品30％OFFです。";
の行が説明1行目の文言となります。
.top_page_body .member_group2 .memberinformation .information_desc::afterで指定している
content: "さらに10%OFFクーポンがあります。コード：VIPCP10OFF\A（コピーできませんのでメモを取りカート画面でご利用ください。）";
の行が説明2行目の文言となります。
\Aとwhite-space: pre;を利用することで、改行することができます。
それぞれ、ログイングループによって文言を分けて設定できます。
※ただし、before/after疑似要素にて生成していますので、テキストのコピーはできません。クーポンコードをご利用の場合は、ご注意ください。
/* 背景色 */
background-color: #164D84;が背景色となります。
それぞれ、ログイングループによって背景色を分けて設定できます。
/* 共通設定 */
ログイン後の文字色や文字サイズを設定しています。各会員用で共通の設定です。
/* ログイン時案内非表示 */
.top_page_body .membership .memberinformation .information_title span,
.top_page_body .membership .memberinformation .information_desc span {
display: none;
}
/* ======================== */
/* 会員登録なし/ログインなしの方用枠 */
.top_page_body .memberinformation {
padding: 15px;
margin: 20px 0px;
border: 1px solid #E0DFE3;
border-radius: 5px;
text-align: center;
}
/* 会員登録ボタン */
.top_page_body .information_desc .information_btn {
display: block;
}
.top_page_body .information_desc A {
display: inline-block;
padding: 5px 10px;
margin-top: 5px;
background-color: #FFFFFF;
border: 1px solid #FF0000;
border-radius: 5px;
}
/* ======================== */
/* 共通設定 */
/* 会員用文字色 */
.top_page_body .membership .memberinformation {
color: #FFFFFF;
}
/* 会員用文字タイトル */
.top_page_body .information_title {
font-size: 22px;
font-weight: 700;
}
/* 会員用文字説明 */
.top_page_body .information_desc {
font-size: 14px;
}
/* ======================== */
/* ビジター会員用(会員グループ：未会員) */
/* 文言 */
.top_page_body .member_group1 .memberinformation .information_title::before {
content: "ビジター会員でログインしています";
display: block;
}
.top_page_body .member_group1 .memberinformation .information_desc::before {
content: "ショップでの購入金額が30,000円以上で通常会員にランクアップします。";
display: block;
}
/* 背景色 */
.top_page_body .member_group1 .memberinformation {
background-color: #FFFFFF;
color: #000000;
}
/* ======================== */
/* VIP会員用 */
/* 文言 */
.top_page_body .member_group2 .memberinformation .information_title::before {
content: "VIP会員でログインしています";
display: block;
}
.top_page_body .member_group2 .memberinformation .information_desc::before {
content: "VIP会員の方は全商品30％OFFです。";
display: block;
}
.top_page_body .member_group2 .memberinformation .information_desc::after {
content: "さらに10%OFFクーポンがあります。コード：VIPCP10OFF\A（コピーできませんのでメモを取りカート画面でご利用ください。）";
display: block;
font-weight: 700;
white-space: pre;
}
/* 背景色 */
.top_page_body .member_group2 .memberinformation {
background-color: #164D84;
}
/* ======================== */
/* 通常会員用 */
/* 文言 */
.top_page_body .member_group3 .memberinformation .information_title::before {
content: "通常会員でログインしています";
display: block;
}
.top_page_body .member_group3 .memberinformation .information_desc::before {
content: "通常会員の方は全商品10％OFFです。";
display: block;
}
/* 背景色 */
.top_page_body .member_group3 .memberinformation {
background-color: #CC0000;
}
/* ======================== */
/* 社内スタッフ用 */
/* 文言 */
.top_page_body .member_group4 .memberinformation .information_title::before {
content: "社内スタッフでログインしています";
display: block;
}
.top_page_body .member_group4 .memberinformation .information_desc::before {
content: "社内スタッフは全商品20％OFFです。";
display: block;
}
/* 背景色 */
.top_page_body .member_group4 .memberinformation {
background-color: #1698A7;
}
上記の例では、3つのグループですが、さらにグループを追加する場合は、スタイルシートも追加してください。
.member_group5を追加する場合
下記のようなセットをコピーして貼り付けて、色や文字を変更してください。
.top_page_body .member_group5 .memberinformation .information_title::before {
content: "タイトル";
display: block;
}
.top_page_body .member_group5 .memberinformation .information_desc::before {
content: "説明";
display: block;
}
.top_page_body .member_group5 .memberinformation .information_desc::after {
content: "説明";
display: block;
}
/* 背景色 */
.top_page_body .member_group5 .memberinformation {
background-color: #000000;
}
なお、お問い合わせは下記ページからお願い致します。
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.