比較バージョン

古いバージョン 11

changes.mady.by.user 尾関沙紀

保存しました

次と比較

新しいバージョン 現在

changes.mady.by.user 尾関沙紀

保存しました

キー

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

こちらのページでカスタムCSSについて解説します。

Aura panel
summaryWhatYaをご利用中のお客さまへの留意事項
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjM5ZDlkOWQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFFeGNsYW1hdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzZmY1NjMwJTIyJTJDJTIyc2l6ZSUyMiUzQTI2JTdEJTdEJTJDJTIyaGVhZGxpbmUlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTdCJTIydGV4dCUyMiUzQSUyMldoYXRZYSVFMyU4MiU5MiVFMyU4MSU5NCVFNSU4OCVBOSVFNyU5NCVBOCVFNCVCOCVBRCVFMyU4MSVBRSVFMyU4MSU4QSVFNSVBRSVBMiVFMyU4MSU5NSVFMyU4MSVCRSVFMyU4MSVCOCVFMyU4MSVBRSVFNyU5NSU5OSVFNiU4NCU4RiVFNCVCQSU4QiVFOSVBMCU4NSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzMmQyZDJkJTIyJTJDJTIyZm9udFNpemUlMjIlM0EyNiUyQyUyMmZvbnRXZWlnaHQlMjIlM0ElMjJib2xkJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmJhc2UlMjIlM0ElN0IlMjJiYWNrZ3JvdW5kQ29sb3IlMjIlM0ElN0IlMjJjb2xvciUyMiUzQSUyMiUyM2ZmZmZmZiUyMiU3RCUyQyUyMmJvcmRlciUyMiUzQSU3QiUyMmNvbG9yJTIyJTNBJTIyJTIzZmY1NjMwJTIyJTJDJTIyd2lkdGglMjIlM0ExMCUyQyUyMnRvcCUyMiUzQWZhbHNlJTJDJTIycmlnaHQlMjIlM0FmYWxzZSUyQyUyMmJvdHRvbSUyMiUzQWZhbHNlJTJDJTIybGVmdCUyMiUzQXRydWUlMkMlMjJzdHlsZSUyMiUzQSUyMnNvbGlkJTIyJTdEJTJDJTIyYm9yZGVyUmFkaXVzJTIyJTNBJTdCJTIycmFkaXVzJTIyJTNBNCU3RCUyQyUyMmJveFNoYWRvdyUyMiUzQSU3QiUyMnNoYWRvd3MlMjIlM0ElNUIlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4wOCklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTElMkMlMjJzcHJlYWQlMjIlM0EwJTdEJTJDJTdCJTIyY29sb3IlMjIlM0ElMjJyZ2JhKDAlMkMlMjAwJTJDJTIwMCUyQyUyMDAuMTYpJTIyJTJDJTIyeCUyMiUzQTAlMkMlMjJ5JTIyJTNBMSUyQyUyMmJsdXIlMjIlM0EzJTJDJTIyc3ByZWFkJTIyJTNBMSU3RCU1RCU3RCU3RCU3RAJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMyZDJkMmQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFFeGNsYW1hdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzZmY1NjMwJTIyJTJDJTIyc2l6ZSUyMiUzQTI2JTdEJTdEJTJDJTIyaGVhZGxpbmUlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTdCJTIydGV4dCUyMiUzQSUyMldoYXRZYSVFMyU4MiU5MiVFMyU4MSU5NCVFNSU4OCVBOSVFNyU5NCVBOCVFNCVCOCVBRCVFMyU4MSVBRSVFMyU4MSU4QSVFNSVBRSVBMiVFMyU4MSU5NSVFMyU4MSVCRSVFMyU4MSVCOCVFMyU4MSVBRSVFNyU5NSU5OSVFNiU4NCU4RiVFNCVCQSU4QiVFOSVBMCU4NSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzMmQyZDJkJTIyJTJDJTIyZm9udFNpemUlMjIlM0EyNiUyQyUyMmZvbnRXZWlnaHQlMjIlM0ElMjJib2xkJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmJhc2UlMjIlM0ElN0IlMjJiYWNrZ3JvdW5kQ29sb3IlMjIlM0ElN0IlMjJjb2xvciUyMiUzQSUyMiUyM2ZmZmZmZiUyMiU3RCUyQyUyMmJvcmRlciUyMiUzQSU3QiUyMmNvbG9yJTIyJTNBJTIyJTIzZmY1NjMwJTIyJTJDJTIyd2lkdGglMjIlM0ExMCUyQyUyMnRvcCUyMiUzQWZhbHNlJTJDJTIycmlnaHQlMjIlM0FmYWxzZSUyQyUyMmJvdHRvbSUyMiUzQWZhbHNlJTJDJTIybGVmdCUyMiUzQXRydWUlMkMlMjJzdHlsZSUyMiUzQSUyMnNvbGlkJTIyJTdEJTJDJTIyYm9yZGVyUmFkaXVzJTIyJTNBJTdCJTIycmFkaXVzJTIyJTNBNCU3RCUyQyUyMmJveFNoYWRvdyUyMiUzQSU3QiUyMnNoYWRvd3MlMjIlM0ElNUIlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4wOCklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTElMkMlMjJzcHJlYWQlMjIlM0EwJTdEJTJDJTdCJTIyY29sb3IlMjIlM0ElMjJyZ2JhKDAlMkMlMjAwJTJDJTIwMCUyQyUyMDAuMTYpJTIyJTJDJTIyeCUyMiUzQTAlMkMlMjJ5JTIyJTNBMSUyQyUyMmJsdXIlMjIlM0EzJTJDJTIyc3ByZWFkJTIyJTNBMSU3RCU1RCU3RCU3RCU3RA==

