このサポートサイトは、テンプレートのカスタマイズにあたるため、サポート対象外となります。
予めご理解の上ご利用をお願いいたします。

概要

サイトにかかるモーダル（背景の編みかけ部分）について、色や透過率を編集することが可能です。
参考: mozilla background-color

編集方法

  1. アクション編集画面から「カスタマイズ > CSS」を選択してください
  2. モーダルを指定するCSSセレクタ ※1 に対し、プロパティ background-colorと任意の プロパティ値 を設定してください
    ※1 テンプレートタイプによってスタイルを当てたいCSSセレクタが異なります。
    ※ 編集内容が反映されない場合、別のCSSが上書きしている可能性があります。
    ※ プロパティ値のサンプルは mozilla background-color をご参照ください。

「カード」タイプ
以下、「モーダルを指定するCSSセレクタ」が.karte-modal-backdropの時のサンプルとなります。
※ サンプルでは背景色は白、透過率は74%が指定されています

    .karte-modal-backdrop {
        background-color: rgba(0,0,0,0.74);
    }

背景色を白にしたい場合、「0,0,0」の箇所を「255,255,255」にすると白になります。
また背景色を濃くしたい場合はパーセンテージを上げ、薄くしたい場合は下げてください。

「ウィジェット」タイプ
ウィジェットタイプテンプレートはテンプレートの詳細説明文にタイプの表記があります。
そちらからタイプをご確認ください。

以下、「モーダルを指定するCSSセレクタ」が.karte-widget__backdropの時のサンプルとなります。
上記の「カード」タイプと同様にアクション編集画面のカスタマイズよりCSSの最下部に下記内容を追記してください。

    :global(.karte-widget__backdrop) {
        background-color: rgba(0,0,0,0.74) !important;
    }