...
※サンプルコード内の「#button_1」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。
※widthやheightの値は、ご希望のサイズに適宜ご変更ください。
...
吹き出し部分のサイズ変更
...
| コード ブロック | ||
|---|---|---|
| ||
#button_1 ._ChatButton_BalloonText > div:nth-child(2) {
height: 60px;
width: 180px;
display: flex;
align-items: center;
} |
※サンプルコード内の「#button_1」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。
※widthやheightの値は、ご希望のサイズに適宜ご変更ください。
※上記サンプルでは、テキストが上下中央寄せになるよう「display: flex;」「align-items: center;」で調整しております。
...
アイコン画像を非表示
...
| コード ブロック | ||
|---|---|---|
| ||
#button_1 ._ChatButton_BalloonAvatar {/* アイコン画像を非表示 */
display: none;
} |
※サンプルコード内の「#button_1」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。
...
| コード ブロック | ||
|---|---|---|
| ||
#button_1 ._ChatButton_BalloonText > div:nth-child(2) {/* 右向き 吹き出し部分 変更 */
background-color: #888888;
color: #ffffff;
}
#button_1 ._ChatButton_BalloonText > div:nth-child(3) {/* 右向き 吹き出し三角部分 変更 */
border-right: 8px solid #888888;
} |
...
| コード ブロック | ||
|---|---|---|
| ||
#button_2 ._ChatButton_BalloonText > div:nth-child(2) {/* 左向き 吹き出し部分 変更 */
background-color: #888888;
color: #ffffff;
}
#button_2 ._ChatButton_BalloonText > div:nth-child(3) {/* 左向き 吹き出し三角部分 変更 */
border-left: 8px solid #888888;
} |
...
| コード ブロック | ||
|---|---|---|
| ||
._ChatWindowABar_Root > ._ChatWindowABar_Content { /* スナックバーの背景色と文字色変更 */
background-color: rgba(125,125,125,0.8);
color: #eae8e1;
}
._ChatWindowABar_Content > div:nth-child(2) > button { /* スナックバーの閉じるボタンの文字色変更 */
color: #eae8e1;
} |
| パネル | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
アイテム一覧 |
...
| コード ブロック | ||
|---|---|---|
| ||
#_ChatHeader_BackIcon { /* ヘッダーの文字色変更 */
color: #FFFFFF;
} |