【WhatYa】CSSで指定可能なid,classについて
- 空色 小鮒 俊太朗
- 尾関沙紀
- 内田吉則 (Unlicensed)
WhatYa V2
現時点（2024/12/5）でCSSで指定可能なid,classです。
どこ（id,class）を、どのように（大きさ、背景色変更等）変更できるかのイメージです。
メッセージタイプ
CSSで指定可能なidおよびclass一覧
2024年12月5日 現在 チャットウィンドウの構成要素には以下のidまたはclassを付与しております。
idリスト（指定時は # をつけてご利用ください。）
No | id名 | 説明 |
|---|---|---|
1 |
| チャットウィンドウ全体を構成するdiv要素 |
2 |
| チャットウィンドウ最上部の枠を構成するdiv要素 |
3 |
| チャットウィンドウ上部の、アイコンを包含するdiv要素 |
4 |
| チャットウィンドウ中央に表示される、会話内容を保持するdiv要素 |
5 |
| チャットウィンドウ下部に表示される、ユーザ入力領域を構成するdiv要素 |
6 |
| ユーザ入力領域中のテキストボックスを囲むdiv要素 |
7 |
| チャットメニュー全体を包含するdiv要素 |
8 |
| チャットメニューのアイテムリストを包含するdiv要素 |
9 |
| チャットボタンのdiv要素 |
10 |
| チャットヘッダーのハンバーガーメニューのbutton要素 |
11 |
| チャットヘッダーの閉じるボタンのbutton要素 |
12 |
| OPモードで出現するファイル添付マークのbutton要素 |
13 |
| 入力フィールドの送信button要素 |
14 |
| サブページ用dev要素(現状OP接続時の画像アップロード確認画面用) |
15 |
| OP接続時の画像アップロード確認画面のルートdiv要素 |
16 |
| OP接続時の画像アップロード確認画面のimg要素の親div要素 |
17 |
| OP接続時の画像アップロード確認画面のボタングループの親div要素 |
18 |
| OP接続時の画像アップロード確認画面のキャンセルボタンとアップロードボタンの親div要素 |
19 |
| OP接続時の画像アップロード確認画面のキャンセルボタン |
20 |
| OP接続時の画像アップロード確認画面のアップロードボタン |
21 |
| チャットメニューのモードスイッチ（ボット⇔オペレーター）するdiv要素 |
22 |
| ※スペシャルタグ表示時のみ出現 |
classリスト（指定時は . をつけてご利用ください）
No | class名 | 説明 |
|---|---|---|
1 |
| 2番目に新しい発話のdiv要素 |
2 |
| 最新の発話のdiv要素 |
3 |
| チャットメニューのアイテムリスト内のリストのdiv要素 |
4 |
| モバイル画面時のチャットウィンドウ全体を構成するdiv要素（ID：_ChatWindowと同時に指定される） |
5 |
| PC画面時のチャットウィンドウ全体を構成するdiv要素（ID：_ChatWindowと同時に指定される） |
6 |
| botからのメッセージを含むdiv要素(メッセージ送信時刻を含まない) |
7 |
| botからのメッセージ内に表示されているアバターを包含するdiv要素 |
8 |
| botからのテキストメッセージを含むdiv要素 |
9 |
| オペレータからのメッセージを含むdiv要素(メッセージ送信時刻を含まない) |
10 |
| オペレータからのメッセージ内に表示されているアバターを包含するdiv要素 |
11 |
| オペレータからのテキストメッセージを含むdiv要素 |
12 |
| カスタマーからのメッセージを含むdiv要素(メッセージ送信時刻を含まない) |
13 |
| カスタマーからのテキストメッセージを含むdiv要素 |
14 |
| メッセージタイプ：chipsのテキストを包含するspan要素 |
15 |
| メッセージタイプ：imageを包含するdiv要素 |
16 |
| メッセージタイプ：image内の画像のimg要素 |
17 |
| メッセージタイプ：link_image_sliderを包含するdiv要素 |
18 |
| メッセージタイプ：link_image_slider内の画像のimg要素 |
19 |
| メッセージタイプ：listを包含するdiv要素 |
20 |
| (BOT/OP/customerに関わらず)メッセージの下部の名前と日時を包含するdiv要素 |
21 |
| (BOT/OP/customerに関わらず)メッセージの下部の名前のspan要素 |
22 |
| (BOT/OP/customerに関わらず)メッセージの下部の日時のspan要素 |
23 |
| #_ChatWindowUserInputを包含するdiv要素 |
24 |
| オペレーター接続中文言のdiv要素 |
25 |
| オペレーター接続成功文言のdiv要素 |
26 |
| システムエラー発生時文言のdiv要素(＊OPへ短時間で同じ文言を送信した場合などに発生) |
27 |
| オペレータ接続時、カスタマーからアップロードされた画像(img要素)の親のdiv要素 |
28 |
| ボットモード時のチャットウィンドウ全体を構成するdiv要素（ID：_ChatWindowと同時に指定される） |
29 |
| OP時のチャットウィンドウ全体を構成するdiv要素（ID：_ChatWindowと同時に指定される） |
30 |
| メッセージタイプ：listのメッセージボックスのdiv要素 |
31 |
| メッセージタイプ：listのメッセージボックス内テキストのdiv要素 |
32 |
| メッセージタイプ：image cardのメッセージ全体のdiv要素 |
33 |
| メッセージタイプ：image cardの画像部分のdiv要素 |
34 |
| メッセージタイプ：image cardのテキスト部分のdiv要素 |
35 |
| メッセージタイプ：image cardのリンク部分のdiv要素 |
36 |
| メッセージタイプ：string chipの要素全体のdiv要素 |
37 |
| メッセージタイプ：string chipのボタン部分のdiv要素 |
38 |
| メッセージタイプ：item image sliderのメッセージ全体のdiv要素 |
39 |
| メッセージタイプ：item image sliderの画像部分のdiv要素 |
40 |
| メッセージタイプ：item image sliderのテキスト部分のdiv要素 |
41 |
| メッセージタイプ：mark downのテキスト部分のdiv要素 |
42 |
| メッセージタイプ：スペシャルタグの要素全体のdvi要素 |
43 |
| メッセージタイプ：スペシャルタグ |
44 |
| メッセージタイプ：スペシャルタグの背景全体のdiv要素 |
45 |
| メッセージタイプ：スペシャルタグの商品詳細全体のdiv要素 |
46 |
| メッセージタイプ：スペシャルタグの商品詳細画像部分のdiv要素 |
47 |
| チャットボタンの種類：ポップアップの閉じるボタン部分のdiv要素 |