| 情報 |
|---|
ウィジェットにCSSデザインを適応する方法 |
概要
ウィジェットの画面デザインを設定します。
操作画面
...
No | 項目名 | 説明 |
|---|---|---|
1 | チャットアイコンCSS（デフォルト） | チャットアイコンのデフォルトCSSのコードを表示しています。 |
2 | チャットアイコンCSS | 上書きしたいチャットアイコンCSSコードを記述します。 |
3 | チャット画面CSS（デフォルト） | チャット画面のデフォルトCSSのコードを表示しています。 |
4 | チャット画面CSS | 上書きしたいチャット画面CSSコードを記述します。 |
5 | ヘッダーを表示 | ヘッダーの表示/非表示を操作します。 |
6 | 一時的に無効にする | チャットボタンの有効/無効を操作します。 |
7 | 日付形式 | チャットルームでの送信・受信時刻の表記を設定します。 |
| 情報 |
|---|
...
チャット画面に表示されるリンクの内容を非表示にする方法 |
概要
CSSを編集し、チャットウィジェットでのメッセージ吹き出し内のリンクを、部分的に非表示にする
...
3.画面デザイン変更から、編集用CSSを編集します。
リンクのタイトルを非表示
| コード ブロック | ||
|---|---|---|
| ||
.speech .link-type-message-title { font-size: 0px; } |
リンク説明文を非表示
| コード ブロック | ||
|---|---|---|
| ||
.speech .link-type-message-description { font-size: 0px; } |
リンク画像を非表示
| コード ブロック |
|---|
.user-name-header + a { display: none; } |
| 情報 |
|---|
...
スマホに表示されるウィジェットの横幅を変更する方法 |
概要
スマホでサイトを閲覧した時の、チャット画面の横幅を設定します。
...
サイトのHTMLを表示し、name="viewport"を記述している、箇所を変更します。
| コード ブロック |
|---|
例：
<meta name="viewport" content="width=device-width"; |
...