ウィジェットをCSSでカスタマイズする

CSSを使ってウィジェットの見た目をカスタマイズすることができます。以下についてカスタマイズが可能です。

• フォントサイズ
• フォントファミリー
• フォントカラー
• 罫線の色

CSSの記述方法

ウィジェットをカスタマイズする際はセレクターとして [id^="datasign_cmp"]::part(root) を指定して記述内容に従ってCSSの宣言を記述してください。

公表モード埋込方式をカスタマイズする際はセレクターとして [class^="__datasign_embed_disclosure_mode"]::part(root) を指定して記述内容に従ってCSSの宣言を記述してください。

<style>
[id^="datasign_cmp"]::part(root) {
  /* ウィジェット向けの宣言を記述する */
}

[class^="__datasign_embed_disclosure_mode"]::part(root) {
  /* 公表モード埋め込み方式向けの宣言を記述する */
}
</style>

CSSの記述内容

フォントサイズを変更するには

下記のカスタムプロパティで基準となるフォントサイズを宣言します。デフォルトは --font-size-base: 10px;

--font-size-base: 20px; 

フォントファミリーを変更するには

下記のカスタムプロパティでフォントファミリーの指定を宣言します。デフォルトは --font-family-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;

--font-family-base: "Helvetica Neue";

罫線の色を変更するには

下記のカスタムプロパティで罫線の色を宣言します。デフォルトは --line-border-color: #dbdce1;

--line-border-color: #000000;

ダイアログのフォントカラーを変更するには

以下の3種類のカスタムプロパティでフォントカラーを宣言します。カスタムプロパティの該当箇所は対応図を参照ください。

--dialog-basic-font-color: #000; /* ① */
--dialog-button-primary-font-color: #fff; /* ② */
--dialog-button-basic-font-color: #000; /* ③ */

ウィジェットのフォントカラーを変更する場合

以下の3種類のカスタムプロパティを利用できます。カスタムプロパティの該当箇所は対応図を参照ください。

--widget-basic-font-color: #fff; /* ① */
--widget-link-font-color: #fff; /* ② */
--widget-primary-font-color: #000; /* ③ */

埋込方式のフォントカラーを変更する場合

以下の3種類のカスタムプロパティを利用できます。カスタムプロパティの該当箇所は対応図を参照ください。

--embed-basic-font-color: #fff; /* ① */
--embed-primary-font-color: #fff; /* ② */
--embed-link-font-color: #666; /* ③ */

ダイアログのフォントカラーカスタムプロパティと該当箇所の対応図

ウィジェットのフォントカラーカスタムプロパティと該当箇所の対応図

埋込方式のフォントカラーカスタムプロパティと該当箇所の対応図

CSSの記述例

<style>
[id^="datasign_cmp"]::part(root) {
  --font-size-base: 20px;
  --font-family-base: "Helvetica Neue";
  --line-border-color: #000000;
  --dialog-basic-font-color: #000;
  --dialog-button-primary-font-color: #fff;
  --dialog-button-basic-font-color: #000;
  --widget-basic-font-color: #fff;
  --widget-link-font-color: #６６６;
  --widget-primary-font-color: #666;
}

[class^="__datasign_embed_disclosure_mode"]::part(root) {
  --font-size-base: 20px;
  --font-family-base: "Helvetica Neue";
  --line-border-color: #000000;
  --embed-basic-font-color: #fff;
  --embed-primary-font-color: #fff;
  --embed-link-font-color: #666;
}
</style>