メインコンテンツへスキップ
のプロンプトにスタイルを適用すると、ユーザーに一貫したブランディングのログイン体験を提供できます。Universal Login のノーコードエディターを使用すると、ログインフロー全体を通じてユーザーに表示されるプロンプトの色、フォント、枠線、背景を簡単にカスタマイズできます。 ノーコードエディターでは、Universal Login のブランディングテーマをカスタマイズできます。各プロンプトに含まれるテキストをカスタマイズするには、Customize Universal Login Text Elementsを参照してください。より高度なカスタマイズ機能については、Customize Universal Login Page Templatesを参照してください。
ノーコードエディターを利用するには、Universal Login を有効にする必要があります。Classic Login エクスペリエンスでは、このエディターはサポートされていません。

​
Universal Login ノーコードエディター

Universal Login のテーマをカスタマイズするには、以下の手順に従ってください。
  1. Auth0 Dashboard で、Branding > Universal Login > Customization Options に移動します。
  2. Styles メニューからテーマコンポーネント (例: Colors) を選択します。次に、右側に表示されるオプションをカスタマイズします。
  3. テーマのカスタマイズが完了したら、Save and Publish を選択します。
テーマを保存すると、ログインエクスペリエンスのライブプレビューにアクセスして、各画面を確認およびテストできます。新しいタブでプレビューを開くには、ノーコードエディターの上にある Try を選択します。

​
テーマコンポーネント

目的のUniversal Loginテーマを作成するには、Styles メニューに次のコンポーネントがあります。
要素の色を変更するには、対象の入力フィールドを選択します。特定の色を選ぶには、次の方法があります。
  • カラーピッカーを使用します。
  • Hex code または RGB 値を入力します。
  • スポイトツールを選択して、利用可能な要素に画面上の色を適用します。
要素説明
プライマリボタンプライマリボタン、または次のアクションをトリガーするボタンを、選択した色で塗りつぶします。
プライマリボタンラベルプライマリボタン内のテキストの色を変更します。
セカンダリボタンの境界線入力フィールドの境界線を変更します。
セカンダリボタンラベルクリック可能なセカンダリフィールド内のテキストを変更します。
リンクとフォーカス中のコンポーネントパスワードのリセットや別の認証方法の試行など、別のワークフローを開始するリンクのテキスト色を変更します。
基本フォーカス色選択前にマウスをボタンに重ねたときのボタンの色を変更します。
基本ホバー色ユーザーがボタンをクリックしたときのボタンの色を変更します。
ヘッダーヘッダー内のタイトルのテキスト色を変更します。
本文テキスト本文テキストの色を変更します。
ウィジェットの背景ウィジェットの背景色を変更します。
ウィジェットの境界線ウィジェットの境界線の色を変更します。
入力ラベルとプレースホルダー入力フィールドのラベルとプレースホルダーテキストを変更します。
入力テキストユーザーが入力フィールドに入力するテキストの色を変更します。たとえば、username フィールドやパスワードフィールドです。
入力境界線入力フィールドの境界線の色を変更します。
入力背景入力フィールドの背景色を変更します。
アイコン入力フィールド内のアイコンの色を変更します。
エラーウィジェット内のエラーメッセージの色を変更します。
成功ウィジェット内の成功メッセージの色を変更します。
変更を加えると、プレビューウィンドウに、指定した変更が適用されたウィジェットの例がいくつか表示されます。
既定のフォントを変更するには、入力フィールドに任意の WOFF (Web Open Font Format) ファイルの URL を入力します。WOFF ファイルは、CORS が有効な CDN、または Access-Control-Allow-Origin ヘッダーを設定したホスティングサイトでホストする必要があります。フォント URL パネルの下にある Reference text size のピクセルオプションで、全体のテキストサイズを調整します。Reference text を変更しても、その他のオプションは変わらない点に注意してください。次の要素は個別に変更できます。
  • タイトル
  • サブタイトル
  • 本文テキスト
  • ボタンテキスト
  • 入力ラベル
  • リンク
設定するオプションを選択すると、プレビューペインにウィジェット上での要素の位置が表示され、指定したサイズに調整されます。
ボーダー、ボタンスタイル、入力フィールド、ウィジェットの角丸をカスタマイズするには、スライダーを調整するか、使用可能なオプションから選択します。
OptionDescription
Button border weightログインプロンプト内の入力フィールドを囲むボーダーの幅を調整します。
Buttons styleウィジェット内のボタンの形状を変更します。使用可能なオプションは、角ばった形、角丸、またはピル型です。
Button border radius角丸を選択した場合に、ボタンの角の丸みを調整します。
Input border weightログインプロンプト内の入力フィールドとボタンのボーダーの幅を調整します。
Inputs styleログインプロンプト内の入力フィールドの形状を変更します。使用可能なオプションは、角ばった形、角丸、またはピル型です。
Input border radius角丸を選択した場合に、入力フィールドの角の丸みを調整します。
Widget corner radiusウィジェットの角を、角ばった形から角丸に変更します。
Widget border weightウィジェットのボーダーの幅を調整します。
Shadowウィジェットに影を付けるかどうかを指定するチェックボックスです。
ロゴの URL を追加して、ロゴの位置や高さ、テキストの配置、ソーシャルログインの表示位置を設定します。
要素説明
ロゴの位置ウィジェットをページの左、右、または中央のどこに配置するかを選択します。ロゴを非表示にすることもできます。
ロゴ URLカスタムロゴの URL を入力します。Auth0 では SVG ファイルを推奨しています。
ロゴの高さウィジェット上部に表示されるロゴのサイズを調整します。
ヘッダーテキストの配置ヘッダー内のテキストを左揃え、右揃え、または中央揃えにするかを選択します。
ソーシャルボタンのレイアウトボタン内のテキストを上部または下部のどちらに配置するかを選択します。
プロンプトウィジェットに表示する背景を選択するには、背景画像の URL を追加します。No-Code Editor は、PNG や JPEG などの画像形式にも対応しています。
Auth0 では、幅が 2000px 以上の JPEG 形式の画像を使用することを推奨しています。
次に、ウィジェットを画面の中央、左、右のいずれに配置するかを選択します。

​
Management API

Management API を使用して、Universal Login のテーマをカスタマイズすることもできます。具体的には、ブランディング エンドポイントを使用して次の操作を行えます。