カスタムCSSをご利用の際に、チャット設定の「CSS分離」という項目にチェックを入れる必要があります。
こちらの項目にチェックを入れると、現在お客さま側で設定されているCSSが効かなくなります。
以下に記載の注意事項等をご確認の上、当機能のご利用を検討いただけますようお願いいたします。

...

Aura panel
summaryWhatYaをご利用中のお客さまへの留意事項
paramsJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjM5ZDlkOWQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFFeGNsYW1hdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzZmY1NjMwJTIyJTJDJTIyc2l6ZSUyMiUzQTI2JTdEJTdEJTJDJTIyaGVhZGxpbmUlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTdCJTIydGV4dCUyMiUzQSUyMldoYXRZYSVFMyU4MiU5MiVFMyU4MSU5NCVFNSU4OCVBOSVFNyU5NCVBOCVFNCVCOCVBRCVFMyU4MSVBRSVFMyU4MSU4QSVFNSVBRSVBMiVFMyU4MSU5NSVFMyU4MSVCRSVFMyU4MSVCOCVFMyU4MSVBRSVFNyU5NSU5OSVFNiU4NCU4RiVFNCVCQSU4QiVFOSVBMCU4NSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzMmQyZDJkJTIyJTJDJTIyZm9udFNpemUlMjIlM0EyNiUyQyUyMmZvbnRXZWlnaHQlMjIlM0ElMjJib2xkJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmJhc2UlMjIlM0ElN0IlMjJiYWNrZ3JvdW5kQ29sb3IlMjIlM0ElN0IlMjJjb2xvciUyMiUzQSUyMiUyM2ZmZmZmZiUyMiU3RCUyQyUyMmJvcmRlciUyMiUzQSU3QiUyMmNvbG9yJTIyJTNBJTIyJTIzZmY1NjMwJTIyJTJDJTIyd2lkdGglMjIlM0ExMCUyQyUyMnRvcCUyMiUzQWZhbHNlJTJDJTIycmlnaHQlMjIlM0FmYWxzZSUyQyUyMmJvdHRvbSUyMiUzQWZhbHNlJTJDJTIybGVmdCUyMiUzQXRydWUlMkMlMjJzdHlsZSUyMiUzQSUyMnNvbGlkJTIyJTdEJTJDJTIyYm9yZGVyUmFkaXVzJTIyJTNBJTdCJTIycmFkaXVzJTIyJTNBNCU3RCUyQyUyMmJveFNoYWRvdyUyMiUzQSU3QiUyMnNoYWRvd3MlMjIlM0ElNUIlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4wOCklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTElMkMlMjJzcHJlYWQlMjIlM0EwJTdEJTJDJTdCJTIyY29sb3IlMjIlM0ElMjJyZ2JhKDAlMkMlMjAwJTJDJTIwMCUyQyUyMDAuMTYpJTIyJTJDJTIyeCUyMiUzQTAlMkMlMjJ5JTIyJTNBMSUyQyUyMmJsdXIlMjIlM0EzJTJDJTIyc3ByZWFkJTIyJTNBMSU3RCU1RCU3RCU3RCU3RAJTdCJTIyYm9keSUyMiUzQSU3QiUyMnRleHQlMjIlM0ElN0IlMjJmb250U2l6ZSUyMiUzQTE0JTJDJTIyY29sb3IlMjIlM0ElMjIlMjMyZDJkMmQlMjIlMkMlMjJmb250V2VpZ2h0JTIyJTNBJTIybm9ybWFsJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmhlYWRlciUyMiUzQSU3QiUyMmljb24lMjIlM0ElN0IlMjJuYW1lJTIyJTNBJTIyZmFFeGNsYW1hdGlvbkNpcmNsZSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzZmY1NjMwJTIyJTJDJTIyc2l6ZSUyMiUzQTI2JTdEJTdEJTJDJTIyaGVhZGxpbmUlMjIlM0ElN0IlMjJ0ZXh0JTIyJTNBJTdCJTIydGV4dCUyMiUzQSUyMldoYXRZYSVFMyU4MiU5MiVFMyU4MSU5NCVFNSU4OCVBOSVFNyU5NCVBOCVFNCVCOCVBRCVFMyU4MSVBRSVFMyU4MSU4QSVFNSVBRSVBMiVFMyU4MSU5NSVFMyU4MSVCRSVFMyU4MSVCOCVFMyU4MSVBRSVFNyU5NSU5OSVFNiU4NCU4RiVFNCVCQSU4QiVFOSVBMCU4NSUyMiUyQyUyMmNvbG9yJTIyJTNBJTIyJTIzMmQyZDJkJTIyJTJDJTIyZm9udFNpemUlMjIlM0EyNiUyQyUyMmZvbnRXZWlnaHQlMjIlM0ElMjJib2xkJTIyJTJDJTIydGV4dEFsaWduJTIyJTNBJTIybGVmdCUyMiU3RCU3RCUyQyUyMmJhc2UlMjIlM0ElN0IlMjJiYWNrZ3JvdW5kQ29sb3IlMjIlM0ElN0IlMjJjb2xvciUyMiUzQSUyMiUyM2ZmZmZmZiUyMiU3RCUyQyUyMmJvcmRlciUyMiUzQSU3QiUyMmNvbG9yJTIyJTNBJTIyJTIzZmY1NjMwJTIyJTJDJTIyd2lkdGglMjIlM0ExMCUyQyUyMnRvcCUyMiUzQWZhbHNlJTJDJTIycmlnaHQlMjIlM0FmYWxzZSUyQyUyMmJvdHRvbSUyMiUzQWZhbHNlJTJDJTIybGVmdCUyMiUzQXRydWUlMkMlMjJzdHlsZSUyMiUzQSUyMnNvbGlkJTIyJTdEJTJDJTIyYm9yZGVyUmFkaXVzJTIyJTNBJTdCJTIycmFkaXVzJTIyJTNBNCU3RCUyQyUyMmJveFNoYWRvdyUyMiUzQSU3QiUyMnNoYWRvd3MlMjIlM0ElNUIlN0IlMjJjb2xvciUyMiUzQSUyMnJnYmEoMCUyQyUyMDAlMkMlMjAwJTJDJTIwMC4wOCklMjIlMkMlMjJ4JTIyJTNBMCUyQyUyMnklMjIlM0ExJTJDJTIyYmx1ciUyMiUzQTElMkMlMjJzcHJlYWQlMjIlM0EwJTdEJTJDJTdCJTIyY29sb3IlMjIlM0ElMjJyZ2JhKDAlMkMlMjAwJTJDJTIwMCUyQyUyMDAuMTYpJTIyJTJDJTIyeCUyMiUzQTAlMkMlMjJ5JTIyJTNBMSUyQyUyMmJsdXIlMjIlM0EzJTJDJTIyc3ByZWFkJTIyJTNBMSU3RCU1RCU3RCU3RCU3RA==

