Skip to main content
のプロンプトにスタイルを適用すると、ユーザーに一貫したブランディングのログイン体験を提供できます。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 値を入力します。
  • スポイトツールを選択して、利用可能な要素に画面上の色を適用します。
変更を加えると、プレビューウィンドウに、指定した変更が適用されたウィジェットの例がいくつか表示されます。
既定のフォントを変更するには、入力フィールドに任意の WOFF (Web Open Font Format) ファイルの URL を入力します。WOFF ファイルは、CORS が有効な CDN、または Access-Control-Allow-Origin ヘッダーを設定したホスティングサイトでホストする必要があります。フォント URL パネルの下にある Reference text size のピクセルオプションで、全体のテキストサイズを調整します。Reference text を変更しても、その他のオプションは変わらない点に注意してください。次の要素は個別に変更できます。
  • タイトル
  • サブタイトル
  • 本文テキスト
  • ボタンテキスト
  • 入力ラベル
  • リンク
設定するオプションを選択すると、プレビューペインにウィジェット上での要素の位置が表示され、指定したサイズに調整されます。
ボーダー、ボタンスタイル、入力フィールド、ウィジェットの角丸をカスタマイズするには、スライダーを調整するか、使用可能なオプションから選択します。
ロゴの URL を追加して、ロゴの位置や高さ、テキストの配置、ソーシャルログインの表示位置を設定します。
プロンプトウィジェットに表示する背景を選択するには、背景画像の URL を追加します。No-Code Editor は、PNG や JPEG などの画像形式にも対応しています。
Auth0 では、幅が 2000px 以上の JPEG 形式の画像を使用することを推奨しています。
次に、ウィジェットを画面の中央、左、右のいずれに配置するかを選択します。

​
Management API

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