> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> Lock ウィジェットの外観のカスタマイズは、ブランディングや統一感のある UI を実現するうえで重要です。このリソースでは、プロジェクトに Lock を実装する際に、そのための方法を紹介します。
# Lock UI のカスタマイズ
Lock ウィジェットの外観は、いくつかの方法でカスタマイズできます。最も適切で安全な方法は、用意されている JavaScript オプションを使用することです。
## JavaScript オプション
Lock をインスタンス化する際に、`options` パラメーターを使ってさまざまなカスタマイズを設定できます。その一部では、UI をカスタマイズできます。UI のカスタマイズオプションは現在も開発中で、今後さらに追加される予定です。
まず、カスタマイズしたいオプションを含む `options` オブジェクトを定義します。次に、Lock をインスタンス化するときに、その `options` オブジェクトを 3 番目のパラメーターとして渡す必要があります。詳細は以下で説明します。
### テーマ設定オプション
現在、`theme` プロパティで名前空間化されたテーマ設定オプションをいくつか利用できます。
#### logo {String}
`logo` の値には、Lock のヘッダーに表示する画像の URL を指定します。デフォルトでは Auth0 のロゴが使用されます。推奨される最小解像度は、幅 200 ピクセル、高さ 200 ピクセルです。
```js lines theme={null}
var options = {
theme: {
logo: 'https://example.com/logo.png'
}
};
```
#### primaryColor {String}
`primaryColor` プロパティは、Lock のメインカラーを定義します。ウィジェットで使用されるすべての色は、この色を基準に算出されます。これは、カスタム `logo` を指定する場合に、すべての色を `logo` のカラーパレットと自然に調和させるために役立ちます。デフォルト値は `#ea5323` です。
```js 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`。
```js 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 に表示されるすべてのテキストをカスタマイズできます。既定値は {} です。以下に例を示します。
```js lines theme={null}
var options = {
languageDictionary: {
emailInputPlaceholder: "something@youremail.com",
title: "Log me in"
},
};
```
`languageDictionary` を使用してカスタマイズできる項目の一覧については、リポジトリ内の [English Language Dictionary Specification](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 をオーバーライドしていると意図しない問題につながる可能性があるためです。また、別の箇所で使われているスタイルを見落とすこともあり、ある画面では問題なく見えても、別の画面では問題が生じる場合があります。
それでも CSS をオーバーライドして Lock のスタイルをさらに調整する場合は、メジャーバージョンやマイナーバージョンではなく、Lock の特定のパッチバージョンを使用することをお勧めします。こうすることで、スタイルを変更したあとに別のパッチがデプロイされ、変更の影響で UI に予期しない動作が生じた場合でも、想定外の影響を抑えられます。これは、Lock を読み込むとき、またはダウンロードするときに、そのパッチバージョン (`x.y.z`) を指定することで実現できます。
また、もちろん、CSS の変更については十分にテストを行い、お客様に意図したとおりの体験を提供できることを確認することもお勧めします。
## 詳細情報
アプリケーション用に Lock をカスタマイズする際に、より詳しい情報が必要な場合は、[設定オプション](/ja/docs/libraries/lock/lock-configuration) ページまたは [Lock API](/ja/docs/libraries/lock/lock-api-reference) ページを参照してください。
追加してほしいテーマ設定オプションがあれば、お知らせください。現在、JavaScript から利用できるカスタマイズオプションの拡充を進めており、新しいオプションが追加されるたびにこの一覧も更新されます。