比較バージョン

古いバージョン 15

changes.mady.by.user 尾関沙紀

保存しました

次と比較

新しいバージョン 16

changes.mady.by.user 尾関沙紀

保存しました

キー

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

チャットデザインの作成方法・概念をこのページで解説しています。

目次
minLevel1
maxLevel7

 

情報

チャットデザイン画面について

チャットの各要素の背景色や文字色など、デザインの設定ができる画面です。チャットの各要素の背景（backgroundプロパティ）や文字色（colorプロパティ）など、デザインの設定ができる画面です。

左側メニュー：チャットデザインをクリックするとチャットデザイン設定画面に遷移します。

...

パネル
panelIconId31-20e3
panelIcon:one:
panelIconText1️⃣
bgColor#E6FCFF

ヘッダー

チャットのヘッダーの背景色と文字色を設定できます。チャットのヘッダーの背景（backgroundプロパティ）と文字色（colorプロパティ）を設定できます。

  • 背景
    ヘッダー部分の背景色を設定できます。ヘッダー部分の背景（backgroundプロパティ）を設定できます。

  • 文字色
    ハンバーガーメニューとヘッダー部分の文字の色を設定できます。ハンバーガーメニューとヘッダー部分の文字の色（colorプロパティ）を設定できます。

パネル
panelIconId32-20e3
panelIcon:two:
panelIconText2️⃣
bgColor#E6FCFF

チャットを閉じるボタン

チャットを閉じるボタンの色を設定できます。チャットを閉じるボタンの色（colorプロパティ）を設定できます。

...

パネル
panelIconId33-20e3
panelIcon:three:
panelIconText3️⃣
bgColor#E6FCFF

チャットの背景

チャットの背景を設定できます。チャットの背景（backgroundプロパティ）を設定できます。

  • 背景
    チャットの背景色を設定できます。チャットの背景（backgroundプロパティ）を設定できます。

    背景画像
    チャットの背景画像を設定できます。

    Image Removed

パネル
panelIconId34-20e3
panelIcon:four:
panelIconText4️⃣
bgColor#E6FCFF

メッセージ入力ウィンドウ

メッセージ入力ウィンドウの背景色と文字色を設定できます。メッセージ入力ウィンドウの背景色（backgroundプロパティ）と文字色（colorプロパティ）を設定できます。

  • 背景
    メッセージ入力ウィンドウの背景色を設定できます。メッセージ入力ウィンドウの背景（backgroundプロパティ）を設定できます。

  • 文字色
    メッセージ入力ウィンドウのプレースホルダーとメッセージ送信ボタンの文字色を設定できます。メッセージ入力ウィンドウのプレースホルダーとメッセージ送信ボタンの文字色（colorプロパティ）を設定できます。

パネル
panelIconId35-20e3
panelIcon:five:
panelIconText5️⃣
bgColor#E6FCFF

ボット応答吹き出し

ボット応答吹き出しの背景色と文字色を設定できます。ボット応答吹き出しの背景色（backgroundプロパティ）と文字色（colorプロパティ）を設定できます。

  • 背景
    ボット応答吹き出しの背景色を設定できます。ボット応答吹き出しの背景（backgroundプロパティ）を設定できます。

  • 文字色
    ボット応答吹き出し内の文字色を設定できます。ボット応答吹き出し内の文字色（colorプロパティ）を設定できます。

