> ## 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 widget の見た目のカスタマイズは、ブランディングや統一感のある UI を実現するうえで重要です。このページでは、プロジェクトに Lock を組み込む際に利用できるカスタマイズ方法を紹介します。
# Lock UI のカスタマイズ
Lock widget の見た目は、いくつかの方法でカスタマイズできます。最も安全で確実な方法は、用意されている JavaScript オプションを使用することです。
## JavaScript オプション
Lock のインスタンス化時に `options` パラメーターを使うことで、Lock にさまざまなカスタマイズを設定できます。その一部では、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 {文字列}
`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 をカスタマイズする際、さらに詳しい情報が必要な場合は、[configuration options](/docs/ja-jp/libraries/lock/lock-configuration) ページまたは [Lock API](/docs/ja-jp/libraries/lock/lock-api-reference) ページをご覧ください。
追加してほしいテーマ設定オプションがあれば、ぜひお知らせください。現在、JavaScript で利用できるカスタマイズオプションの拡充を進めており、新しいオプションが追加されるたびにこの一覧も更新されます。