比較バージョン

古いバージョン 6

changes.mady.by.user 尾関沙紀

保存しました

次と比較

新しいバージョン 7

changes.mady.by.user 尾関沙紀

保存しました

キー

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

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

...

Aura panel
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMxNzJiNGQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFFeGNsYW1hdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzRkZDMDIxJTIyJTJDJTIyc2l6ZSUyMiUzQTI2JTdEJTdEJTJDJTIyaGVhZGxpbmUlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTdCJTIydGV4dCUyMiUzQSUyMk5vdGUlMjIlMkMlMjJjb2xvciUyMiUzQSUyMiUyMzJkMmQyZCUyMiUyQyUyMmZvbnRTaXplJTIyJTNBMTglMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIyYm9sZCUyMiUyQyUyMnRleHRBbGlnbiUyMiUzQSUyMmxlZnQlMjIlN0QlN0QlMkMlMjJiYXNlJTIyJTNBJTdCJTIyYmFja2dyb3VuZENvbG9yJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNmZmZmZmYlMjIlN0QlMkMlMjJib3JkZXJSYWRpdXMlMjIlM0ElN0IlMjJyYWRpdXMlMjIlM0E0JTdEJTJDJTIyYm94U2hhZG93JTIyJTNBJTdCJTIyc2hhZG93cyUyMiUzQSU1QiU3QiUyMmNvbG9yJTIyJTNBJTIycmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjA4KSUyMiUyQyUyMnglMjIlM0EwJTJDJTIyeSUyMiUzQTElMkMlMjJibHVyJTIyJTNBMSUyQyUyMnNwcmVhZCUyMiUzQTAlN0QlMkMlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4xNiklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTMlMkMlMjJzcHJlYWQlMjIlM0ExJTdEJTVEJTdEJTdEJTdE

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

※サンプルコード

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

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

...

Aura panel
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMxNzJiNGQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFFeGNsYW1hdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzRkZDMDIxJTIyJTJDJTIyc2l6ZSUyMiUzQTI2JTdEJTdEJTJDJTIyaGVhZGxpbmUlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTdCJTIydGV4dCUyMiUzQSUyMk5vdGUlMjIlMkMlMjJjb2xvciUyMiUzQSUyMiUyMzJkMmQyZCUyMiUyQyUyMmZvbnRTaXplJTIyJTNBMTglMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIyYm9sZCUyMiUyQyUyMnRleHRBbGlnbiUyMiUzQSUyMmxlZnQlMjIlN0QlN0QlMkMlMjJiYXNlJTIyJTNBJTdCJTIyYmFja2dyb3VuZENvbG9yJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNmZmZmZmYlMjIlN0QlMkMlMjJib3JkZXJSYWRpdXMlMjIlM0ElN0IlMjJyYWRpdXMlMjIlM0E0JTdEJTJDJTIyYm94U2hhZG93JTIyJTNBJTdCJTIyc2hhZG93cyUyMiUzQSU1QiU3QiUyMmNvbG9yJTIyJTNBJTIycmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjA4KSUyMiUyQyUyMnglMjIlM0EwJTJDJTIyeSUyMiUzQTElMkMlMjJibHVyJTIyJTNBMSUyQyUyMnNwcmVhZCUyMiUzQTAlN0QlMkMlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4xNiklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTMlMkMlMjJzcHJlYWQlMjIlM0ExJTdEJTVEJTdEJTdEJTdE

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

※サンプルコード

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

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

...