Aura panel
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMxNzJiNGQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFFeGNsYW1hdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzRkZDMDIxJTIyJTJDJTIyc2l6ZSUyMiUzQTI2JTdEJTdEJTJDJTIyaGVhZGxpbmUlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTdCJTIydGV4dCUyMiUzQSUyMk5vdGUlMjIlMkMlMjJjb2xvciUyMiUzQSUyMiUyMzJkMmQyZCUyMiUyQyUyMmZvbnRTaXplJTIyJTNBMTglMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIyYm9sZCUyMiUyQyUyMnRleHRBbGlnbiUyMiUzQSUyMmxlZnQlMjIlN0QlN0QlMkMlMjJiYXNlJTIyJTNBJTdCJTIyYmFja2dyb3VuZENvbG9yJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNmZmZmZmYlMjIlN0QlMkMlMjJib3JkZXJSYWRpdXMlMjIlM0ElN0IlMjJyYWRpdXMlMjIlM0E0JTdEJTJDJTIyYm94U2hhZG93JTIyJTNBJTdCJTIyc2hhZG93cyUyMiUzQSU1QiU3QiUyMmNvbG9yJTIyJTNBJTIycmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjA4KSUyMiUyQyUyMnglMjIlM0EwJTJDJTIyeSUyMiUzQTElMkMlMjJibHVyJTIyJTNBMSUyQyUyMnNwcmVhZCUyMiUzQTAlN0QlMkMlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4xNiklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTMlMkMlMjJzcHJlYWQlMjIlM0ExJTdEJTVEJTdEJTdEJTdE

投稿者名（._ChatWindowContent_POST_USER）と投稿日時（._ChatWindowContent_POST_DATE_TIME）の文字色はチャットデザインから設定できません。
文字色を変更したい場合は、CSSで文字色を指定いただきますようお願いいたします。

※サンプルコード

コード ブロック
languagecss
/* 投稿者名の文字色を変更 */
._ChatWindowContent_POST_USER {
 color: #a0d8ef;
}

/* 投稿日時の文字色を変更 */
._ChatWindowContent_POST_DATE_TIME {
 color: #a0d8ef;
}

パネル
panelIconId36-20e3
panelIcon:six:
panelIconText6️⃣
bgColor#E6FCFF

オペレータ応答吹き出し

オペレータ応答吹き出しの背景色と文字色を設定できます。オペレータ応答吹き出しの背景（backgroundプロパティ）と文字色（color（backgroundプロパティ）プロパティ）を設定できます。

  • 背景
    オペレータ応答吹き出しの背景色を設定できます。オペレータ応答吹き出しの背景（backgroundプロパティ）を設定できます。

  • 文字色
    オペレータ応答吹き出し内の文字色を設定できます。オペレータ応答吹き出し内の文字色（colorプロパティ）を設定できます。

Aura panel
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMxNzJiNGQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFFeGNsYW1hdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzRkZDMDIxJTIyJTJDJTIyc2l6ZSUyMiUzQTI2JTdEJTdEJTJDJTIyaGVhZGxpbmUlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTdCJTIydGV4dCUyMiUzQSUyMk5vdGUlMjIlMkMlMjJjb2xvciUyMiUzQSUyMiUyMzJkMmQyZCUyMiUyQyUyMmZvbnRTaXplJTIyJTNBMTglMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIyYm9sZCUyMiUyQyUyMnRleHRBbGlnbiUyMiUzQSUyMmxlZnQlMjIlN0QlN0QlMkMlMjJiYXNlJTIyJTNBJTdCJTIyYmFja2dyb3VuZENvbG9yJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNmZmZmZmYlMjIlN0QlMkMlMjJib3JkZXJSYWRpdXMlMjIlM0ElN0IlMjJyYWRpdXMlMjIlM0E0JTdEJTJDJTIyYm94U2hhZG93JTIyJTNBJTdCJTIyc2hhZG93cyUyMiUzQSU1QiU3QiUyMmNvbG9yJTIyJTNBJTIycmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjA4KSUyMiUyQyUyMnglMjIlM0EwJTJDJTIyeSUyMiUzQTElMkMlMjJibHVyJTIyJTNBMSUyQyUyMnNwcmVhZCUyMiUzQTAlN0QlMkMlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4xNiklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTMlMkMlMjJzcHJlYWQlMjIlM0ExJTdEJTVEJTdEJTdEJTdE

投稿者名（._ChatWindowContent_POST_USER）と投稿日時（._ChatWindowContent_POST_DATE_TIME）の文字色はチャットデザインから設定できません。
文字色を変更したい場合は、CSSで文字色を指定いただきますようお願いいたします。

※サンプルコード

