ログインパーツ

他社サービスログインエリア（システムパーツグループ）

他社IDによるログインボタンを表示するシステムパーツを配置する特殊なシステムパーツ（システムパーツグループ）です。
以下の各ログイン画面ごとにシステムパーツグループが用意されています。

• 他社サービスログインエリア(カート)（システムパーツグループ）
• 他社サービスログインエリア(定期カート)（システムパーツグループ）
• 他社サービスログインエリア(お気に入り)（システムパーツグループ）
• 他社サービスログインエリア(LINE)（システムパーツグループ）
• 他社サービスログインエリア(レビュー)（システムパーツグループ）

ログインせずに購入表示

「ショッピングカートログイン（通常カート）」にのみ表示されます。
その他のログイン画面や、「定期・頒布会カート（会員登録必須）」から遷移した場合には、表示されません。

会員登録誘導表示

【方法1】レイアウトの配置のみで変更する

まず最も簡単な方法をご紹介します。

「LINEでログイン」は「LINEログインパーツ（システムパーツ）」に含まれ、「Apple」「Google」「Amazon」のボタンは「連携ログインパーツ（システムパーツ）」に含まれます。
下図を参考に、該当レイアウトで単純にパーツの配置順を入れ替えます。

パーツを操作する階層は、「BODY＞メインエリア＞コンテンツエリア＞ログイン情報表示エリア＞futureshop会員エリア＞他社サービスログインエリア」です。

ただし、この場合「連携サービスでログイン・会員登録」の見出しが「LINEでログイン」ボタンの下に表示されてしまいます。

上記のような表示になってしまう理由は、「連携サービスでログイン・会員登録」の見出しが、「Apple」「Google」「Amazon」のボタンが含まれる「連携ログインパーツ（システムパーツ）」内に含まれているからです。

【方法2】CSSとフリーパーツで調整する

「見出し」を「LINEでログイン」ボタンの上に表示したい場合は、以下の操作手順をご覧ください。
既存の「連携サービスでログイン・会員登録」の見出しをCSSにて非表示にし、新たな見出しを「フリーパーツ」で用意します。

＜まずはじめに＞ご注意事項

ここでは「デバイス設定」において、スマートフォンからの閲覧時にスマートフォン専用の「テーマ」が設定されている場合の手順について説明します。

「LINEでログイン」ボタンはスマートフォンのみで表示されます。
そのため、スマートフォンに「PC（その他）」と同じテーマを選択している場合、PC画面に「LINEでログイン」ボタンが表示されていないにもかかわらず、「連携サービスでログイン・会員登録」の見出しも表示されなくなります。本手順に沿って操作する場合は、デバイス設定の状況に注意してください。

1．「連携ログインパーツ（システムパーツ）」内に含まれている見出しを非表示にする

オリジナルCSSやアイテムに以下のサンプルを参考に入力してください。

  /* LINEログインパーツを連携ログインパーツより上に配置した際の表示調整 */
  /* 「連携ログインパーツ（システムパーツ）」の見出しを非表示に */
  .fs-c-linkedServiceLogin__title {
    display: none;
  }
  /* 追加したフリーパーツ見出しとLINEログインパーツ間の余白を調整 */
  .fs-c-subSection__title + .fs-c-anotherLogin--line {
    margin-top: 0;
  }
  /* LINEログインパーツと連携ログインパーツ間の余白を調整 */
  .fs-c-anotherLogin--line + .fs-c-linkedServiceLogin {
    margin-top: 24px;

2．新たな見出しを作成する

フリーパーツを利用します。
以下のCSSを参考にフリーパーツを作成してください。（パーツを追加する方法）

「パーツ名」や「置換文字」はわかりやすいものを任意に設定してください。

<h2 class="fs-c-subSection__title">連携サービスでログイン・会員登録</h2>

3．レイアウトに必要な「フリーパーツ」を配置し、「LINEログインパーツ」の位置を変更する

例として「マイページログイン(SP)」画面に設定する、として説明します。
「ショッピングカートログイン(SP)」「ショッピングカートログイン(定期)(SP)」「お気に入りログイン(SP)」「レビューログイン(SP)」にも同じ操作を行ってください。

手順［2］で作成したフリーパーツを追加し、既存の「LINEログインパーツ（システムパーツ）」と「連携ログインパーツ（システムパーツ）」の位置を入れ替えます。

パーツを操作する階層は、「BODY＞メインエリア＞コンテンツエリア＞ログイン情報表示エリア＞futureshop会員エリア＞他社サービスログインエリア」です。

上図を参考に、「連携サービスでログイン・会員登録見出し（新規で作成したフリーパーツ）」「LINEログインパーツ」「連携ログインパーツ」の順に配置してください。

4．プレビューで確認し、問題なければ保存する

完了したら、「レイアウト」変更画面下の［プレビュー］ボタンを押下してプレビューを確認し、問題なければ［保存する］を押下します。

5．すべての「ログイン連携」や「LINEログイン連携」の利用をやめた場合（オプション解約・利用設定のチェックOFFなど）

忘れずに、手順［1］で記載したCSSを削除し、手順［3］で「連携サービスでログイン・会員登録見出し」用に追加した「フリーパーツ」を該当レイアウトから外してください。