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

# CSS/JavaScript を使用して Amazon Connect ウィジェットのボタンとフレームをターゲットにする
<a name="target-widget-button"></a>

コミュニケーションウィジェットの開閉ボタンとウィジェットフレームは、ホストウェブサイト上で直接レンダリングされます。特定のセレクタを使用すると、これらの要素を CSS を使ってターゲットにしたり、JavaScript で参照したりできます。

**ヒント**  
ウィジェットボタンの色またはウィジェット自体のスタイルを更新するには、[Connect Customer 管理ウェブサイト](add-chat-to-website.md#customize-chat-widget)を使用します。さらにカスタマイズ可能なスタイルについては、コミュニケーションウィジェットに直接[カスタムスタイルを渡す](pass-custom-styles.md)ことができます。

## ウィジェットの要素 ID と例
<a name="widget-elementid"></a>

次の図は、チャットウィジェットのボタンがユーザーの画面にどのように表示されるかを示しています。最初の図は、チャットウィジェットを開くための [開く] ボタン、2 番目の図は、チャットウィジェットを閉じるための [閉じる] ボタンを示しています。

![チャットウィンドウを開く場合と閉じる場合を並べて示したチャットウィジェットの図。](http://docs.aws.amazon.com/ja_jp/connect/latest/adminguide/images/widget-elements.png)


1.  ウィジェットを開くボタン: `#amazon-connect-open-widget-button` 

1. ウィジェットを閉じるボタン: `#amazon-connect-close-widget-button`

1. ウィジェットフレーム: `#amazon-connect-widget-frame`

   1. ウィジェットフレームが開いているとき: `#amazon-connect-widget-frame.show`

   1. ウィジェットフレームが閉じているとき: `#amazon-connect-widget-frame:not(.show)`

これらの要素を変更する CSS スタイルシートの例を次に示します。

```
/* Target widget button while widget is minimized */
#amazon-connect-open-widget-button {
  ...
}

/* Target widget button while widget is showing */
#amazon-connect-close-widget-button {
  ...
}

/* Target widget frame */
#amazon-connect-widget-frame {
  ...
}

/* Target widget frame while it is showing */
#amazon-connect-widget-frame.show {
  ...
}

/* Target widget frame while it is minimized */
#amazon-connect-widget-frame:not(.show) {
  ...
}
```

JavaScript を使用してこれらの要素を参照する例を次に示します。

```
const openWidgetButton = document.getElementById("amazon-connect-open-widget-button");
const closeWidgetButton = document.getElementById("amazon-connect-close-widget-button");

const widgetFrame = document.querySelector("#amazon-connect-widget-frame");
const openWidgetFrame = document.querySelector("#amazon-connect-widget-frame.show");
const hiddenWidgetFrame = document.querySelector("#amazon-connect-widget-frame:not(.show)");
```