コード ブロック
languagecss
/* 投稿者名の文字色を変更 */
._ChatWindowContent_POST_USER {
 color: #a0d8ef;
}

/* 投稿日時の文字色を変更 */
._ChatWindowContent_POST_DATE_TIME {
 color: #a0d8ef;
}

パネル
panelIconId37-20e3
panelIcon:seven:
panelIconText7️⃣
bgColor#E6FCFF

ユーザー発言吹き出し

ユーザー発言吹き出しの背景色と文字色を設定できます。ユーザー発言吹き出しの背景（backgroundプロパティ）と文字色（colorプロパティ）を設定できます。

  • 背景
    ユーザー発言吹き出しの背景色を設定できます。ユーザー発言吹き出しの背景（backgroundプロパティ）を設定できます。

  • 文字色
    ユーザー発言吹き出し内の文字色を設定できます。ユーザー発言吹き出し内の文字色（colorプロパティ）を設定できます。

Aura panel
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMxNzJiNGQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFFeGNsYW1hdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzRkZDMDIxJTIyJTJDJTIyc2l6ZSUyMiUzQTI2JTdEJTdEJTJDJTIyaGVhZGxpbmUlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTdCJTIydGV4dCUyMiUzQSUyMk5vdGUlMjIlMkMlMjJjb2xvciUyMiUzQSUyMiUyMzJkMmQyZCUyMiUyQyUyMmZvbnRTaXplJTIyJTNBMTglMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIyYm9sZCUyMiUyQyUyMnRleHRBbGlnbiUyMiUzQSUyMmxlZnQlMjIlN0QlN0QlMkMlMjJiYXNlJTIyJTNBJTdCJTIyYmFja2dyb3VuZENvbG9yJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNmZmZmZmYlMjIlN0QlMkMlMjJib3JkZXJSYWRpdXMlMjIlM0ElN0IlMjJyYWRpdXMlMjIlM0E0JTdEJTJDJTIyYm94U2hhZG93JTIyJTNBJTdCJTIyc2hhZG93cyUyMiUzQSU1QiU3QiUyMmNvbG9yJTIyJTNBJTIycmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjA4KSUyMiUyQyUyMnglMjIlM0EwJTJDJTIyeSUyMiUzQTElMkMlMjJibHVyJTIyJTNBMSUyQyUyMnNwcmVhZCUyMiUzQTAlN0QlMkMlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4xNiklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTMlMkMlMjJzcHJlYWQlMjIlM0ExJTdEJTVEJTdEJTdEJTdE

投稿者名（._ChatWindowContent_POST_USER）と投稿日時（._ChatWindowContent_POST_DATE_TIME）の文字色はチャットデザインから設定できません。
文字色を変更したい場合は、CSSで文字色を指定いただきますようお願いいたします。

※サンプルコード

コード ブロック
languagecss
/* 投稿者名の文字色を変更 */
._ChatWindowContent_POST_USER {
 color: #a0d8ef;
}

/* 投稿日時の文字色を変更 */
._ChatWindowContent_POST_DATE_TIME {
 color: #a0d8ef;
}

パネル
panelIconId38-20e3
panelIcon:eight:
panelIconText8️⃣
bgColor#E6FCFF

選択肢リストメッセージ

選択肢リストメッセージの背景色と文字色を設定できます。選択肢リストメッセージの背景（backgroundプロパティ）と文字色（colorプロパティ）を設定できます。

  • 背景
    選択肢リストメッセージの背景色を設定できます。選択肢リストメッセージの背景（backgroundプロパティ）を設定できます。

  • 文字色
    選択肢リストメッセージ内の文字色を設定できます。選択肢リストメッセージ内の文字色（colorプロパティ）を設定できます。

パネル
panelIconId26a0
panelIcon:warning:
panelIconText⚠
bgColor#FFFAE6

チャットデザインで設定ができない要素について

...

