【WhatYa】CSSで指定可能なid,classについて
WhatYa V2
現時点(2022/10/4)でCSSで指定可能なid,classです。
どこ(id,class)を、どのように(大きさ、背景色変更等)変更できるかのイメージです。
メッセージタイプ
CSSで指定可能なidおよびclass一覧
2021年9月22日 現在 チャットウィンドウの構成要素には以下の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要素 |
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要素 |