翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。 # マネージドログインページにブランディングを適用する 認証サービスとアプリケーションの間で一貫したユーザーエクスペリエンスを提供できます。この目標は、 AWS SDK のカスタムフォームとバックエンド API オペレーション、またはマネージドログインを使用して達成できます。マネージドログインとクラシックのホストされた UI は、ユーザープールによる認証を提供するアプリケーションコンポーネントのウェブフロントエンドです。マネージド認証サービスをアプリケーション UX と同期するには、2 つのカスタマイズオプションとして、ブランディングエディタとホステッド UI ブランディングがあります。Amazon Cognito コンソールとユーザープール API オペレーションで、好みのエクスペリエンスを選択できます。 **ブランディングエディタ** [ブランディングエディタ](managed-login-brandingeditor.md)は、最新のユーザープール UI エクスペリエンスである[マネージドログイン](cognito-user-pools-managed-login.md)用の最新のカスタマイズオプションです。ブランディングエディタは、マネージドログインのアセットおよびスタイル用のノーコードビジュアルエディタであり、一連の API オペレーションを使用して多くの設定オプションをプログラムで設定できます。ユーザープールを[ドメイン](cognito-user-pools-assign-domain.md)とマネージドログインを使用して設定すると、ログインページのブランディングデザイナーバージョンが自動的にレンダリングされます。 **ホステッド UI (クラシック) ブランディング** [ホストテッド UI (クラシック) ブランディングエクスペリエンス](hosted-ui-classic-branding.md)には、固定されたスタイルオプションセットを使用してカスケーディングスタイルシート (CSS) ファイルを変更するオプションと、カスタムロゴイメージを追加するオプションの 2 つがあります。これらのオプションは、Amazon Cognito コンソールまたは [SetUICustomization](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html) API オペレーションで設定できます。サービスを開始した時点では、Amazon Cognito にはこのオプションしかありませんでした。ユーザープールを[ドメイン](cognito-user-pools-assign-domain.md)とホステッド UI ブランディングバージョンで設定すると、ログインページのクラシックバージョンが自動的にレンダリングされます。[機能プラン](cognito-sign-in-feature-plans.md)によっては、ホストされた UI のみをサポートする場合があります。 **注記** ブランディングエディタとクラシックブランディングエクスペリエンスは、ホストされた認証サービスのビジュアルプロパティを変更します。現在、複数の言語のいずれかにローカライズする場合を除き、マネージドログインページに表示されるテキストを変更することはできません。ローカライズの詳細については、「[マネージドログインのローカリゼーション](cognito-user-pools-managed-login.md#managed-login-localization)」を参照してください。 ## ブランディングエクスペリエンスを選択してスタイルを割り当てる Amazon Cognito コンソールでは、新しいユーザープールにデフォルトで**マネージドログイン**のブランディングエクスペリエンスが適用されます。マネージドログインが利用可能になる前に設定したユーザープールには、**ホステッド UI (クラシック)** ブランディングが適用されます。マネージドログインブランディングとホステッド UI ブランディングは切り替えることができます。**ブランディングバージョン**を変更すると、Amazon Cognito は、その変更をユーザープールドメインのユーザーインタラクティブページに直ちに反映します。マネージドログインとホステッド UI を使用すると、ユーザープールはアプリケーションクライアントごとに独自のスタイルを持つことができます。 アプリケーションクライアントごとに独自のブランディング*スタイル*を持つことができますが、ユーザープールドメインは、マネージドログインまたはホステッド UI のいずれかとして機能します。スタイルは、アプリケーションクライアントに適用される一連のカスタマイズ設定です。ユーザープールごとに 1 つの[カスタムドメイン](cognito-user-pools-add-custom-domain.md)と 1 つの[プレフィックスドメイン](cognito-user-pools-assign-domain-prefix.md)を設定できます。カスタムドメインとプレフィックスドメインに異なるブランディングバージョンを割り当てることができます。ただし、カスタムドメインを同時に設定している場合、プレフィックスドメインは完全には機能しません。`.well-known` OIDC 検出エンドポイントは、カスタムドメインパス*のみ*を提示します。プレフィックスドメインは、この設定のユーザープールでは、エンドポイント検出 (`openid-configuration`) を必要としないオペレーションにのみ使用できます。ユーザープールのこれらの特性により、ユーザープールごとに 1 つのブランディングバージョンを効果的に選択できます。 マネージドログインのブランディングバージョンに設定されているドメインがユーザープールにあると、ユーザープール内のアプリケーションクライアントにスタイルを割り当てることができます。スタイルは、イメージファイル、表示オプション、CSS 値で構成される一連のビジュアル設定です。アプリケーションクライアントにスタイルを割り当てると、Amazon Cognito はすぐに更新内容をユーザーインタラクティブログインページにプッシュします。選択したブランディングバージョンとこれに適用したカスタマイズが、ユーザーインタラクティブページに反映されます。 ### スタイルの更新と削除 スタイルを作成したら、アプリケーションクライアントにスタイルをリンクします。アプリケーションクライアントのスタイル割り当てを変更するには、まず元のスタイルを削除する必要があります。現在、スタイル間で設定をコピーすることはできません。この操作は、プログラムで行う必要があります。スタイルとアプリケーションクライアント間で設定をレプリケートするには、[DescribeManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBranding.html) API オペレーションを使用してスタイルの設定を取得し、[CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) または [UpdateManagedLoginBranding](https://docs.aws.amazon.com/) を使用して適用します。アプリケーションクライアントの割り当て済みスタイルを変更することはできません。元のスタイルを削除して新しいスタイルを設定することのみができます。API および SDK オペレーションを使用したスタイルの管理の詳細については、「[マネージドログインのブランディングの API および SDK オペレーション](managed-login-brandingeditor.md#branding-designer-api)」を参照してください。 **注記** ブランディングスタイルを作成または更新するプログラムリクエストは、リクエストサイズが 2 MB 以下である必要があります。リクエストがこの制限より大きい場合は、リクエストを複数の `UpdateManagedLoginBranding` リクエストに分割し、最大リクエストサイズを超えないパラメータのグループにします。これらのリクエストでは、指定していないパラメータがデフォルトに設定されることはないため、既存の設定に影響を与えずに、部分的なリクエストを送信できます。 スタイルを削除するには、Amazon Cognito コンソールの **[マネージドログイン]** メニューを使用します。**[スタイル]** で削除するスタイルを選択し、**[スタイルを削除]** を選択します。 ドメインにブランディングを割り当てるプロセスは、以下のステップに要約されます。 1. [ドメインを作成し、ブランディングバージョンを設定します。](cognito-user-pools-assign-domain.md) 1. ブランディングスタイルを作成してアプリケーションクライアントに割り当てます。 **アプリケーションクライアントにスタイルを割り当てるには** 1. ユーザープールの **[ドメイン]** メニューでドメインを作成し、**[ブランディングバージョン]** を **[マネージドログイン]** に設定します。 1. **[マネージドログイン]** メニューに移動します。**[スタイル]** で、**[スタイルを作成]** を選択します。 1. スタイルを割り当てる先のアプリケーションクライアントを選択するか、新しい[アプリケーションクライアント](user-pool-settings-client-apps.md)を作成します。 1. ブランディング設定の構成を開始するには、**[ブランディングエディタを起動]** を選択します。 **Topics** + [ ## ブランディングエクスペリエンスを選択してスタイルを割り当てる ](#managed-login-branding-choose) + [ # ブランディングエディタによるマネージドログインのカスタマイズ ](managed-login-brandingeditor.md) + [ # ホステッド UI (クラシック) ブランディングのカスタマイズ ](hosted-ui-classic-branding.md) # ブランディングエディタによるマネージドログインのカスタマイズ ブランディングエディタは、マネージドログインウェブページ用のビジュアルデザインおよび編集ツールです。Amazon Cognito コンソールに組み込まれています。ブランディングエディタでは、ログインページのプレビューから開始し、Quick Setup オプションまたは詳細ビューの詳細オプションに進むことができます。スタイルパラメータを変更してプレビューしたり、カスタム背景イメージとロゴを追加したりできます。ライトモードとダークモードを設定できます。 ![\[Amazon Cognito ユーザープールのブランディングエディタビジュアルエディタのプレビュー。\]](http://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/images/hosted-ui-customization-editor-preview.png) まず、ユーザープールまたはアプリケーションクライアントに適用できるスタイルを作成します。 **ブランディングエディタの使用を開始するには** 1. [[ドメイン]](cognito-user-pools-assign-domain.md) タブから**ドメインを作成**するか、既存のドメインを更新します。**[ブランディングバージョン]** で、**[マネージドログイン]** を使用するようにドメインを設定します。 1. 既存のアプリケーションクライアントスタイルがある場合は削除します。 1. **[アプリケーションクライアント]** メニューで、アプリケーションクライアントを選択します。 1. **[マネージドログインスタイル]** で、アプリクライアントに割り当てられたスタイルを選択します。 1. **[スタイルを削除]** を選択します。[Confirm] (確認) をクリックして、選択内容を確認します。 1. ユーザープールの **[マネージドログイン]** メニューに移動します。プロンプトに従って、マネージドログインを含む[機能プラン](cognito-sign-in-feature-plans.md)を選択します (まだ選択していない場合)。変更を行わずにブランディングエディタをチェックアウトする場合は、**[この機能をプレビュー]** を選択することもできます。 1. **[スタイル]** で、**[スタイルを作成]** を選択します。 1. スタイルを割り当てるアプリケーションクライアントを選択し、**[作成]** を選択します。新しいアプリケーションクライアントを作成することもできます。 1. Amazon Cognito コンソールでブランディングエディタを起動します。 1. 編集を開始するタブを選択するか、**[エディタを起動]** を選択して [[Quick Setup]](#branding-designer-quick-setup) に移動します。以下のタブが利用可能です。 **プレビュー** マネージドログインページで現在の選択内容がどのように表示されるかを確認します。 **基盤** 全体的なテーマを設定し、外部 ID プロバイダーへのリンクとスタイルフォームフィールドを設定します。 **コンポーネント** ヘッダー、フッター、個々の UI 要素のスタイルを設定します。 1. 初期設定を選択するには、Quick Setup に移動します。**[設定カテゴリの変更]** を選択し、**[Quick Setup]** を選択します。**[続行]** を選択すると、ブランディングエディタが起動し、設定する一連の基本オプションが表示されます。 ## テキストとローカリゼーション ブランディングエディタでテキストを変更またはローカライズすることはできません。代わりに、ユーザーに配信する URL に `lang` クエリパラメータを追加します。このパラメータにより、マネージドログインページは利用可能な言語の 1 つにローカライズされます。詳細については、「[マネージドログインのローカリゼーション](cognito-user-pools-managed-login.md#managed-login-localization)」を参照してください。 ## Quick Setup **[ブランディングエディタを起動]** ボタンを選択すると、マネージドログイン設定のビジュアルエディタがロードされ、さまざまな主要カスタマイズオプションから選択できます。選択するに従って、Amazon Cognito はマネージドログインの変更をプレビューウィンドウに反映します。詳細設定メニューに戻るには、**[設定カテゴリの変更]** ボタンを選択します。 **全体的な外観と操作感をどのようにするか?** マネージドログインの基本的なテーマ設定を構成します。 **Display mode (表示モード)** マネージドログインのライトモード、ダークモード、またはアダプティブエクスペリエンスを選択します。Amazon Cognito がマネージドログインをレンダリングすると、アダプティブ設定はユーザーのブラウザ設定に従います。ブラウザアダプティブモードを選択すると、ライトモードとダークモードに異なる色とロゴ画像を選択できます。 **[Spacing] (間隔)** ページの要素間のデフォルト間隔を設定します。 **境界の半径** 要素の外側の境界について、丸みの深さを設定します。 **ページの背景をどのようにするか?** **背景タイプ** **[画像を表示]** チェックボックスは、背景画像を使用するか、単色の背景を設定するかを示します。 1. 画像を使用するには、**[画像を表示]** を選択し、ライトモードとダークモードの背景画像を選択します。画像でカバーされない背景領域には、ダークモードとライトモードの **[ページの背景色]** を設定することもできます。 1. 背景に単色のみを使用するには、**[画像を表示]** の選択を解除し、ライトモードとダークモードの **[ページの背景色]** を選択します。 **フォームの外観をどのようにするか?** マネージドログインのフォーム要素の設定を行います。フォーム項目の例として、ログインプロンプトとコードプロンプトがあります。 **水平位置合わせ** フォームフィールドの水平位置合わせを設定します。 **フォームのロゴ** ロゴ画像の配置を設定します。 **ロゴ画像** ライトモードとダークモードのフォーム要素に含めるロゴ画像ファイルを選択します。画像をアップロードするには、**[ロゴ画像]** ドロップダウンを選択し、**[新しいアセットを追加]** を選択してロゴファイルを追加します。 **主なブランドカラー** ライトモードとダークモードのテーマ色を設定します。この色は、プライマリとして分類されたすべての要素に背景色として適用されます。 **ヘッダーの外観をどのようにするか?** マネージドログインページにヘッダーを含めるかどうかを選択します。ヘッダーにはロゴ画像を含めることができます。 **ヘッダーのロゴ** ヘッダー内のロゴ画像の位置を設定します。 **ロゴ画像** ヘッダーに含めるロゴの位置とロゴ画像ファイルを選択します。画像をアップロードするには、**[ロゴ画像]** ドロップダウンを選択し、**[新しいアセットを追加]** を選択してロゴファイルを追加します。 **ヘッダーの背景色** ヘッダーの背景にライトモードとダークモードの色を設定します。 ## 詳細設定 詳細設定ビューでは、**[基盤]** と **[コンポーネント]** の個々のコンポーネントを変更できます。**[プレビュー]** タブには、現在のコンテキストにおけるマネージドログインのプレビューとカスタマイズが表示されます。 ![\[マネージドログインコンポーネントの詳細な設定の AWS マネジメントコンソール スクリーンショット。\]](http://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/images/hosted-ui-customization-console-preview.png) コンポーネントのビジュアルエディタに移動するには、コンポーネントのタイトルにある [編集] アイコンを選択します。テーマスタジオエディタで、**[設定カテゴリを変更]** ボタンを使用してコンポーネントを切り替えることができます。 ### 基盤 **アプリスタイル** マネージドログイン設定の基本を構成します。このカテゴリには、全体的なテーマ、テキスト間隔、ページのヘッダーとフッターの設定があります。 **Display mode (表示モード)** マネージドログインページのライトモード、ダークモード、またはアダプティブエクスペリエンスを選択します。ブラウザアダプティブモードを選択すると、ライトモードとダークモードに異なる色とロゴ画像を選択できます。 **[Spacing] (間隔)** ページの要素間のデフォルト間隔を設定します。 **認証動作** ユーザーを外部 ID プロバイダー (IdP) に接続するボタンのスタイルを設定します。このセクションには、マネージドログインでユーザーに E メールアドレスの入力を求め、それを [SAML ID プロバイダー識別子](cognito-user-pools-managing-saml-idp-naming.md)と照合するための **[ドメイン検索入力]** オプションが含まれています。 **フォーム動作** 入力フォームのスタイル (入力の配置、色、要素の位置合わせ) を設定します。 ### コンポーネント **ボタン** Amazon Cognito がマネージドログインページでレンダリングするボタンのスタイル。 **ディバイダー** 入力フォームや外部プロバイダーのサインインセレクターなど、マネージドログイン要素間の分割線と境界のスタイル。 **ドロップダウン** ドロップダウンメニューのスタイル。 **ファビコン** Amazon Cognito がタブとブックマークアイコンに提供する画像のスタイル。 **フォーカスリング** 現在選択されている入力を示すハイライトのスタイル。 **フォームコンテナ** フォームを囲む要素のスタイル。 **グローバルフッター** Amazon Cognito がマネージドログインページの下部に表示するフッターのスタイル。 **グローバルヘッダー** Amazon Cognito がマネージドログインページの上部に表示するヘッダーのスタイル。 **表示** エラーメッセージと成功メッセージのスタイル。 **オプションコントロール** チェックボックス、複数選択、その他の入力プロンプトのスタイル。 **ページ背景** マネージドログインの全体的な背景のスタイル。 **入力** フォームフィールド入力プロンプトのスタイル。 **Link** マネージドログインページのハイパーリンクのスタイル。 **ページのテキスト** ページ内テキストのスタイル。 **フィールドのテキスト** フォーム入力の周囲のテキストのスタイル。 ## マネージドログインのブランディングの API および SDK オペレーション API オペレーション [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) および [UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html) を使用して、マネージドログインスタイルにブランディングを適用することもできます。これらのオペレーションは、別のアプリケーションクライアントやユーザープールのブランディングスタイルと同一またはわずかに変更したバージョンを作成するのに最適です。API オペレーション [DescribeManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBranding.html) を使用して、既存のスタイルのマネージドログインブランディングをクエリし、必要に応じて出力を変更して別のリソースに適用します。 `UpdateManagedLoginBranding` オペレーションでは、スタイルを適用する先のアプリケーションクライアントは変更されません。アプリケーションクライアントに割り当てられている既存のスタイルのみが更新されます。アプリケーションクライアントのスタイルを完全に置き換えるには、[DeleteManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DeleteManagedLoginBranding.html) を使用して既存のスタイルを削除し、`CreateManagedLoginBranding` を使用して新しいスタイルを割り当てます。Amazon Cognito コンソールでも同様です。既存のスタイルを削除して新しいスタイルを作成する必要があります。 API または SDK リクエストでマネージドログインのブランディングを設定するには、`Document` データ型に変換された JSON ファイルに設定を埋め込む必要があります。以下は、追加できる画像と、ブランディングスタイルを設定するリクエストをプログラムで生成するためのガイダンスです。 ### 画像アセット [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) と [UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html) には `Assets` パラメータが含まれています。このパラメータは、base64 でエンコードされたバイナリ形式の画像ファイルの配列です。 **注記** ブランディングスタイルを作成または更新するプログラムリクエストは、リクエストサイズが 2 MB 以下である必要があります。リクエスト内のアセットによっては、この制限を超える場合があります。この場合、リクエストを複数の `UpdateManagedLoginBranding` リクエストに分割し、最大リクエストサイズを超えないパラメータのグループにします。これらのリクエストでは、指定していないパラメータがデフォルトに設定されることはないため、既存の設定に影響を与えずに、部分的なリクエストを送信できます。 一部のアセットは、送信できるファイルタイプに制限があります。 **** | アセット | 許可されるファイル拡張子 | | --- | --- | | FAVICON\$1ICO | ico | | FAVICON\$1SVG | svg | | EMAIL\$1GRAPHIC | png、svg、jpeg | | SMS\$1GRAPHIC | png、svg、jpeg | | AUTH\$1APP\$1GRAPHIC | png、svg、jpeg | | PASSWORD\$1GRAPHIC | png、svg、jpeg | | PASSKEY\$1GRAPHIC | png、svg、jpeg | | PAGE\$1HEADER\$1LOGO | png、svg、jpeg | | PAGE\$1HEADER\$1BACKGROUND | png、svg、jpeg | | PAGE\$1FOOTER\$1LOGO | png、svg、jpeg | | PAGE\$1FOOTER\$1BACKGROUND | png、svg、jpeg | | PAGE\$1BACKGROUND | png、svg、jpeg | | FORM\$1BACKGROUND | png、svg、jpeg | | FORM\$1LOGO | png、svg、jpeg | | IDP\$1BUTTON\$1ICON | ico、svg | SVG タイプのファイルは、以下の属性と要素をサポートしています。 ------ #### [ Attributes ] ``` accent-height, accumulate, additivive, alignment-baseline, ascent, attributename, attributetype, azimuth, basefrequency, baseline-shift, begin, bias, by, class, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cx, cy, d, dx, dy, diffuseconstant, direction, display, divisor, dur, edgemode, elevation, end, fill, fill-opacity, fill-rule, filter, filterunits, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, fx, fy, g1, g2, glyph-name, glyphref, gradientunits, gradienttransform, height, href, id, image-rendering, in, in2, k, k1, k2, k3, k4, kerning, keypoints, keysplines, keytimes, lang, lengthadjust, letter-spacing, kernelmatrix, kernelunitlength, lighting-color, local, marker-end, marker-mid, marker-start, markerheight, markerunits, markerwidth, maskcontentunits, maskunits, max, mask, media, method, mode, min, name, numoctaves, offset, operator, opacity, order, orient, orientation, origin, overflow, paint-order, path, pathlength, patterncontentunits, patterntransform, patternunits, points, preservealpha, preserveaspectratio, r, rx, ry, radius, refx, refy, repeatcount, repeatdur, restart, result, rotate, scale, seed, shape-rendering, specularconstant, specularexponent, spreadmethod, stddeviation, stitchtiles, stop-color, stop-opacity, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke, stroke-width, style, surfacescale, tabindex, targetx, targety, transform, text-anchor, text-decoration, text-rendering, textlength, type, u1, u2, unicode, values, viewbox, visibility, vert-adv-y, vert-origin-x, vert-origin-y, width, word-spacing, wrap, writing-mode, xchannelselector, ychannelselector, x, x1, x2, xmlns, y, y1, y2, z, zoomandpan ``` ------ #### [ Elements ] ``` svg, a, altglyph, altglyphdef, altglyphitem, animatecolor, animatemotion, animatetransform, audio, canvas, circle, clippath, defs, desc, ellipse, filter, font, g, glyph, glyphref, hkern, image, line, lineargradient, marker, mask, metadata, mpath, path, pattern, polygon, polyline, radialgradient, rect, stop, style, switch, symbol, text, textpath, title, tref, tspan, video, view, vkern, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence ``` ------ ### マネージドログインのブランディングオペレーション用のツール Amazon Cognito は、マネージドログインのブランディング設定オブジェクト用のファイルを [JSON スキーマ形式](https://json-schema.org/docs)で管理します。ブランディングスタイルをプログラムで更新する方法は、次のとおりです。 **ユーザープール API でブランディングを更新するには** 1. Amazon Cognito コンソールで、ユーザープールの **[マネージドログイン]** メニューからマネージドログインのデフォルトのブランディングスタイルを作成します。それをアプリケーションクライアントに割り当てます。 1. スタイルを作成したアプリケーションクライアントの ID (例: `1example23456789`) を記録します。 1. `ReturnMergedResources` を `true` に設定して [DescribeManagedLoginBrandingByClient](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBrandingByClient.html) API リクエストを使用し、ブランディングスタイルの設定を取得します。 リクエスト本文の例を次に示します。 ``` { "ClientId": "1example23456789", "ReturnMergedResources": true, "UserPoolId": "us-east-1_EXAMPLE" } ``` 1. `DescribeManagedLoginBrandingByClient` の出力をカスタマイズして変更します。 1. レスポンス本文は、作成および更新オペレーションの構文に含まれない `ManagedLoginBranding` 要素で囲まれています。この JSON オブジェクトの最上位レベルを削除します。 1. 画像を置き換えるには、`Bytes` 値を、各画像ファイルの Base64 エンコードされたバイナリデータに置き換えます。 1. 設定を更新するには、`Settings` オブジェクトの出力を変更し、次回のリクエストに含めます。Amazon Cognito は、API レスポンスで受け取ったスキーマに存在しない `Settings` オブジェクトの値を無視します。 1. 更新されたレスポンス本文を [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) または [UpdateManagedLoginBranding](https://docs.aws.amazon.com/) リクエストで使用します。このリクエストのサイズが 2 MB を超える場合は、複数のリクエストに分割します。これらのオペレーションは、特に指定しない限り、元の設定が未変更のままである `PATCH` モデルで機能します。 # ホステッド UI (クラシック) ブランディングのカスタマイズ AWS マネジメントコンソール、、 AWS CLI または API を使用して、ホストされた UI の従来のカスタマイズ設定を指定できます。アプリに表示するカスタムのロゴイメージをアップロードできます。UI の外観と操作感にカスケーディングスタイルシート (CSS) オプションをいくつか適用することもできます。 UI のデフォルトをカスタマイズし、個々の[アプリケーションクライアント](cognito-terms.md#term-appclient)を特定の設定で上書きできます。Amazon Cognito は、クライアントレベルの設定を持たないすべてのアプリケーションクライアントにデフォルト設定を適用します。 Amazon Cognito コンソールおよび API リクエストでは、UI のカスタマイズを設定するリクエストのサイズが 135 KB を超えることはできません。まれに、リクエストヘッダー、CSS ファイル、ロゴの合計が 135 KB を超えることがあります。Amazon Cognito はイメージファイルを Base64 にエンコードします。これにより、100 KB のイメージのサイズが 130 KB に増え、リクエストヘッダーと CSS 用に 5 KB が残ります。リクエストが大きすぎる場合、 AWS マネジメントコンソール または `SetUICustomization` API リクエストは`request parameters too large`エラーを返します。ロゴイメージを 100 KB 以下、CSS ファイルを 3 KB 以下に調整します。CSS とロゴのカスタマイズを個別に設定することはできません。 **注記** UI をカスタマイズするには、ユーザープールのドメインを設定する必要があります。 ## クラシックブランディングでのカスタムロゴの指定 Amazon Cognito は、[ログインエンドポイント](login-endpoint.md) の入力フィールドの上の中央にカスタムロゴを配置します。 ホストされているカスタムの UI ロゴには、350 x 178 ピクセルまで拡大できる PNG、JPG、または JPEG ファイルを選択します。ロゴファイルのサイズは 100 KB 以下で、Amazon Cognito が Base64 にエンコードした後は 130 KB 以下にしてください。API [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html)で `ImageFile`を設定するには、ファイルを Base64-encodedされたテキスト文字列に変換するか、 でファイルパス AWS CLIを指定して Amazon Cognito にエンコードさせます。 ## クラシックブランディングでの CSS カスタマイズの指定 ホストされたアプリページの CSS をカスタマイズできます。ただし、以下の制限があります。 + 以下の CSS クラス名を使用できます。 + `background-customizable` + `banner-customizable` + `errorMessage-customizable` + `idpButton-customizable` + `idpButton-customizable:hover` + `idpDescription-customizable` + `inputField-customizable` + `inputField-customizable:focus` + `label-customizable` + `legalText-customizable` + `logo-customizable` + `passwordCheck-valid-customizable` + `passwordCheck-notValid-customizable` + `redirect-customizable` + `socialButton-customizable` + `submitButton-customizable` + `submitButton-customizable:hover` + `textDescription-customizable` + プロパティ値は HTML を含めることができます。ただし、`@import`,`@supports`,`@page`, または`@media`ステートメント、または Javascript の値を除きます。 次の CSS プロパティをカスタマイズできます。 **Labels** + [**font-weight**] は 100 ～ 900 までの 100 の倍数です。 + [**color**] はテキストの色です。[有効な CSS カラー値](https://www.w3schools.com/cssref/css_colors_legal.php)である必要があります。 **入力フィールド** + [**width**] は含まれるブロックの幅に対してパーセンテージで表したものです。 + [**height**] は入力フィールドの高さ (ピクセル (px)) です。 + [**color**] はテキストの色です。任意の標準 CSS 色値を使用できます。 + [**background-color**] は、入力フィールドの背景色です。任意の標準 CSS 色値を使用できます。 + [**border**] は、アプリウィンドウの境界の幅、透明度、色を指定する標準 CSS 値です。幅は 1 px から 100 px までの任意の値を使用できます。透明度は solid または none です。色は任意の標準色値を使用できます。 **テキストの説明** + [**padding-top**] は、説明欄の上のパディング量です。 + [**padding-bottom**] は、説明欄の下のパディング量です。 + [**display**] には `block` または `inline` のいずれかを設定できます。 + [**font-size**] はテキストの説明のフォントサイズです。 + [**color**] はテキストの色です。[有効な CSS カラー値](https://www.w3schools.com/cssref/css_colors_legal.php)である必要があります。 **送信ボタン** + [**font-size**] はボタンテキストのフォントサイズです。 + [**font-weight**] はボタンテキストのフォントウェイトです。`bold`、`italic`、または `normal` です。 + [**margin**] はボタンの上下左右のマージンサイズを示す 4 つの値の文字列です。 + [**font-size**] はテキストの説明のフォントサイズです。 + [**width**] はボタンテキストのブロックに対する幅 (パーセント) です。 + [**height**] はボタンの高さ (ピクセル (px)) です。 + [**color**] はボタンの色です。任意の標準 CSS 色値を使用できます。 + [**background-color**] は、ボタンの背景色です。任意の標準色値を使用できます。 **バナー** + [**padding**] はバナーの上下左右のパディングサイズを示す 4 つの値の文字列です。 + [**background-color**] は、バナーの背景色です。任意の標準 CSS 色値を使用できます。 **送信ボタンのホバー** + [**color**] は、ボタンにカーソルを合わせたときのボタンの前景色です。任意の標準 CSS 色値を使用できます。 + [**background-color**] は、ボタンにカーソルを合わせたときのボタンの背景色です。任意の標準 CSS 色値を使用できます。 **ID プロバイダーボタンのホバー** + [**color**] は、ボタンにカーソルを合わせたときのボタンの前景色です。任意の標準 CSS 色値を使用できます。 + [**background-color**] は、ボタンにカーソルを合わせたときのボタンの背景色です。任意の標準 CSS 色値を使用できます。 **パスワードのチェックが有効ではありません** + [**color**] は `"Password check not valid"` メッセージのテキスト色です。任意の標準 CSS 色値を使用できます。 **背景** + [**background-color**] は、アプリウィンドウの背景色です。任意の標準 CSS 色値を使用できます。 **エラーメッセージ** + [**margin**] は上下左右のマージンサイズを示す 4 つの値の文字列です。 + [**padding**] はパディングサイズです。 + [**font-size**] はフォントサイズです。 + [**width**] はエラーメッセージの幅を含まれるブロックに対するパーセンテージで表したものです。 + [**background**] は、エラーメッセージの背景色です。任意の標準 CSS 色値を使用できます。 + [**border**] は境界の幅、透明度、色を指定する 3 つの値の文字列です。 + [**color**] はエラーメッセージのテキスト色です。任意の標準 CSS 色値を使用できます。 + [**box-sizing**] は含める必要があるサイズのプロパティ (幅と高さ) をブラウザに指示するために使用されます。 **ID プロバイダーボタン** + [**height**] はボタンの高さ (ピクセル (px)) です。 + [**width**] はボタンテキストの幅を含まれるブロックに対するパーセンテージで示したものです。 + [**text-align**] はテキストの整列設定です。`left`、`right` または `center` のいずれかを設定できます。 + [**margin-bottom**] は下側マージンの設定です。 + [**color**] はボタンの色です。任意の標準 CSS 色値を使用できます。 + [**background-color**] は、ボタンの背景色です。任意の標準 CSS 色値を使用できます。 + [**border-color**] は、ボタンの境界の色です。任意の標準 CSS 色値を使用できます。 **ID プロバイダーの説明** + [**padding-top**] は、説明欄の上のパディング量です。 + [**padding-bottom**] は、説明欄の下のパディング量です。 + [**display**] には `block` または `inline` のいずれかを設定できます。 + [**font-size**] は説明のフォントサイズです。 + **color** は、IdP セクションヘッダーのテキスト色です。例: **企業 ID でサインイン**。[有効な CSS カラー値](https://www.w3schools.com/cssref/css_colors_legal.php)である必要があります。 **法務関連のテキスト** + [**color**] はテキストの色です。任意の標準 CSS 色値を使用できます。 + [**font-size**] はフォントサイズです。 **リーガルテキスト**をカスタマイズする際は、サインインページのソーシャル ID プロバイダーに表示されるメッセージ「**We won't post to any of your accounts without asking first**」(最初に確認せずにアカウントに投稿することはありません) をカスタマイズします。 **ロゴ** + [**max-width**] は最大幅を含まれるブロックに対するパーセンテージで表したものです。 + [**max-height**] は最大高を含まれるブロックに対するパーセンテージで表したものです。 + **background-color** は、透明なセクションを持つログの背景の色です。[有効な CSS カラー値](https://www.w3schools.com/cssref/css_colors_legal.php)である必要があります。 **入力フィールドのフォーカス** + [**border-color**] は、入力フィールドの色です。任意の標準 CSS 色値を使用できます。 + [**outline**] は入力フィールドの境界線の幅 (ピクセル) です。 **ソーシャルボタン** + [**height**] はボタンの高さ (ピクセル (px)) です。 + [**text-align**] はテキストの整列設定です。`left`、`right` または `center` のいずれかを設定できます。 + [**width**] はボタンテキストの幅を含まれるブロックに対するパーセンテージで示したものです。 + [**margin-bottom**] は下側マージンの設定です。 **パスワードのチェックが有効です** + [**color**] は `"Password check valid"` メッセージのテキスト色です。任意の標準 CSS 色値を使用できます。 ## でクラシックブランドを使用してホストされた UI をカスタマイズする AWS マネジメントコンソール を使用して AWS マネジメントコンソール 、アプリの UI カスタマイズ設定を指定できます。 **注記** 以下の URL を、ユーザープールの指定を含めて作成し、ブラウザに入力することで、カスタマイズが反映されているホストされた UI を表示できます。` https:///login?response_type=code&client_id=&redirect_uri=` 変更がコンソールに反映されるまで最大 1 分待ってからブラウザを最新表示にする必要がある場合があります。 ドメインは、**[Domain]** (ドメイン) の下の **[App integration]** (アプリケーション統合) タブに表示されます。アプリケーションクライアント ID およびコールバック URL は **[App clients]** (アプリケーションクライアント) に表示されています。 **アプリ UI のカスタマイズ設定を指定する** 1. [Amazon Cognito コンソール](https://console.aws.amazon.com/cognito/home)にサインインします。 1. ナビゲーションペインで **[User Pools]** (ユーザープール) を選択してから、編集するユーザープールを選択します。 1. [[ドメイン]](cognito-user-pools-assign-domain.md) タブから**ドメインを作成**するか、既存のドメインを更新します。**[ブランディングバージョン]** で、**[ホストされた UI (クラシック)]** を使用するようにドメインを設定します。 1. **[マネージドログイン]** メニューを選択します。 1. すべてのアプリケーションクライアントの UI 設定をカスタマイズするには、**[ホストされた UI 設定]** で **[スタイル]** を参照し、**[編集]** を選択します。 1. 1 つのアプリケーションクライアントの UI 設定をカスタマイズするには、**[アプリクライアント]** メニューに移動し、変更するアプリケーションクライアントを選択します。次に **[ホストされた UI (クラシック) スタイル]** を参照し、**[オーバーライド]** を選択します。**[Edit]** (編集) を選択します。 1. 独自のロゴイメージファイルをアップロードするには、**[Choose file]** (ファイルを選択) または **[Replace current file]** (現在のファイルを置き換える) を選択します。 1. ホストされた UI CSS をカスタマイズするには、**CSS template.css** をダウンロードし、テンプレートをカスタマイズ値に変更します。ホストされた UI で使用できるのは、テンプレートに含まれるキーのみです。追加された CSS キーは UI に反映されません。CSS ファイルをカスタマイズしたら、**[Choose file]** (ファイルの選択) または **[Replace current file]** (現在のファイルを置き換える) を選択し、カスタム CSS ファイルをアップロードします。 ## ユーザープール API のクラシックブランドと を使用したホストされた UI のカスタマイズ AWS CLI 次のコマンドを使用して、ユーザープールのアプリ UI カスタマイズ設定を指定します。 **ユーザープールの組み込みアプリ UI の UI カスタマイズ設定を取得するには、次の API オペレーションを使用します。** + AWS CLI: `aws cognito-idp get-ui-customization` + AWS API: [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_GetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_GetUICustomization.html) **ユーザープールの組み込みアプリ UI の UI カスタマイズ設定を設定するには、次の API オペレーションを使用します。** + AWS CLI イメージファイルから: `aws cognito-idp set-ui-customization --user-pool-id --client-id --image-file fileb://"" --css ".label-customizable{ color: ;}"` + AWS CLI Base64 バイナリテキストとしてエンコードされたイメージ: `aws cognito-idp set-ui-customization --user-pool-id --client-id --image-file --css ".label-customizable{ color: ;}"` + AWS API: [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html)