サイト会員:パスワード画面のデザインを変更する

読了時間:5分
会員エリアで新規登録またはログインする際にサイト訪問者に表示される画面をデザインしましょう。これはパスワード保護されたページにも該当します。
このページは、一貫した外観を維持するため、サイトの配色とフォントに基づいて既にデザインされています。サイトデザインからこれらの設定を制御することで、デザインを変更することができます。

変更方法:

カスタム新規登録 / ログインフォームを使用している場合:
この記事ではデフォルトフォームについて説明します。カスタマイズ方法は以下をクリックしてください:

タイトルフォントを変更する

パスワード画面のタイトルテキストのフォントは、見出し h2 のテキストテーマから取得されます。フォントを変更したい場合は、サイトデザインからこのテーマをカスタマイズして保存する必要があります。

サイトデザインで見出し h2 を変更する方法:

  1. エディタ左側で「サイトデザイン」アイコン  をクリックします。
  2. テキスト」をクリックします。
  3. 見出し h2」にマウスオーバーし、「編集」アイコン  をクリックします。
  4. オプションを使用してテーマをカスタマイズします。フォント、色、文字サイズ、テキストの太字と斜体を変更できます。
  5. 適用」をクリックして変更内容を保存します。
重要:
これにより、サイトの見出し h2 テーマを持つ他のテキストも変更されます。

テキストパーツフォントを変更する

ページに表示されるすべてのテキストパーツフォントは、段落 2 のテキストスタイルから取得されます。フォントを変更する場合は、スタイルマネージャーからこのテキストスタイルをカスタマイズして保存する必要があります。

サイトデザインで段落 2 を変更する方法:

  1. エディタ左側で「サイトデザイン」アイコン  をクリックします。
  2. テキスト」をクリックします。
  3. 段落 2」にマウスオーバーし、「編集」アイコン  をクリックします。
  4. オプションを使用してテーマをカスタマイズします。フォント、色、文字サイズ、テキストの太字と斜体を変更できます。
  5. 適用」をクリックして変更内容を保存します。
重要:
これにより、サイトの段落 2 テーマを持つ他のテキストも変更されます。

テキストの色を変更する

サイトデザインで色 1 の最も暗い色合いを調整して、ページのタイトルとテキストに別の色を選択します。この色合いは、サイト全体のさまざまなテキスト要素に自動的に使用されます。

サイトデザインで色 1 を変更する方法:


  1. エディタ左側で「サイトデザイン」アイコン  をクリックします。
  2. 」をクリックします。
  3. 色 1」下の最も暗い色合いをクリックします。
  4. カラープレビュー」横のカラーピッカーをクリックして、色を変更します。
  5. (オプション)スライダーを使用して、彩度明るさの値を変更します。
  6. 適用」をクリックします。
重要:
上記の手順に従って色合いを変更すると、同じ色合いの他のすべてのパーツが変更されます。

サイトデザインで色 2 の中央の色合いを調整して、リンクとボタンに別の色を選択します。この色は、サイト全体のボタン、リンク、メニューアイテムなどの多くのアクションを起こすパーツに自動的に使用されます。

サイトデザインで色 2 を変更する方法:


  1. エディタ左側で「サイトデザイン」アイコン  をクリックします。
  2. 」をクリックします。
  3. 色 2」下の中央の色合いをクリックします。
  4. カラープレビュー」横のカラーピッカーをクリックして、色を変更します。
  5. (オプション)スライダーを使用して、彩度明るさの値を変更します。
  6. 適用」をクリックします。
重要:
上記の手順に従って色合いを変更すると、同じ色合いの他のすべてのパーツが変更されます。

背景色を変更する

ページの背景色を変更するには、サイトデザインで色 1 に別の色を選択します。この色は、サイト全体で主にページとパーツ背景に自動的に使用されます。

サイトデザインで色 1 を変更する方法:


  1. エディタ左側で「サイトデザイン」アイコン  をクリックします。
  2. 」をクリックします。
  3. 色 1」横の「カラーを編集」アイコン  をクリックします。
  4. 次のいずれかの方法で、新しい色を選択します:
    • カーソルを使用して、新しい色を見つけて選択します。
    • HEX、RGB、または HSB 値を入力します。
  5. (オプション)好みの色合いに調整します。
    1. 調整したい色合いをクリックします。
    2. スライダーを使用して、彩度明るさの値を変更します。
    3. 適用」をクリックします。
重要:
上記の手順に従って色 1 を変更すると、この色の他のすべてのパーツが変更されます。
ヒント:
ライブサイトでデザインの変更を確認しましょう!サイトをプレビューしても画面は表示されません。

お役に立ちましたか?

|