チャットボット
(1) 管理画面右上の設定ボタンをクリックします。
(2)「チャット」＞「デザイン」＞「独自CSS」をクリックします。
(3)「独自CSSを入力」欄にデザイン変更のコードを入力し、「更新」ボタンをクリックします。
コードを追加するときは、既に書いてあるコードを消さずに追記します。
デザイン変更コード
チャットの高さ変更
※赤字部分の数字を変更することで、チャットの高さを変更できます。
■ミニテーマ
#chatplusview.chatplusview-mini #outline #chatpluscontent #body #messages{height:330px;}■ベーシックテーマ
#chatplusview.chatplusview-basic #outline #chatpluscontent #body #messages{height:330px;}■アプリテーマ
#chatplusview.chatplusview-app #outline #chatpluscontent #body #messages, #chatplusview.chatplusview-app #outline #chatpluscontent #body.frame #messages {height:330px;}■モダンテーマ
#chatplusview.chatplusview-modern{height:500px;}
チャット（待機時）の幅変更
※赤字部分の数字を変更することで、チャットの幅を変更できます。
#chatplusview.chatplusview-basic.closed #outline,
#chatplusview.chatplusview-app.closed #outline,
#chatplusview.chatplusview-mini.closed #outline{
position:absolute;
right:0;
bottom:0;
width:200px;
}
チャット表示位置の変更
※以下を記述すると、チャットを左側に表示できます。
#chatplusview{
left:0px;
}
チャット枠の高さ変更
※ユーザーがメッセージを入力する枠の高さを調整します。
赤字部分の数字を変更することで、チャット枠の高さを変更できます。
#chatplusview.chatplusview-basic #outline #chatpluscontent #textarea #message-wrapper textarea,
#chatplusview.chatplusview-basic #outline #chatpluscontent #textarea #message-wrapper.has-operate textarea,
#chatplusview.chatplusview-app #outline #chatpluscontent #textarea #message-wrapper textarea,
#chatplusview.chatplusview-app #outline #chatpluscontent #textarea #message-wrapper.has-operate textarea,
#chatplusview.chatplusview-mini #outline #chatpluscontent #textarea #message-wrapper textarea,
#chatplusview.chatplusview-modern #outline #chatpluscontent #textarea #message-wrapper textarea {
height: 150px;
max-height: 150px;
}
モダンテーマ以外でチャット枠の高さ変更する場合は、チャット＞メニューより、「入力欄を1行にする」のチェックをはずしてください
チャットウインドウアイコンの変更
※赤字部分のUnicodeを変更することで、チャットウインドウアイコンを変更できます。
■ウインドウ最小化ボタン
#chatplusheader .operate .button-close i::before {content: "\f146";}■チャット終了ボタン
#chatplusheader .operate .button-remove i::before {content: "\f00d";}■スマホ版：全画面表示ボタン
#chatplusheader .operate .button-expand i::before {content: "\f424";}■スマホ版:縮小表示ボタン
#chatplusheader .operate .button-compress i::before {content: "\f422";}
アイキャッチャーを透過させる
#eye_catcher:hover {
opacity: 0.6;
}
フォントを変更する
※例として、「游明朝」に変更するコードを記載します。
#chatplusview div, #chatplusview span, #chatplusview applet,
#chatplusview object, #chatplusview iframe, #chatplusview h1,
#chatplusview h2, #chatplusview h3, #chatplusview h4, #chatplusview h5,
#chatplusview h6, #chatplusview p, #chatplusview blockquote,
#chatplusview pre, #chatplusview a, #chatplusview abbr, #chatplusview
acronym, #chatplusview address, #chatplusview big, #chatplusview cite,
#chatplusview code, #chatplusview del, #chatplusview dfn, #chatplusview
em, #chatplusview font, #chatplusview ins, #chatplusview kbd,
#chatplusview q, #chatplusview s, #chatplusview samp, #chatplusview
small, #chatplusview strike, #chatplusview strong, #chatplusview sub,
#chatplusview sup, #chatplusview tt, #chatplusview var, #chatplusview
dl, #chatplusview dt, #chatplusview dd, #chatplusview ol, #chatplusview
ul, #chatplusview li, #chatplusview fieldset, #chatplusview form,
#chatplusview label, #chatplusview legend, #chatplusview table,
#chatplusview caption, #chatplusview tbody, #chatplusview tfoot,
#chatplusview thead, #chatplusview tr, #chatplusview th, #chatplusview
td, #chatplusview input, #chatplusview textarea {font-family: "游明朝",
serif;}フォントの変更については、こちらのページ「チャットウィンドウ内でGoogleフォントを使用する」もご覧ください。
メッセージのフォントサイズを変更する
※赤字部分の数字を変更することで、フォントのサイズを変更できます。
■ミニテーマ
#chatplusview.chatplusview-app #outline #chatpluscontent #body #messages
.msg .text {font-size: 14px;■ベーシックテーマ
#chatplusview.chatplusview-app #outline #chatpluscontent #body #messages
.msg .text {font-size: 14px;■アプリテーマ
#chatplusview.chatplusview-app #outline #chatpluscontent #body #messages
.msg .text {font-size: 14px;■モダンテーマ
#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages
.msg .text {font-size: 14px;
その他、アイキャッチャーにアニメーションを設定するコードについては、こちらのページ『独自CSSでアイキャッチャーにアニメーションを設定する』をご覧ください。