ログインID連携ボタンから、新規会員登録を行う際の登録確認画面の調整はどのようにしたらいいですか？

  • 更新日： 2024-08-24 03:38:57 UTC

コマースクリエイターご利用店舗様専用の記事です

会員登録確認の画面について

ゲスト(会員登録していない非会員)が、Apple/Google/Amazonアカウントいずれかの
ログイン機能でログインしようとしたとき、「会員登録確認画面（/p/link-register）」の画面(レイアウト)が表示されます。

詳しい画面遷移は下記ページからもご確認いただけます。

 

2022年10月19日以前からAmazonログイン機能をご利用の店舗様へ

2022年10月19日のバージョンアップ以前から、Amazonログイン機能をご利用の店舗様は、
下記キャプチャ④「会員登録確認画面」の画面(レイアウト)が追加で表示される仕組みに変わっております。
こちらの画面(レイアウト)はfutureshopの初期パーツが設置されている状態であるため、
レイアウトを確認の上、調整をお願いいたします。

  • Amazonログイン機能は、Amazon Pay決済を利用している場合、ご利用の機能です。
  • ゲスト(非会員)がログインボタンから会員登録しようとした場合のみ表示される画面ですので、
    通常の会員登録やAmazon Pay決済のご注文手続きについては変更ございません。

Amazon____1.png

Amazon____2.png

 

実際の画面（レイアウト）の表示方法

ページにアクセスし現在の表示を確認します。
対象の画面（ https://ご利用ドメイン/p/link-register）にアクセスするには、
実際にゲスト（会員登録していないアカウント）にて「ログイン（https://ご利用ドメイン/p/login）」画面から
「Amazonでログイン」ボタンを押下しAmazonログインを行っていただく必要がございます。

 

利用中の画面（レイアウト）の確認方法

commerce creator＞ページ キーワード「会員登録確認」と入力し「検索する」ボタンを押下し、
検索結果で表示された 会員登録確認 のレイアウトの鉛筆マークをクリック

______-1.png

↓
ページの内容と利用中のテーマを確認し、利用中と表示されている各テーマのレイアウト名をクリック
【利用中】マークが表示されているレイアウトが現在ご利用中の画面（レイアウト）です。

______-2.png
レイアウト名をクリックするとレイアウト変更画面になります。
レイアウトの調整は制作担当者様へご相談の上、デザインをご調整いただきますようお願いいたします。

 

WEBスキミング防止機能について

「会員登録確認画面（/p/link-register）」の画面は、WEBスキミング防止機能の対象画面です。
そのため、外部のJavascriptファイルを読み込みされる場合、削除される仕組みです。
一例として、同じく対象画面となっている画面（ログインページ等）と同じパーツを利用するなどしてご調整ください。

 

デザイン調整がうまくいかない場合

基本的には制作担当者様へデザイン調整をご相談いただきますようお願いいたします。
すぐのご対応が難しい場合の一次対応として、下記表示イメージ「会員登録確認」のようなデザインに調整するためのCSSをご案内します。
____CSS.png※現在の構築状況やによって表示イメージは異なります。

デザインを調整するためのサンプルCSSを「会員登録確認」のレイアウトにのみ反映させる手順

（１）パーツを作成する

commerce creator＞パーツ 「+パーツを追加する」＞フリーパーツを選択
パーツ名：任意の文字を入力（例：会員登録確認CSS）
置換文字：任意の文字を入力（例：memberregistercss）
表示内容に以下＜サンプルCSS＞の内容を入力
「保存する」ボタンを押下

（２）作成したパーツをレイアウトに設置

commerce creator＞テーマご利用中の各テーマ＞レイアウト＞レイアウト名「会員登録確認」で検索
会員登録確認のレイアウトの鉛筆マークをクリック
「<head設定>内を変更する」ボタンをクリック
キーワードに（１）で作成したパーツ名（例：会員登録確認CSS）を入力し検索
ドラッグアンドドロップでレイアウトに設置
「保存する」ボタンを押下

※CSSでのカスタマイズは思わぬ挙動をする場合がございますので、
設定後、意図した表示・動作になるか、購入が正しく行えるかなど必ず動作確認をお願いいたします。

＜サンプルCSS＞

<style>
/* ------------
　　　　テキストリンク
------------　*/
a {
color: #3572b0;
text-decoration: none;
}
a:visited {
color: #728496;
}
a:hover {
color: #3790e8;
text-decoration: underline;
}
a:active {
color: #3381ce;
}

/* ------------
　　　　レイアウト
------------　*/
.fs-l-main{
font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
font-size: 1.4rem;
padding: 8px;
max-width: 1216px;
margin:0 auto
}
.fs-c-inputInformation__message {
margin: 24px auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

/* 名前とメールアドレスエリア　*/
.fs-c-linkedAccountInfo {
box-shadow: 0 0 2px #b2b2b2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
padding: 16px;
}

.fs-c-inputInformation__button {
margin-top: 32px;
}

.fs-c-inputInformation__field {
margin: 24px auto;
max-width: 600px;
}

.fs-c-agreementConfirmation__message {
background: rgba(126, 126, 126, 0.08);
padding: 8px;
}

fieldset:not(.fs-c-additionalCheckField) + .fs-c-additionalCheckField {
margin-top: 32px;
}




/* ------------
　　　　ボタン
------------　*/

.fs-c-buttonContainer {
padding: 8px 0;
}
.fs-c-buttonContainer--pair {
display: grid;
grid-template-columns: 1fr;
grid-row-gap: 32px;
}
@media screen and (min-width: 768px) {
.fs-c-buttonContainer--pair {
grid-template-columns: 1fr 1fr;
grid-column-gap: 24px;
}
.fs-c-buttonContainer--pair > * {
font-size: 1.4rem;
min-width: 160px;
}
.fs-c-buttonContainer--pair > *:first-child {
grid-row: 1;
grid-column: 1;
justify-self: end;
}
.fs-c-buttonContainer--pair > *:last-child {
grid-row: 1;
grid-column: 2;
justify-self: start;
}
}

/* 会員登録　*/
.fs-c-button--primary {
background: #444444;/* 背景色　*/
border: 1px solid #444444;/* 枠線　*/
border-radius: 0px;/* 角を丸くする　*/
color: #ffffff;/* 文字色*/
cursor: pointer;
display: inline-block;
font-size: 1.4rem;
line-height: 1;
text-decoration: none;
text-align: center;
padding: 0.8em 1.6em 0.6em;
box-shadow: 0 0 2px #b2b2b2;
min-width: 240px;
}
/* キャンセル　*/
.fs-c-button--standard {
background: #ebebeb;/* 背景色　*/
border: 1px solid #bbbbbb;/* 枠線　*/
border-radius: 0px;/* 角を丸くする　*/
color: #3c3c3c;/* 文字色　*/
cursor: pointer;
display: inline-block;
font-size: 1.2rem;
line-height: 1;
text-decoration: none;
text-align: center;
padding: 0.8em 1.6em 0.6em;
box-shadow: 0 0 2px #b2b2b2;
}

</style>
  • ボタンの色を変更する場合
    /* 背景色　*/　の色指定を変更して調整してください。

  • ボタンの角を丸くする場合
    /* 角を丸くする　*/　のpxの数値を大きくして調整してください。

 

この記事は役に立ちましたか？

関連記事