Linyの回答フォームのデザインをカスタマイズする方法【CSSサンプル付き】

【カスタムデザイン】

カスタムデザインでは、以下を設定できます。

• ボタンカラー
• 背景カラー
• フォーム背景カラー
• ヘッダー画像
• 背景の画像

特定の箇所に対して、色や画像を設定するだけなので気軽にアレンジが可能です。

【カスタムCSS】

CSSはWebサイトやページの見た目を設定する時に使われる技術の1つです。

回答フォームのカスタムCSSを用いることで、ページに使用する文字や背景の色・形・大きさの編集、また、ボタンや見出しなどのアレンジができます。

カスタムデザインで指定できる箇所以外にも適用できるため、さらに自由度の高いデザインが作成できます。

• サンプルはコピーして、カスタムCSS入力欄に貼り付けすることで、みなさまの回答フォームでお試しいただけます。
• CSSは背景、見出し、送信ボタンなど、各パーツに分けて記載しています。
• 全体をコピー、または、パーツごとにコピーして活用できます。
• 「/背景とヘッダーここから/」など、「/**/」で囲っている文字列は動作に影響しません。これは、説明や補足情報です。一緒にコピーしても問題ありません。

/*送信ボタンここから*/
#submit-button {
background-color: #95732b;/*ボタンの色*/
border-color: #95732b;/*ボタンの枠線の色*/
margin:auto auto 20px;
width: 90%;
font-weight:bold;
}
/*送信ボタンここまで*/

補足

カラーコードとは、表現される色を指定するためのコードです。＃に続く6桁の英数字の組み合わせで表記されます。使用したい色のカラーコードを調べるときは、以下のようなサイトを利用するのがおすすめです。

参考：カラーコードの一覧表

/*背景とヘッダーここから*/
#mainform {
background: linear-gradient(65deg, #f9f9e2 ,#e6f8f4);/*グラデーションの始まりの色,終わりの色*/
}

.form-top {
background: url(https://d27rnpuamwvieu.cloudfront.net/0ozKEsXyTVnDacXeWXf3MowXX/normal),transparent;
/*ヘッダー画像のURL*/
background-repeat: no-repeat, no-repeat;
background-position: center, center;
background-size: 450px, cover;
padding: 0;
}

.form-bottom {
background: transparent;
padding: 0 25px 25px 30px;
}

.form-top-right i {
display: none;
}

.form-top-left h3 {
display: none;
}
/*背景とヘッダーここまで*/

/*中見出しここから*/
.description-md-title {
color: #555558;/*中見出しの文字の色*/
font-size: 20px;/*中見出しの文字の大きさ*/
font-family: 'Noto Sans JP', sans-serif;
line-height: 1;
width: 250px;
height: 40px;
background-color: transparent;
box-shadow: none;
}
/*中見出しここまで*/

/*小見出しここから*/
.description-title {
color: #757578;/*小見出しの文字の色*/
font-size: 16px;/*小見出しの文字の大きさ*/
font-family:'Noto Sans JP', sans-serif;
font-weight: normal;
padding-bottom: 16px;
border-color: #d8d8db;/*下線の色*/
border-bottom: 1px solid;/*下線の太さ*/
}
/*小見出しここまで*/

/*チェックボックスここから*/
.checkbox input[type=checkbox]:after,
input[type=checkbox]:after{
background: #ffffff;/*チェックボックスの中の色*/
border: 2px solid #757578;/*チェックボックスの枠線の色*/
border-radius: 3px;
}
/*チェックボックスここまで*/

/*送信ボタンここから*/
#submit-button {
color: #ffffff;/*文字の色*/
background: #0d624e;/*ボタンの色*/
border: 2px solid #0d624e;/*ボタンの枠線の色*/
margin: auto;
padding: 1.5rem 0;
width: 90%;
font-weight: bold;
border-radius: 100px;
}
/*送信ボタンここまで*/

/*ヘッダーここから*/
.form-top {
background: url(https://d27rnpuamwvieu.cloudfront.net/0jMsewD06LcUrOrWe3myXvgXX/normal);/*ヘッダー画像のURL*/
background-repeat: no-repeat;
background-size: cover;
height: 150px;
}

.form-top-right i {
display: none;
}

.form-top-left h3 {
display: none;
}
/*ヘッダーここまで*/

/*背景ここから*/
.form-bottom {
background-color: #e9e0cd;/*外側の背景の色*/
padding: 45px 30px;
}

.form-editor {
background: #ffffff;/*内側の背景の色*/
border-radius: 8px;
}
/*背景ここまで*/

/*中見出しここから*/
.description-md-title {
color: #7f7f81;/*中見出しの文字の色*/
font-size: 20px;/*中見出しの文字の大きさ*/
font-weight: bold;
text-align: center;
width: 100%;
padding: 15px 25px;
background-color: transparent;
box-shadow: none;
}

.col-sm-12 {
text-align: center;
}

.col-sm-12 p {
color: #8f8f91;/*説明文の文字の色*/
font-size: 12px;/*説明文の文字の大きさ*/
line-height: 1.4;
}
/*中見出しここまで*/

/*入力フォームここから*/
.form-control {
border: 1px solid #868689;/*入力フォームの枠の色*/
}
/*入力フォームここまで*/

/*送信ボタンここから*/
#submit-button {
background-color: #95732b;/*ボタンの色*/
border-color: #95732b;/*ボタンの枠線の色*/
margin:auto auto 20px;
width: 90%;
font-weight: bold;
}
/*送信ボタンここまで*/

/*ヘッダーここから*/
.form-top {
background: url(https://d27rnpuamwvieu.cloudfront.net/0e0GpPOaugFGAbViX0UpwqQXX/normal);/*ヘッダー画像のURL*/
background-repeat: no-repeat;
background-size: cover;
height: 200px;
}

.form-top-right i {
display: none;
}

.form-top-left h3 {
display: none;
}
/*ヘッダーここまで*/

/*背景ここから*/
.form-bottom {
background-color: #ffffff;/*背景の色*/
}
/*背景ここまで*/

/*中見出しここから*/
.description-md-title {
background: linear-gradient(to right, #2f4aaa, #3963f8); /*中見出しの文字のグラデーションの始まりの色,終わりの色*/
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 20px;/*中見出しの文字の大きさ*/
font-weight: bold;
width: 100%;
padding: 15px 25px;
box-shadow: none;
}

.col-sm-12 p {
color: #3963f8;/*説明文の文字の色*/
font-size: 12px;/*説明文の文字の大きさ*/
padding: 10px 0;
line-height: 1.4;
}
/*中見出しここまで*/

/*小見出しここから*/
.description-title {
color: #555558;/*小見出しの文字の色*/
font-size: 18px;/*小見出しの文字の大きさ*/
padding: 0.25em 0.5em;
margin-bottom: 0;
border-left: solid 5px #3963f8;/*左線の色*/
}
/*小見出しここまで*/

/*入力フォームここから*/
.form-control {
border: 1px solid #d8d8db;/*入力フォームの枠の色*/
}
/*入力フォームここまで*/

/*送信ボタンここから*/
#submit-button {
color: #ffffff;/*文字の色*/
background: linear-gradient( to right, #2f4aaa, #3963f8);
/*グラデーションの始まりの色,終わりの色*/
margin: auto;
padding: 2rem 0;
width: 90%;
font-weight: bold;
border-radius: 100px;
}
/*送信ボタンここまで*/