翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# ホステッド UI (クラシック) ブランディングのカスタマイズ
<a name="hosted-ui-classic-branding"></a>

 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 をカスタマイズするには、ユーザープールのドメインを設定する必要があります。

## クラシックブランディングでのカスタムロゴの指定
<a name="cognito-user-pools-app-ui-customization-logo"></a>

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 カスタマイズの指定
<a name="cognito-user-pools-app-ui-customization-css"></a>

ホストされたアプリページの 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 マネジメントコンソール
<a name="cognito-user-pools-app-ui-customization-console"></a>

を使用して AWS マネジメントコンソール 、アプリの UI カスタマイズ設定を指定できます。

**注記**  
以下の URL を、ユーザープールの指定を含めて作成し、ブラウザに入力することで、カスタマイズが反映されているホストされた UI を表示できます。` https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url>` 変更がコンソールに反映されるまで最大 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
<a name="cognito-user-pools-app-ui-customization-cli-api"></a>

次のコマンドを使用して、ユーザープールのアプリ 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 <your-user-pool-id> --client-id <your-app-client-id> --image-file fileb://"<path-to-logo-image-file>" --css ".label-customizable{ color: <color>;}"`
+ AWS CLI Base64 バイナリテキストとしてエンコードされたイメージ: `aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file <base64-encoded-image-file> --css ".label-customizable{ color: <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)