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

Owned by 尾関沙紀
Last updated: 2024/08/01 by 空色　小鮒 俊太朗
5 min read

こちらでは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_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」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。
※leftやbottomの値はご希望の位置に適宜ご変更ください。

吹き出し（右向き）

吹き出しの色変更

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

吹き出しの色変更

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

※前提：チャットボタン設定のボタンの種類は「吹き出し（右向き）」を選択ください。

アイコンなし・下向きの吹き出し（閉じるボタンを表示する場合）

※イメージ

※こちらはチャットボタン側の設定「×ボタン無効」にチェックを入れていない場合のCSSサンプルです。
なお、「×ボタン無効」にチェックを入れた場合はこちらをご参照ください。

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

アイコンなし・下向きの吹き出し（閉じるボタンを非表示する場合）

※イメージ

※こちらはチャットボタン側の設定「×ボタン無効」にチェックを入れた場合のCSSサンプルです。
なお、「×ボタン無効」にチェックを入れていない場合はこちらをご参照ください。

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

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

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

ボタンの位置変更（左側から右側）

※イメージ

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

ボタンサイズの変更

※サンプルコード内の「#button_3」は、チャットボタン設定のボタン要素IDで設定したIDに変更ください。
※widthやheightの値は、ご希望のサイズに適宜ご変更ください。
※こちらのサンプルでは、ボタンの表示位置を右側に変更しております。
もし、デフォルト表示のまま左側に表示させたい場合は、以下赤枠内を削除してください。

 

画像+テキストボタンのポップアップ表示化

 

 

 

閉じるボタンの背景色と文字色を変更したい場合

※背景色…background-color
※文字色…color

閉じるボタンのサイズを変更したい場合

 

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

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

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

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

BOTモードのみメッセージ入力欄を非表示

 

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

 

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

 

スペシャルタグ・アタッチメントのソート欄を非表示

 

 

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

 

リンクボタンを立体的なボタンに変更

※width、heightやbackground、colorの値は、ご希望の値に適宜ご変更ください。



PCとスマートフォンでCSSを変えたい場合は、メディアクエリを利用してスマートフォン側のCSSをご指定ください。

※この場合は、アクセスしたデバイスの横幅が896px以下の場合にのみCSSが適用されます。
※記述例）



ボタン設定のボタン要素IDを設定している場合、
該当のチャットボタンをクリック後、チャットウィンドウの要素(#_ChatWindow)のclass属性に _ChatButtonID_{ボタン要素ID} が付与されます。

付与された._ChatButtonID_{ボタン要素ID} を指定することで、ボタン設定毎に別のCSSを適用させることが可能です。

ボタン要素IDを設定していない場合、該当のチャットボタンがクリック後、チャットウィンドウの要素(#_ChatWindow)のclass属性に _ChatButtonID_{ボタン要素ID} が付与されません。
ボタン設定毎に別のCSSを適用させたい場合は、必ずボタン要素IDを設定ください。

 

使用例）ボタン設定4（ボタン要素ID：button4）のみメッセージ入力欄を非表示にしたい

※サンプルコード内の「button4」の部分には、ボタン要素IDで設定したIDに変更ください。