比較バージョン

キー

  • この行は追加されました。
  • この行は削除されました。
  • 書式設定が変更されました。

...

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

...

(電球オン)

...

応用編(アイコンなし・下向きの吹き出し)

※イメージ

...

コード ブロック
languagecss
#button_1 ._ChatButton_BalloonAvatar {/* アイコンを非表示 */
 display: none;
}

#button_1 ._ChatButton_BalloonText > div:nth-child(3) {/*  デフォルトの吹き出し三角部分を非表示 */
 display: none;
}

#button_1 ._ChatButton_BalloonText > div:nth-child(2) {/* 吹き出し部分のサイズや色等を調整 */
  background-color: #000000;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  letter-spacing : 6px;
  width: 200px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  display: block;
  box-shadow: unset;
}

#button_1 ._ChatButton_BalloonText > div:nth-child(2)::before {/* 吹き出しの三角部分の位置や色などを調整 */
  content: "";
  position: absolute;
  top: 100%;
  left: 75%;
  margin-left: -15px;
  border: 10px solid transparent;
  border-top: 10px solid #000000;
}

...