Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

...

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

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

...

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

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

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

    Code Block
    languagejs
    onclick="document.querySelector('div#_ChatButton > button').click();return false;"


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

...

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

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

    Image Modified

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

    Image Modified

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

    Image Modified


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

    Image Modified

  4. リビジョンの設定完了後、テスト環境・本番環境に反映します。
    テスト環境・本番環境への反映方法は以下をご参照ください。
    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

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

Panel
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


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

    Image Modified

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

    Image Modified


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

    Image Modified


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

    Image Modified