Skip to main content
のプロンプトをスタイル設定することで、ユーザーに一貫したブランド体験のログイン画面を提供できます。Universal Loginのノーコードエディターを使用すると、ログインフロー全体でユーザーに表示されるプロンプトの色、フォント、境界線、背景を簡単にカスタマイズできます。 ノーコードエディターでは、Universal Loginのブランディングテーマをカスタマイズできます。各プロンプトに含まれるテキストをカスタマイズするには、Universal Loginのテキスト要素をカスタマイズするを参照してください。さらに幅広くカスタマイズするには、Universal Login Page Templatesをカスタマイズするを参照してください。
ノーコードエディターを利用するには、Universal Loginを有効にする必要があります。クラシックログインでは、このエディターはサポートされていません。

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

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

​
テーマのコンポーネント

目的のUniversal Loginテーマを作成するには、[Styles] メニューに次のコンポーネントがあります：
入力フィールドを選択して、要素の色を変更します。特定の色を選ぶには、次の方法があります。
  • カラーピッカーを使用します。
  • HexコードまたはRGB値を入力します。
  • スポイトツールを選択して、利用可能な要素に使用する色を画面上から選択します。
変更を加えると、プレビューウィンドウに、指定した変更が適用されたウィジェットの例がいくつか表示されます。
デフォルトのフォントを変更するには、入力欄に任意の WOFF (Web Open Font Format) ファイルの URL を入力します。WOFF ファイルは、CORS が有効な CDN、または Access-Control-Allow-Origin ヘッダーを設定したホスティングサイトでホストする必要があります。フォント URL パネルの下にある Reference text size のピクセルオプションで、全体の文字サイズを調整します。基準テキストのサイズを変更しても、他のオプションは変わらない点に注意してください。次の要素は個別に変更できます。
  • タイトル
  • サブタイトル
  • 本文テキスト
  • ボタンテキスト
  • 入力ラベル
  • リンク
設定するオプションを選択すると、プレビューペインにウィジェット上でのその要素の位置が表示され、指定したサイズに合わせて調整されます。
境界線、ボタンのスタイル、入力フィールド、widget の角をカスタマイズするには、スライダーを調整するか、利用可能なオプションから選択します。
ロゴのURLを追加すると、位置、高さ、テキストの配置、ソーシャルログインの表示位置を設定できます。
prompt ウィジェットに表示する背景を選択するには、背景画像の URL を追加します。No-Code Editor は、PNG や JPEG などの画像形式にも対応しています。
Auth0 では、幅が 2000px 以上の JPEG 画像を使用することを推奨しています。
次に、ウィジェットを画面の中央、左、右のどこに配置するかを選択します。

​
Management API

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