> ## Documentation Index
> Fetch the complete documentation index at: https://docs-dev-actions-triggers-prototype.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Lock UIのカスタマイズ
> Lockウィジェットの外見をカスタマイズすることは、ブランディングおよびまとまりのあるUIを確立するために重要です。このリソースは、プロジェクトにLockを実装しながら、これを行う方法に焦点を合わせます。
いくつかの方法で、Lockウィジェットの外見をカスタマイズできます。最も安全でベストな方法は、提供されているJavaScriptオプションを使用することです。
## JavaScriptOptions
Lockをインスタンス化するときに、`options`パラメーターを介してLockにさまざまなカスタマイズを設定できます。その中には、UIをカスタマイズできるものがあります。UIのカスタマイズオプションは、まだ発展中であり、今後さらに追加されます。
まず、カスタマイズしたいオプションを含む、`options`オブジェクトを定義します。次に、Lockをインスタンス化するときに、3番目のパラメーターとしてそのoptionsオブジェクトを含める必要があります。詳細は以下のとおりです。
### テーマオプション
`theme`プロパティの下の名前空間で、現在利用できるテーマオプションがいくつかあります。
#### logo `{String}`
`logo`の値は、画像のURLであり、Lockのヘッダーに配置され、Auth0のロゴのデフォルトになります。推奨される最小解像度は200ピクセル（幅） x 200ピクセル（高さ）です。
```javascript lines theme={null}
var options = {
theme: {
logo: 'https://example.com/logo.png'
}
};
```
#### primaryColor `{String}`
`primaryColor`プロパティは、Lockのプライマリカラーを定義します。ウィジェットで使用されるカラーはすべて、そこから計算されます。このオプションは、すべてのカラーが`logo`のカラーパレットと合うように、カスタム`logo`を提供する際に、役立ちます。デフォルトは、`#ea5323`です。
```javascript lines theme={null}
var options = {
theme: {
logo: 'https://example.com/logo.png',
primaryColor: '#31324F'
}
};
```
#### authButtons `{Object}`
Lockのボタンをカスタマイズできます。カスタマイズを希望するカスタムの接続ボタンはそれぞれ、独自のパラメーターセットと一緒に名前で表記する必要があります。カスタマイズ可能なパラメーターは以下です。
* **displayName** `{String}`：ボタンタイトルを作成する際に、接続名の代わりに表示する名前、たとえばログインのための「`LOGIN WITH MYCONNECTION`」など。
* **primaryColor** `{String}`：ボタンの背景色。デフォルトは、`#eb5424`です。
* **foregroundColor** `{String}`:ボタンの文字の色。デフォルトは、`#FFFFFF`です。
* **icon** `{String}`:この接続のためのアイコンのURL。例：`http://site.com/logo.png`。
```javascript lines theme={null}
var options = {
theme: {
authButtons: {
"testConnection": {
displayName: "Test Conn",
primaryColor: "#b7b7b7",
foregroundColor: "#000000",
icon: "http://example.com/icon.png"
},
"testConnection2": {
primaryColor: "#000000",
foregroundColor: "#ffffff",
}
}
}
};
```
### テキストのカスタム
`languageDictionary`オプションを使用して、Lockで表示されるあらゆるテキストをカスタマイズできます。デフォルトは{}です。下の例を参照してください。
```javascript lines theme={null}
var options = {
languageDictionary: {
emailInputPlaceholder: "something@youremail.com",
title: "Log me in"
},
};
```
`languageDictionary`を使用してカスタマイズできる項目の全リストは、リポジトリの[英語辞書の仕様](https://github.com/auth0/lock/blob/master/src/i18n/en.js)をご覧ください。
### Lockをインスタンス化する
最後に、カスタムオプションで定義した`options`オブジェクトで、Lockをインスタンス化します。
`var lock = new Auth0Lock('{yourClientId}', '{yourDomain}', options);`
## CSSの上書き
CSSを上書きしてLockをカスタマイズすることは、お勧めしません。Lockの新しいリリースで、何かスタイリングが変更する可能性があり、CSSを上書きしている場合に意図しない問題を引き起こすことがあります。さらに、別の場所のスタイルの使用を見落とす可能性があり、一方では変更が問題なく見えたとしても、他方では問題がある場合があります。
それでもLockのスタイルをさらに設定するためにCSSを上書きしたい場合は、メジャーまたはマイナーバージョンではなく、Lockの特定のパッチバージョンを使用することをお勧めします。そうすることで、スタイルを変更し、その変更によりUIに予期しない動作を引き起こす可能性がある別のパッチがデプロイされた場合に発生する可能性のある予期しない結果の量を制限できます。これは、Lockを含めるとき、またはダウンロードするときに、パッチバージョン（`x.y.z`）を指定することで行えます。
さらに、CSSの変更を徹底的にテストすることをもちろんお勧めします。顧客のために意図したエクスペリエンスになっていることを確認してください。
## その他の詳細情報
アプリケーション用のLockをカスタマイズする際に、より詳細な情報が必要な場合は、[構成オプション](/docs/ja-jp/libraries/lock/lock-configuration)ページまたは[Lock API](/docs/ja-jp/libraries/lock/lock-api-reference)ページをご覧ください。
追加を希望する特定のテーマオプションがある場合は、ぜひお知らせください。私たちは、JavaScriptを通して利用できるカスタマイズオプションを向上するために取り組んでいます。新しいオプションが追加されるたびに、このリストは更新されます。