2018年1月16日(火)よりサポートサイトはhttps://support2.karte.ioへ移行しました。

共通 - モーダル背景色、透過率を変更したい

カードタイプ(非ウィジェットタイプ)のテンプレート、またはウィジェットタイプのテンプレートを中央位置に表示した時にサイトにかかるモーダル(背景の編みかけ部分)について、色や透過率を編集することが可能です。

それぞれのテンプレートタイプによって編集方法が違いますのでご注意ください。

なお、ウィジェットタイプテンプレートは、テンプレートの詳細説明文にタイプの表記がありますのでそちらから見分けることができます。

 

カードタイプのテンプレート編集方法


カスタマイズするテンプレートはこちらを使用しますが、この他のテンプレートでも基本的に対応箇所は同じになります。

デフォルトモーダル背景色は黒で透過率74%になっています。
背景色や透過率を設定するには、アクション編集画面左上の「カスタマイズ」を選択し、「CSS」内の最下部に下記内容を追記してください。

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

上記はデフォルト値のため、「rgba(0,0,0,0.74)」の値を指定したい値に変更してください。
背景色を白にしたい場合、「0,0,0」の箇所を「255,255,255」にすると白になります。
また背景色を濃くしたい場合はパーセンテージを上げ、薄くしたい場合は下げてください。 


ウィジェットタイプのテンプレート編集方法


上記のカードタイプと同様にアクション編集画面のカスタマイズよりCSSの最下部に下記内容を追記してください。

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

上記同様、「rgba(0,0,0,0.74)」の値を指定したい値に変更してください。