現在WhatYaをご利用のお客さまの場合、チャット設定の「CSS分離」にチェックを入れると、
お客さま側で設定されているCSSが効かなくなります。

カスタムCSSをご利用する場合は、チャット設定の「CSS分離」にチェックを入れた後、
お客さま側で設定されているCSSをカスタムCSSのStyle Sheetに入力してください。
詳しい設定の流れはカスタムCSS利用の流れをご覧ください。

...

  • お客さまがご利用のECパッケージのCSSの影響による、デザイン崩れを低減できること
    ※ただし、ECパッケージのCSSの単位がremで指定されている場合は影響を受けます。（フォントサイズ等）

  • WhatYa管理画面上でWhatYaのCSSを設定できること

...

  • 現在WhatYaをご利用のお客さまの場合、お客さま側で設定されているCSSが効かなくなること

  • review画面でCSS適用ボタンが効かなくなること

    Image Added

  • お客さま側で設定されているJavaScript から WhatYaのボタンを操作することが難しくなること
    例）以下のコードのように特定の要素をクリック後、チャットウィンドウを起動させている場合

    コード ブロック
    languagejs
    onclick="document.querySelector('div#_ChatButton > button').click();return false;"


    ※以下のような機能をご実装いただいていた場合、うまく動かなくなる可能性がございます。

