...
※サンプルコード内の「#button_1」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。
...
...
応用編(アイコンなし・下向きの吹き出し)
※イメージ
...
コード ブロック | ||
---|---|---|
| ||
#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; } |
...