Contentsquare
こんにちは！お困りですか？
よく検索されるトピック: CS Live, 指標リスト, インテグレーションのリクエスト

最新情報: リリース & アップデート Contentsquare グロースプラン
English (GB) Français

このセクションの記事

もっと見る
  • 更新

あなたの調査デザインをCSSを使ってカスタマイズする方法

AIを使用して英語から翻訳されました

この記事はAI技術を使用して翻訳されたことにご注意ください。正確性を維持するよう努めていますが、一部の詳細は元のテキストを完全に反映していない場合があります。情報に不明な点がある場合は、英語版を参照してください。

この機能はVoice of Customer Proプランで利用可能です。

このガイドでは、カスタムCSSを使用して調査をスタイリングする方法を学びます。また、調査がウェブサイトのデザインに合うように調整できる特定のパラメータについても詳しく学ぶことができます。

CSSカスタマイズ設定の見つけ方

1. 既存の調査を開き、編集をクリックします（または新しい調査を作成します）。

Screenshot 2025-01-10 at 14.33.28.png

2. 外観タブに移動します。

3. カスタムCSSセクションにカスタムコードを追加します。

  • 以下のセクションを見て、カスタマイズ可能な調査要素、CSSプロパティ、およびその可能な値について詳しく学んでください。
  • 以下のセクションで提供されているカスタムCSSの例をコピー＆ペーストし、利用可能なパラメータを使用してウェブサイトのデザインに最も合うように調整できます。

トップに戻る

調査用のカスタマイズ可能なCSSセレクタのリスト

以下のCSSセレクタを使用して、スタイリング目的で特定の調査HTML要素をターゲットにできます。以下の可能な値を持つCSSプロパティのリストセクションで、各セレクタに対してカスタマイズできるCSSプロパティとその可能な値について詳しく学ぶことができます。

特定の要素を編集するには、対応するカスタムCSSの例をコピーし、そのプロパティを調整して調査を好みに合わせてスタイリングします。

survey

このセレクタは、特定の要素ではなく、全体の調査に適用されます。

#survey {
    font-family: 'Ambit';
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

survey-button

このセレクタは、以下の調査要素に対応しています：

Screenshot 2025-01-10 at 13.58.11.png

カスタムCSSの例：

#survey-button {
    font-family: 'Ambit';
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

question-title

このセレクタは、以下の調査要素に対応しています：

Screenshot 2025-01-10 at 13.59.38.png

カスタムCSSの例：

#question-title {
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
}

question-description

説明フィールドはステートメント質問タイプで利用可能です。このセレクタは、以下の調査要素に対応しています：

Screenshot 2025-01-10 at 18.04.08.png

カスタムCSSの例：

#question-description {
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

answer-body

このセレクタは、次の調査要素に対応しています：

Screenshot 2025-01-10 at 14.07.24.png

カスタムCSSの例：

#score-label {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

score-label

このセレクタは、次の調査要素に対応しています：

Screenshot 2025-01-10 at 14.02.37.png

カスタムCSSの例：

#score-label {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

button

このセレクタは、次の調査要素に対応しています：

Screenshot 2025-01-10 at 14.25.54.png

カスタムCSSの例：

#button {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
}

skip-button

このセレクタは、次の調査要素に対応しています：

Screenshot 2025-01-10 at 14.02.37 copy 5.png

カスタムCSSの例：

#skip-button {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-decoration: underline;
}

disabled-button

このセレクタは、次の調査要素に対応しています：

Screenshot 2025-01-10 at 14.02.37 copy.png

カスタムCSSの例：

#disabled-button {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
}

close-button

このセレクタは、フルスクリーン調査のために表示される次の要素に対応しています：

Screenshot 2025-01-15 at 17.36.31.png

このセレクタでは、colorプロパティを調整できます。カスタムCSSの例：

#close-button {
color: rgba(0,0,96,1);
}

dropdown-arrow

このセレクタは、次の調査要素に対応しています：

Screenshot 2025-01-15 at 17.36.04.png

このセレクタでは、colorプロパティを調整できます。カスタムCSSの例：

#dropdown-arrow {
color: rgba(0,0,96,1);
}

ページの先頭に戻る

CSSプロパティのリストとその可能な値

上記のセレクタ（close-buttonおよびdropdown-arrowを除く）について、以下のCSSプロパティを調整できます。

font-family

注意: font-familyをカスタマイズするには、まず希望するフォントをウェブサイトにアップロードしてください。

カスタムCSSの例：

#survey-button {
   font-family: 'Ambit';
}

font-style

CSSプロパティ 可能な値
font-style INHERIT
INITIAL
ITALIC
NORMAL
OBLIQUE

カスタムCSSの例：

#survey-button {
    font-style: italic;
}

font-weight

CSSプロパティ 可能な値
font-weight NORMAL
BOLD
LIGHTER
BOLDER
100
900

カスタムCSSの例：

#survey-button {
    font-weight: Bold;
}

font-size

カスタムCSSの例：

#survey-button {
    font-size: 16px;
}

text-decoration

CSSプロパティ 可能な値
text-decoration NONE
UNDERLINE

カスタムCSSの例：

#survey-button {
    text-decoration: none;
}

ページの先頭に戻る