　この場合、以下のページのサンプルコードを参考に設定ください。
　https://solairo.atlassian.net/wiki/spaces/WHAT1/pages/1538523231/WhatYa#WhatYa%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0CSS%E3%82%92%E3%81%94%E5%88%A9%E7%94%A8%E3%81%AE%E3%81%8A%E5%AE%A2%E6%A7%98

情報

カスタムCSS利用の流れ

利用の流れ

基本的な設定の流れは、以下の通りです。

...

以下のご説明は、設定を行ったことのある方を対象に説明しております。
初めて、設定をさわる方や、設定の新規追加・編集方法がわからない方はこちらをご覧ください。

  1. 既に設定済みのリビジョンを編集する場合は、該当リビジョンを開いて「編集」ボタンをクリック
    新しくリビジョンを追加の場合は「新しく設定を始める」ボタンをクリックして、
    「編集ページ」にお進みください。

    Image Modified

  2. 編集ページに遷移後、「CSS分離」の項目にチェックを入れ、保存ボタンをクリックします。

...

  1. Image Added

  2. 保存ボタンをクリック後、任意のコメントを入力し、確定をクリックします。

...

  1. Image Added


    右下に「保存しました」が表示されましたら、リビジョンの設定が完了となります。

...

  1. Image Added

  2. リビジョンの設定完了後、テスト環境・本番環境に反映します。
    テスト環境・本番環境への反映方法は以下をご参照ください。
    https://solairo.atlassian.net/wiki/spaces/WHAT1/pages/2341339164#%E3%83%86%E3%82%B9%E3%83%88%E7%92%B0%E5%A2%83%E3%83%BB%E6%9C%AC%E7%95%AA%E7%92%B0%E5%A2%83%E5%8F%8D%E6%98%A0

    テスト環境・本番環境への反映後、チャット設定側の設定は完了となります。

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

カスタムCSS

カスタムCSS側の設定方法は、以下です。

  1. 左のメニューからカスタムCSSを選択し、新しく設定をはじめるをクリックします。

    Image Modified

  2. Style Sheet内に任意のCSSを入力し、保存ボタンをクリックします。

    Image Modified


    保存ボタンをクリック後、任意のコメントを入力し、確定をクリックします。

    Image Modified


    右下に「保存しました」が表示されましたら、リビジョンの設定が完了となります。

    Image Modified

  3. リビジョンの設定完了後、テスト環境・本番環境に反映します。
    まず、テスト環境に反映したいリビジョンを選択します。

    Image Modified

  4. テスト環境に反映をクリックします。

    Image Modified


    任意のコメントを入力し、確定をクリックします。

    Image Modified


    右下に「環境への反映が完了しました」が表示されましたら、テスト環境への反映が完了となります。

    Image Modified

...


  1. ※御社環境でテスト環境に反映中の設定を確認する方法は以下をご参照ください。
    【はじめに】WhatYaのテスト方法について

    Image Modified

  2. テスト環境での動作確認後、本番環境への反映を行います。
    テスト環境を本番環境へ反映をクリックします。

    Image Modified


    任意のコメントを入力し、確定をクリックします。

    Image Modified


    右下に「環境への反映が完了しました」が表示されましたら、本番環境への反映が完了となります。

    Image Modified