Aura panel
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMxNzJiNGQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFFeGNsYW1hdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzRkZDMDIxJTIyJTJDJTIyc2l6ZSUyMiUzQTI2JTdEJTdEJTJDJTIyaGVhZGxpbmUlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTdCJTIydGV4dCUyMiUzQSUyMk5vdGUlMjIlMkMlMjJjb2xvciUyMiUzQSUyMiUyMzJkMmQyZCUyMiUyQyUyMmZvbnRTaXplJTIyJTNBMTglMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIyYm9sZCUyMiUyQyUyMnRleHRBbGlnbiUyMiUzQSUyMmxlZnQlMjIlN0QlN0QlMkMlMjJiYXNlJTIyJTNBJTdCJTIyYmFja2dyb3VuZENvbG9yJTIyJTNBJTdCJTIyY29sb3IlMjIlM0ElMjIlMjNmZmZmZmYlMjIlN0QlMkMlMjJib3JkZXJSYWRpdXMlMjIlM0ElN0IlMjJyYWRpdXMlMjIlM0E0JTdEJTJDJTIyYm94U2hhZG93JTIyJTNBJTdCJTIyc2hhZG93cyUyMiUzQSU1QiU3QiUyMmNvbG9yJTIyJTNBJTIycmdiYSgwJTJDJTIwMCUyQyUyMDAlMkMlMjAwLjA4KSUyMiUyQyUyMnglMjIlM0EwJTJDJTIyeSUyMiUzQTElMkMlMjJibHVyJTIyJTNBMSUyQyUyMnNwcmVhZCUyMiUzQTAlN0QlMkMlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4xNiklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTMlMkMlMjJzcHJlYWQlMjIlM0ExJTdEJTVEJTdEJTdEJTdE

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

※サンプルコード

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

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

...

以下の要素はチャットデザインで設定することができないため、デザイン変更の場合はCSSで文字色を指定いただきますようお願いいたします。

  • メニュー画面メニュー画面（#_ChatMenuRoot）

    ※サンプルコード

    コード ブロック
    languagecss
    オペレーター接続文言
    /* メニュー画面の背景色と文字色を変更 */
#_ChatMenuRoot {
 background: #a0d8ef !important;
 color: #fdfdfd !important;
}

  • オペレーター接続中文言（._ChatWindowOpConnecting）


    ※サンプルコード

    コード ブロック
    languagecss
    オペレーター切断文言
    /* オペレーター接続中文言の文字色を変更 */
._ChatWindowOpConnecting  {
 color: #a0d8ef !important;
}


  • オペレーター接続文言（._ChatWindowOpConnected）

    ※サンプルコード

    コード ブロック
    languagecss
    有人モード再接続ボタン
    /* オペレーター接続文言の文字色を変更 */
._ChatWindowOpConnected {
 color: #a0d8ef  !important;
}

  • 有人モード再接続ボタン（._ChatWindowOpReconnect）

    ※サンプルコード

    コード ブロック
    languagecss
    （有人モード）ファイル添付ボタン
    /* 有人モード再接続ボタンの背景色と文字色を変更 */
._ChatWindowOpReconnect {
 background: #a0d8ef !important;
 color: #fdfdfd !important;
}


  • 【有人モード】ファイル添付ボタン（#_ChatWindowUserInputAttachFileButton）

    ※サンプルコード

    コード ブロック
    languagecss
    （有人モード）ファイルアップロード画面
    /* （有人モード）ファイル添付ボタンの色を変更 */
#_ChatWindowUserInputAttachFileButton {
 color: #a0d8ef !important;
}


  • 【有人モード】ファイルアップロード画面

    ※サンプルコード

    コード ブロック
    languagecss
    /* ファイルアップロード画面の背景色を変更 */
#_ChatSubpage_ImgPreview-IMAGE {
 background: #a0d8ef !important;
}

/* ファイルアップロード画面 キャンセルボタンの背景色と文字色を変更 */
#_ChatSubpage_ImgPreview-CANCEL {
 background: #a0d8ef !important;
 color: #fdfdfd !important;
}

/* ファイルアップロード画面 アップロードボタンの背景色と文字色を変更 */
#_ChatSubpage_ImgPreview-UPLOAD {
 background: #a0d8ef !important;
 color: #fdfdfd !important;
}


情報

基本操作方法

カラーの設定方法
　└カラーの指定方法
　└画像の指定方法

...

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

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

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

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

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


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

注意

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

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

...

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

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

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


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

注意

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

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

...