サイト会員:既定の新規登録フォームとログインフォームのデザインを変更する

読了時間:8分
訪問者が会員エリアに新規登録またはログインする際の画面をデザインしましょう。このデザインは、サイト上のパスワードで保護されたページにも適用されます。
既定のフォームはあらかじめデザインされています。サイトの色やフォントに合わせているため、デザインの一貫性を保つことができます。既定のフォームのデザインをゼロからカスタマイズすることはできませんが、サイトスタイルをカスタマイズすることで、一部のデザイン要素を制御することができます。
この記事では、以下の変更方法について説明します:
カスタム新規登録 / ログインフォームを使用している場合:
この記事では、既定のフォームについて説明します。カスタムフォームを使用している場合は、以下をクリックしてカスタマイズ方法をご確認ください:

ページタイトルのフォントを変更する

パスワード画面のタイトルテキストのフォントは、見出し h2 のテキストテーマから取得されます。フォントを変更したい場合は、サイトのテキストスタイルをカスタマイズする必要があります。
重要:
これにより、サイトの見出し h2 テーマを持つ他のテキストも変更されます。

見出し h2 のフォントを変更する方法:

Wix エディタ
Wix Studio エディタ
  1. エディタ左側の「サイトデザイン をクリックします。
  2. テキストテーマ」をクリックします。
  3. 見出しスタイルをカスタマイズ」をクリックします。
  4. 見出し h2」にマウスオーバーし、「編集」アイコン  をクリックします。
  5. 新しいフォントを選択します。
  6. 適用」をクリックして変更内容を保存します。
Wix エディタの「見出し h2」フォントとそれに対応する会員エリアの新規登録フォームのタイトルテキストのスクリーンショット。

ページ上の他のテキストパーツのフォントを変更する

パスワード画面のその他すべてのテキストパーツのフォントは、段落 2 のテキストテーマから取得されます。フォントを変更したい場合は、サイトのテキストスタイルをカスタマイズする必要があります。
重要:
これにより、サイトの段落 2 テーマを持つ他のテキストも変更されます。

段落 2 のフォントを変更する方法:

Wix エディタ
Wix Studio エディタ
  1. エディタ左側の「サイトデザイン をクリックします。
  2. テキストテーマ」をクリックします。
  3. 段落スタイルをカスタマイズ」をクリックします。
  4. 段落 2」にマウスオーバーし、「編集」アイコン  をクリックします。
  5. 新しいフォントを選択します。
  6. 適用」をクリックして変更内容を保存します。
Wix エディタの「段落 2」フォントとそれに対応する会員エリアの新規登録フォームのテキストのスクリーンショット。

テキストの色を変更する

サイトパレットの「ベースカラー」または「背景・テキストカラー」の最も暗い色をカスタマイズすることで、パスワード画面のタイトルとテキストに別の色を選択します。
重要:
これにより、この色合いが適用されているサイト上の他のパーツの色も変更されます。

テキストパーツの色を変更する方法:

Wix エディタ
Wix Studio エディタ
  1. エディタ左側の「サイトデザイン をクリックします。
  2. カラーテーマ」をクリックします。
  3. ベースカラー」下で最も暗い色をクリックします。
  4. カスタムカラー」ボックスのカラーピッカーを使用して、色を変更します。
  5. (オプション)スライダーを使用して、「彩度」と「明るさ」を変更します。
  6. 適用」をクリックします。
Wix エディタのベースカラーとそれに対応する会員エリアの新規登録フォームのテキスト色のスクリーンショット。

サイトの「アクセントカラー」または「アクションの色」で特定の色合いをカスタマイズして、リンクとボタンに別の色を選択します。この色合いは、サイト全体のボタン、リンク、メニューアイテムなどの多くのアクションを起こすパーツに使用されます。
重要:
これにより、この色合いが適用されているサイト上の他のパーツの色も変更されます。

ボタンとリンクの色を変更する方法:

Wix エディタ
Wix Studio エディタ
  1. エディタ左側の「サイトデザイン をクリックします。
  2. カラーテーマ」をクリックします。
  3. アクセントカラー」セクションで最初の色をクリックします。
  4. カスタムカラー」ボックスのカラーピッカーを使用して、アクセントカラーを変更します。
  5. (オプション)スライダーを使用して、「彩度」と「明るさ」を変更します。
  6. 適用」をクリックします。
エディタのアクセントカラーとそれに対応する会員エリア新規登録フォームのボタンの色のスクリーンショット。

背景色を変更する

パスワード画面の背景色を変更するには、サイトのテーマカラーで「ベースカラー」または「背景・テキストカラー」の最も明るい色合いを調整してください。この色合いは、サイト全体で主にページとパーツ背景に自動的に使用されます。
重要:
これにより、この色合いが適用されているサイト上の他のパーツの色も変更されます。

ページ背景の色を変更する方法:

Wix エディタ
Wix Studio エディタ
  1. エディタ左側の「サイトデザイン をクリックします。
  2. カラーテーマ」をクリックします。
  3. ベースカラー」下で最も明るい色をクリックします。
  4. カスタムカラー」ボックスのカラーピッカーを使用して、背景色を変更します。
  5. (オプション)スライダーを使用して、彩度明るさの値を変更します。
  6. 適用」をクリックします。
Wix エディタのベースカラーとそれに対応する会員エリアの新規登録フォームのテキスト色のスクリーンショット。
ヒント:
公開」をクリックして、ライブサイトで変更内容を確認します。サイトをプレビューしても、パスワード画面は表示されません。

お役に立ちましたか?

|