Aura panel
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMxNzJiNGQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFJbmZvQ2lyY2xlJTIyJTJDJTIyY29sb3IlMjIlM0ElMjIlMjMyODg4RjglMjIlMkMlMjJzaXplJTIyJTNBMjYlN0QlN0QlMkMlMjJoZWFkbGluZSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTIyJUUzJTgyJUFCJUUzJTgzJUE5JUUzJTgzJUJDJUUzJTgxJUFFJUU4JUE4JUFEJUU1JUFFJTlBJUU2JTk2JUI5JUU2JUIzJTk1JUUzJTgxJUFCJUUzJTgxJUE0JUUzJTgxJTg0JUUzJTgxJUE2JTIyJTJDJTIyY29sb3IlMjIlM0ElMjIlMjMyZDJkMmQlMjIlMkMlMjJmb250U2l6ZSUyMiUzQTE4JTJDJTIyZm9udFdlaWdodCUyMiUzQSUyMmJvbGQlMjIlMkMlMjJ0ZXh0QWxpZ24lMjIlM0ElMjJsZWZ0JTIyJTdEJTdEJTJDJTIyYmFzZSUyMiUzQSU3QiUyMmJhY2tncm91bmRDb2xvciUyMiUzQSU3QiUyMmNvbG9yJTIyJTNBJTIyJTIzZmZmZmZmJTIyJTdEJTJDJTIyYm9yZGVyUmFkaXVzJTIyJTNBJTdCJTIycmFkaXVzJTIyJTNBNCU3RCUyQyUyMmJveFNoYWRvdyUyMiUzQSU3QiUyMnNoYWRvd3MlMjIlM0ElNUIlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4wOCklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTElMkMlMjJzcHJlYWQlMjIlM0EwJTdEJTJDJTdCJTIyY29sb3IlMjIlM0ElMjJyZ2JhKDAlMkMlMjAwJTJDJTIwMCUyQyUyMDAuMTYpJTIyJTJDJTIyeCUyMiUzQTAlMkMlMjJ5JTIyJTNBMSUyQyUyMmJsdXIlMjIlM0EzJTJDJTIyc3ByZWFkJTIyJTNBMSU3RCU1RCU3RCU3RCU3RA==

まず、基本の操作方法としてカラーの設定についてご説明いたします。・テキスト入力欄にカラー値（HEX）を入力

・テキスト入力欄にカラー値を入力

テキスト入力欄にカラー値を入力いただくことができます。

テキスト入力欄にカラー値（HEX）を入力いただくことができます。・テキスト入力欄にCSSのbackgroundプロパティとcolorプロパティの値を入力

各要素の項目：背景はCSSのbackgroundプロパティの値を入力いただけます。

Image Added

各要素の項目：文字色/色はCSSのcolorプロパティの値を入力いただけます。

Image Added

・カラーピッカーから選択

以下の方法で選択することができます。

...

  1. チャットデザイン ＞ 保存済み一覧の中から、編集したいリビジョンをクリック

  2. 「編集」ボタンをクリック

  3. 「編集」ボタンクリック後、編集画面に遷移

  4. 編集が完了しましたら、「保存」ボタンをクリック

  5. 「保存」ボタンをクリック後、任意のコメントを入力し、「確定」ボタンをクリック
    以上で編集完了となります。


    編集完了後、保存済み一覧の一番上に編集済みのリビジョンが表示されます。

注意

適用中のリビジョンを編集することはできません。

適用中のリビジョンを編集したい場合は、保存済み一覧の適用中のリビジョンから編集を行ってください。
※編集完了後、再度本番環境に反映したい場合は本番環境反映の手順を行ってください。

...

  1. チャットデザイン ＞ 保存済み一覧の中から、削除したいリビジョン をクリック

  2. 「この設定を削除」ボタンをクリック

  3. 該当のリビジョンを削除する場合は「はい」をクリック
    ※削除をやめる場合は「いいえ」をクリックすると、削除がキャンセルされます。


    画面右下に「削除しました」というダイアログが表示されると、リビジョンの削除が完了となります。

注意

適用中のリビジョンを削除することはできません。

適用中のリビジョンを削除したい場合は、保存済み一覧の適用中のリビジョンから削除をしてください。

...