こちらではWhatYaのサンプルCSSをご紹介します。
吹き出し（右向き）/（左向き）、画像＋テキストのサンプルCSSをご紹介します。
...
| パネル |
|---|
| panelIconId | atlassian-plus |
|---|
| panelIcon | :plus: |
|---|
| panelIconText | :plus: |
|---|
| bgColor | #E6FCFF |
|---|
|
吹き出し（右向き・左向き共通） |
アイコン画像のサイズ変更
...
| コード ブロック |
|---|
|
#button1 ._ChatButton_BalloonAvatar {
width: 80px;
height: 80px;
} |
※サンプルコード内の「#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;
} |
...
| パネル |
|---|
| panelIconId | atlassian-plus |
|---|
| panelIcon | :plus: |
|---|
| panelIconText | :plus: |
|---|
| bgColor | #E6FCFF |
|---|
|
吹き出し（右向き） |
吹き出しの色変更
...
| コード ブロック |
|---|
|
#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;
} |
...
| パネル |
|---|
| panelIconId | atlassian-plus |
|---|
| panelIcon | :plus: |
|---|
| panelIconText | :plus: |
|---|
| bgColor | #E6FCFF |
|---|
|
吹き出し（左向き） |
吹き出しの色変更
...
| コード ブロック |
|---|
|
#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;
} |
...
| パネル |
|---|
| panelIconId | atlassian-plus |
|---|
| panelIcon | :plus: |
|---|
| panelIconText | :plus: |
|---|
| bgColor | #E6FCFF |
|---|
|
画像＋テキスト |
閉じるボタン ＜→×に変更
...
| コード ブロック |
|---|
|
div#button_3 > div > div > button > span > svg > path{ /* 画像＋テキスト <ボタン → ×ボタン */
d: path("M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z");
} |
※サンプルコード内の「#button_3」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。
ボタンの位置変更（左側から右側）
※イメージ
...
| コード ブロック |
|---|
|
div#button_3 {/* 画像＋テキスト 表示位置左→右変更 */
left: unset;
right: 30px;
bottom: 50px;
} |
...
| パネル |
|---|
| panelIconId | atlassian-plus |
|---|
| panelIcon | :plus: |
|---|
| panelIconText | :plus: |
|---|
| bgColor | #E6FCFF |
|---|
|
ECサイト側の要素の裏にチャットボタンが隠れてしまう場合 |
チャットボタンの表示優先順位（z-index）を調整
...
| コード ブロック |
|---|
|
div#_ChatButton {
z-index: 100;
} |
...
| パネル |
|---|
| panelIconId | atlassian-plus |
|---|
| panelIcon | :plus: |
|---|
| panelIconText | :plus: |
|---|
| bgColor | #E6FCFF |
|---|
|
ECサイト側のページトップへ戻るボタンとチャットボタンの表示位置が被る場合 |
チャットボタンの表示位置を調整
...
| コード ブロック |
|---|
|
div#_ChatButton {
bottom: 80px;
right: 30px;
} |
※サンプルコード内の「#_ChatButton」は、通常ボタンのIDとなります。
チャットボタン設定で設定したボタンの場合は、ボタン要素IDで設定したIDに変更ください。
※bottomやrightの値は、ECサイト側のページトップへ戻るボタンの位置に合わせて適宜ご変更ください。
| パネル |
|---|
| panelIconId | atlassian-plus |
|---|
| panelIcon | :plus: |
|---|
| panelIconText | :plus: |
|---|
| bgColor | #E6FCFF |
|---|
|
スナックバー |
スペシャルタグ・アタッチメントのスナックバーの文字色と背景色を変更
...
| コード ブロック |
|---|
|
._ChatWindowABar_Root > ._ChatWindowABar_Content { /* スナックバーの背景色と文字色変更 */
background-color: rgba(125,125,125,0.8);
color: #eae8e1;
}
._ChatWindowABar_Content > div:nth-child(2) > button { /* スナックバーの閉じるボタンの文字色変更 */
color: #eae8e1;
} |
| パネル |
|---|
| panelIconId | atlassian-plus |
|---|
| panelIcon | :plus: |
|---|
| panelIconText | :plus: |
|---|
| bgColor | #E6FCFF |
|---|
|
アイテム一覧 |
スペシャルタグ・アタッチメントの背景色を変更
...
| コード ブロック |
|---|
|
#_ChatRoot ._ChatAtchBg { /* スペシャルタグ・アタッチメントの背景色変更 */
background-color: #515151;
} |
| パネル |
|---|
| panelIconId | atlassian-plus |
|---|
| panelIcon | :plus: |
|---|
| panelIconText | :plus: |
|---|
| bgColor | #E6FCFF |
|---|
|
ヘッダー戻るボタン |
ヘッダー戻るボタンの文字色を変更（ヘッダー戻るボタンはアタッチメント・スペシャルタグ表示時のみ）
...
| コード ブロック |
|---|
|
#_ChatHeader_BackIcon { /* ヘッダーの文字色変更 */
color: #FFFFFF;
} |
...