【カスタムCSS】CSSサンプル

こちらではWhatYaのサンプルCSSをご紹介します。

チャットボタン

吹き出し（右向き）/（左向き）、画像＋テキストのサンプルCSSをご紹介します。

※各サンプルコード内の「#button_1」「#button_2」「#button_3」の部分は
チャットボタン設定のボタン要素IDで設定したIDに変更ください。

吹き出し（右向き・左向き共通）

アイコン画像のサイズ変更

#button1 ._ChatButton_BalloonAvatar {
  width: 80px;
  height: 80px;
}

※サンプルコード内の「#button_1」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。
※widthやheightの値は、ご希望のサイズに適宜ご変更ください。

アイコン画像を非表示

#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_1」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。

吹き出し（左向き）

吹き出しの色変更

#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;
}

※サンプルコード内の「#button_2」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。

画像＋テキスト

閉じるボタン＜→×に変更

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;
}

※サンプルコード内の「#button_3」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。

ECサイト側の要素の裏にチャットボタンが隠れてしまう場合

チャットボタンの表示優先順位（z-index）を調整

div#_ChatButton {
  z-index: 100;
}

※サンプルコード内の「#_ChatButton」は、通常ボタンのIDとなります。
チャットボタン設定で設定したボタンの場合は、ボタン要素IDで設定したIDに変更ください。

ECサイト側のページトップへ戻るボタンとチャットボタンの表示位置が被る場合

チャットボタンの表示位置を調整

div#_ChatButton {
  bottom: 80px;
  right: 30px;
}

※サンプルコード内の「#_ChatButton」は、通常ボタンのIDとなります。
チャットボタン設定で設定したボタンの場合は、ボタン要素IDで設定したIDに変更ください。
※bottomやrightの値は、ECサイト側のページトップへ戻るボタンの位置に合わせて適宜ご変更ください。

スペシャルタグ・アタッチメント

スナックバー

スペシャルタグ・アタッチメントのスナックバーの文字色と背景色を変更

._ChatWindowABar_Root > ._ChatWindowABar_Content { /* スナックバーの背景色と文字色変更 */
 background-color: rgba(125,125,125,0.8);
 color: #eae8e1;
}

._ChatWindowABar_Content > div:nth-child(2) > button { /* スナックバーの閉じるボタンの文字色変更 */
 color: #eae8e1;
}

アイテム一覧

スペシャルタグ・アタッチメントの背景色を変更

#_ChatRoot ._ChatAtchBg { /* スペシャルタグ・アタッチメントの背景色変更 */
  background-color: #515151;
}

ヘッダー戻るボタン

ヘッダー戻るボタンの文字色を変更（ヘッダー戻るボタンはアタッチメント・スペシャルタグ表示時のみ）

#_ChatHeader_BackIcon { /* ヘッダーの文字色変更 */
 color: #FFFFFF;
}