SurveyMonkey
CSSを使用してアンケートのスタイルを整える
エンタープライズ機能： この機能に興味のある方は、セールスまでお問い合わせください。すでにエンタープライズアカウントをお持ちの場合は、カスタマーサクセスマネージャーにお問い合わせください。
カスタムテーマを作成して、グローバルスタイルを変更できます。テキストの書式設定ツールバーを使用して、特定のアンケートの質問に固有のスタイルを変更できます。
エンタープライズ代表管理者は、CSSを追加してカスタムアンケートテーマを作成し、アンケートの外観をブランド化できます。
カスタムCSSテーマの作成
代表管理者は、ご使用のビジュアル資産、フォント、色、およびスタイル設定に一致するカスタムアンケート用のCSSを追加できます。
新しいカスタムテーマをライブラリーに追加するには、次の手順に従います。
- メインナビゲーションから［マイチーム］を選択し、［ライブラリー］を選択します。
- ［+新しいアイテム］（アイテムの追加）を選択します。
- ［CSSテーマ］を選択します。
- ［コードをコピー］を選択し、お使いのCSS編集ツールに貼り付けます。
- コードにカスタマイズを加えてから、［テーマのカスタマイズ］の下のボックスにコードを追加し、［プレビューの生成］を選択しプレビューを表示します。
- ［保存］を選択します。
ヒント！アンケートを送信する前に、カスタムCSSテーマをプレビューしてください。
- アンケートプレビューを使用してCSSカスタムテーマを確認する
カスタムCSSテーマの更新
一旦カスタムCSSテーマを保存すると、ページ要素を編集したり変更したりできるのは、代表管理者のみです。
カスタムテーマを編集するには、次の手順に従います。
- メインナビゲーションから［マイチーム］を選択し、［ライブラリー］を選択します。
- ［...］を選択し、［更新］をクリックします。
- ［CSSテーマ］を選択します。
- ［コードをコピー］を選択し、お使いのCSS編集ツールに貼り付けます。
- コードにカスタマイズを加えてから、［テーマのカスタマイズ］の下のボックスにコードを追加し、［プレビューの生成］を選択しプレビューを表示します。
- ［保存］を選択します。
チームメンバーは、カスタムCSSテーマが適用されたアンケートの個々の要素を変更したり編集したりすることはできません。
ページ要素のカスタマイズ
一般プロパティ
| CSSプロパティ | 文字列の値 |
| フォントファミリー | 組織によっては、推奨フォントファミリーがある場合があります。その他のアイデアについては、CSS Webセーフフォントをご覧ください。 |
| フォントサイズ | 数字。例: 32px |
| 色 | カラーピッカーを使用して、希望する色のRGBA値を生成します。 |
| 背景色 | 16進コードかRGBA値のどちらかになります。 |
ページタイトル
ページタイトルをアンケートの別のページに追加し、きれいに整理することができます。
#pageTitle {
color: rgba(0,0,96,1);
background-color: #A1F3FB;
font-family: National2;
font-size: 24;
font-style: NORMAL;
font-weight: REGULAR;
text-decoration: NONE;
}
- フォントスタイルの変更
- フォントウェイトの変更
- テキスト装飾の変更
アンケートタイトル
回答者の画面では、アンケートのタイトルは各アンケートページの上部に表示されます。このアンケートタイトルを非表示にすることも可能です。
#surveyTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 26;
font-style: NORMAL;
font-weight: BOLD;
text-decoration: NONE;
}
- フォントスタイルの変更
- フォントウェイトの変更
- テキスト装飾の変更
アンケートページ
アンケートの質問の後ろに表示される背景色。アンケートの背景色は、背景画像を追加していない場合にのみ表示されます。
#surveyPage {
background-color: rgba(137,230,243,1);
}
#surveyPageSecondaryColor {
background-color: rgba(84,213,231,1);
}
ヒント！カラーピッカーを使用して、希望する色のRGBA値を生成します。
質問タイトル
さまざまな質問タイプで質問文の表示方法をカスタマイズできます。
#questionTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 22;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
- フォントスタイルの変更
- フォントウェイトの変更
- テキスト装飾の変更
質問本文
#questionBody {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 18;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
highlight-color: rgba(31,216,234,1);
}
- フォントスタイルの変更
- フォントウェイトの変更
- テキスト装飾の変更
ボタン
アンケートの回答者は、以下のようなボタンを使ってアンケート内を移動します。回答者がアンケートの各ページで［次へ］または［完了］ボタンをクリックすると、回答が保存され、送信されます。
#button {
font-family: National2;
font-size: 15;
font-weight: REGULAR;
}
- フォントウェイトの変更
エラー
回答者が回答必須の質問に答えなかった場合や、回答が必要な長さや制限を満たさなかった場合は、エラーメッセージが表示されます。
#error {
font-size: 16;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
- フォントスタイルの変更
- フォントウェイトの変更
- テキスト装飾の変更
終了リンク
回答者が回答中のページに入力した回答を保存せずにアンケートを終了することができる終了リンクは、各ページの右上に表示されます。
#exitLink {
background-color: rgba(0,0,0,0);
font-size: 12;
font-weight: LIGHT;
- フォントウェイトの変更
ページレイアウト
ページレイアウトを使用して、背景色や画像を表示する方法と場所を選択できます。
#pageLayout {
layout: banner;
opacity: 0.0;
}
ヒント！背景色を無地にするには、透明度を100にセットします。