【Lステップ】回答フォームで使えるカスタムCSSのコード集

Lステップの回答フォームで、カスタムCSSを使って装飾したいと思う人は多いのではないでしょうか。

 

一方で、CSSコードは初心者にとっては使い方がわからず、外注するにも費用が発生するので、結局使わないという方も多いかと思います。

 

そこで今回は初心者でも簡単に装飾できる、回答フォームで使えるカスタムCSSコード集をご紹介しますので、ぜひ参考にしてみてください。

カスタムCSSを使う準備

カスタムCSSを使う前にやっておきたい準備を解説します。

 

本番用の回答フォームで失敗しないために、最初はテスト用の回答フォームを作成して使うのがオススメです。

 

テスト用の回答フォームを自分に送信し、表示を確認しながら調整すると良いでしょう。

 

また、CSSでは背景色など色を変えることができます。

 

下記のようなサイトを準備しておくと、CSSコードを修正する際に便利なのでオススメです。

 

CSSコード色見本オススメサイト

 

CSSコードの使い方

CSSコードの使い方を解説します。掲示板の投稿方法

①CSSを使いたい回答フォームを開き、下部の「カラー/デザイン設定」をクリックします。

 

②その下にある「カスタムCSSを使用」にチェックを入れます。

 

③CSSコードを入力する枠が表示されるので、ここへCSSコードを入力します。

CSSコード集

コピペで簡単に使えるCSSコードを紹介します。

 

コピぺをする時は、枠の中の全ての文字をコピーして貼り付けしてください。

 

赤文字になっている部分は、お好みで変更してください。

ヘッダー画像の設定方法

ヘッダー画像の設定方法を紹介します。

 

最初に、設定したい画像を登録します。

 

「カラー/デザイン設定」の「ヘッダー画像URL」にヘッダーに使いたい画像のURLを入力しましょう。

Lステップ「カラー/デザイン設定」の「ヘッダー画像URL」

※「ヘッダーアイコンを非表示にする」にチェックが入っていない場合は、チェックをいれます。

 

ーーーーーーーーーーー

<画像をURLにする方法>

 

①Lステップ管理画面の左メニューから「登録メディア一覧」をクリックします。

Lステップ 管理画面 登録メディア一覧

 

②「画像アップロード」をクリックし、回答フォームで使いたい画像をアップロードします。
Lステップ 登録メディア一覧 画像アップロード
③アップロードしたら「ダウンロード」をクリックします。

Lステップ 登録メディア一覧 画像ダウンロード

 

④開いたページのURLが、画像のURLです。このURLをコピーして使いましょう。

Lステップ 登録メディア画像ダウンロードしたURL

ーーーーーーーーーーー

 

次に下記のCSSを入力します。枠の中の全ての文字をコピーして貼り付けしてください。

/* ▼▼ ヘッダー画像を普通に挿入するCSS ここから ▼▼ */

.form-top {

background-position: center center;

width: 100%;

height: 150px;  /* スマホでのヘッダー画像の高さはここの数値を変更 */

}

 

.form-top .form-top-right {

display: none;

}

 

@media (min-width: 768px) {

.form-top {

height: 300px; /* パソコンでのヘッダー画像の高さはここの数値を変更 */

}

}

/* ▲▲ ヘッダー画像を普通に挿入するCSS ここまで ▲▲ */

※『 /* スマホでのヘッダー画像の高さはここの数値を変更 */』といったものも、そのままコピペしてOKです。後から編集する時に、どこの数字を変更したら良いかわかりやすいので、このまま貼り付けましょう。

 

ヘッダー画像の高さは、パソコン表示・スマホ表示でそれぞれ高さが設定できるので、表示を確認しながら変更しましょう。
Lステップチョコプラ 回答フォーム名前入力欄

ヘッダー画像内のタイトルを消す方法

回答フォームにタイトルを入力すると、画面上部が入力したタイトルに変わります。

 

しかし、ヘッダー内にも同じタイトルが自動で入力されてしまうので、ヘッダー内だけタイトルを消す方法をご紹介します。

Lステップチョコプラ 特典付きアンケート

/* ここでプレビューの文字を消しています */

.form-top .form-top-left  {

    display: none;

}

/* ここまでプレビューの文字を消しています */

 

画面上部のタイトルはそのままで、ヘッダー内だけ消えました。

Lステップチョコプラ 特典付きアンケート

中見出しの装飾方法

中見出しの装飾方法を紹介します。

 

①グラデーションLステップ お名前をご入力くださいフォーム

/* ▼▼ 中見出し16 ここから ▼▼ */

:root {

--bg-color-left: #1e90ff; /* グラデーションの左側の色はここのカラーコードを変更 */

--bg-color-right: #e0ffff; /* グラデーションの右側の色はここのカラーコードを変更 */

}

 

h4.description-md-title {

background: -webkit-linear-gradient(to right, var(--bg-color-left), var(--bg-color-right));

background:-moz-linear-gradient(to right, var(--bg-color-left), var(--bg-color-right));

background: linear-gradient(to right, var(--bg-color-left), var(--bg-color-right));

box-shadow: none;

color: #ffffff; /* 文字色はここのカラーコードを変更 */

width: 100%;

margin: 15px 0 0 0;

font-weight: 600;

padding: 15px 15px 15px 15px;

}

 

.col-sm-4, .col-sm-8, .col-sm-12 {

padding: 0;

}

/* ▲▲ 中見出し16 ここまで ▲▲ */

 

②ラベル
Lステップ お名前をご入力くださいフォーム

/* ▼▼ 中見出し10 ここから ▼▼ */
h4.description-md-title {

background: #f0e68c; /* 背景色はここのカラーコードを変更 */

color: #8b4513; /* 文字色はここのカラーコードを変更 */

width: 100%;

margin: 15px 0 0 0;

box-shadow: none;

font-weight: 600;

padding: 15px 15px 15px 15px;

border-radius: 22px 0px 0px 22px;

}

 

h4.description-md-title::before {

content: '🏠';

 

color: #ffffff;

margin-right: 8px;

}

 

.col-sm-4, .col-sm-8, .col-sm-12 {

padding: 0;

}

/* ▲▲ 中見出し10 ここまで ▲▲ */

 

③ラベル
Lステップ お名前をご入力くださいフォーム

/* ▼▼ 中見出し13 ここから ▼▼ */

h4.description-md-title {

background: #006400; /* 背景色はここのカラーコードを変更 */

box-shadow: none;

color: #ffffff; /* 文字色はここのカラーコードを変更 */

width: 100%;

margin: 15px 0 0 0;

font-weight: 600;

padding: 15px 15px 15px 15px;

position: relative;

}

 

h4.description-md-title::before {

position: absolute;

content: '';

top: 100%;

left: 0;

border: none;

border-bottom: solid 15px transparent;

border-right: solid 20px #3cb371; /* 折り返し部分の背景色はここのカラーコードを変更 */
f
}

 

.col-sm-4, .col-sm-8, .col-sm-12 {

padding: 0;

}

/* ▲▲ 中見出し13 ここまで ▲▲ */

小見出しの装飾方法

小見出しの装飾方法を紹介します。

 

①二重線
Lステップ お名前をご入力くださいフォーム

/* ▼▼ 小見出し03 ここから ▼▼ */

:root {

  --underline-color-s: #ff1744; /* 下線の色はここのカラーコードを変更 */

}

 

h5.description-title {

  border-bottom: 4px solid var(--underline-color-s);

  background: transparent;

  color: #555555; /* 文字色はここのカラーコードを変更 */

  width: 100%;

  margin: 15px 0 0 0;

  padding: 0 0 10px 0;

  box-shadow: none;

  font-weight: 600;

  position: relative;

}

 

h5.description-title::after {

  content: "";

  position: absolute;

  bottom: -8px;

  left: 0;

  right: 0;

  border-bottom: 1px solid var(--underline-color-s);

}

 

.col-sm-4, .col-sm-8, .col-sm-12 {

  padding: 0;

}

/* ▲▲ 小見出し03 ここまで ▲▲ */

 

②点線枠
Lステップ お名前をご入力くださいフォーム点線枠

/* ▼▼ 小見出し12 ここから ▼▼ */

:root {

 --bg-color-s: #db7093; /* 背景色はここのカラーコードを変更 */

}

 

h5.description-title {

 background: var(--bg-color-s);

 box-shadow: 0px 0px 0px 7px var(--bg-color-s);

 color: #ffffff; /* 文字色はここのカラーコードを変更 */

 border: dashed 1px #ffffff; /* 点線の色はここのカラーコードを変更 */

 width: calc(100% - 14px);

 margin: 15px 0 0 7px;

 font-weight: 600;

 padding: 15px 15px 15px 15px;

}

 

.col-sm-4, .col-sm-8, .col-sm-12 {

 padding: 0;

}

/* ▲▲ 小見出し12 ここまで ▲▲ */

 

③立体
Lステップ お名前をご入力くださいフォーム立体

/* ▼▼ 小見出し09 ここから ▼▼ */

h5.description-title {

 background: #f0f8ff; /* 背景色はここのカラーコードを変更 */

 color: #696969; /* 文字色はここのカラーコードを変更 */

 width: 100%;

 margin: 15px 0 0 0;

 box-shadow: none;

 font-weight: 600;

 padding: 15px 15px 15px 15px;

 border-left: solid 5px #0000cd; /* 左線の色はここのカラーコードを変更 */

 border-bottom: solid 3px #b0c4de; /* 下線の色はここのカラーコードを変更 */

}

 

.col-sm-4, .col-sm-8, .col-sm-12 {

 padding: 0;

}

/* ▲▲ 小見出し09 ここまで ▲▲ */

送信ボタンの装飾方法

送信ボタンの装飾方法を紹介します。

 

①矢印あり
Lステップ お名前をご入力くださいフォーム矢印あり

/* ▼▼ ボタン07 ここから ▼▼ */

:root {

  --btn-bg-color: #ff1744; /* 背景色はここのカラーコードを変更 */

  --btn-font-color: #ffffff; /* 文字色はここのカラーコードを変更 */

}

 

.btn-primary, .btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus, .btn-primary.active, .btn-primary:active, .btn-primary:hover,
.open>.btn-primary.dropdown-toggle {

  color: var(--btn-font-color);

  background: var(--btn-bg-color);

  border: none;

  width: 100%;

  height: 50px; /* ボタンの高さはここを変更 */

  position: relative;

  border-radius: 30px;

  padding: 0 45px 0 25px;

  font-size: 16px; /* 文字の大きさはここを変更 */

  letter-spacing: 0.1em;

  outline: none;

}

 

.btn-primary::before {

  content: '';

  position: absolute;

  top: 50%;

  right: 16px;

  transform: translateY(-50%);

  width: 25px;

  height: 25px;

  background: var(--btn-font-color);

  border-radius: 50vh;

}

 

.btn-primary:after {

  content: '';

  width: 8px;

  height: 8px;

  border: 0;

  border-top: 2px solid var(--btn-bg-color);

  border-right: 2px solid var(--btn-bg-color);

  position: absolute;

  top: 50%;

  right: 26px;

  transform: translateY(-50%) rotate(45deg);

}

/* ▲▲ ボタン07 ここまで ▲▲ */

 

②立体ボタン
Lステップ お名前をご入力くださいフォーム立体ボタン

/* ▼▼ ボタン02 ここから ▼▼ */

:root {

  --btn-bg-color: #ff1744; /* 背景色はここのカラーコードを変更 */

  --btn-font-color: #ffffff; /* 文字色はここのカラーコードを変更 */

  --btn-shadow-color: #d50000; /* 影の色はここのカラーコードを変更 */

}

 

.btn-primary {

  color: var(--btn-font-color);

  background: var(--btn-bg-color);

  border: none;

  width: 100%;

  height: 50px; /* ボタンの高さはここを変更 */

  border-radius: 30px;

  padding: 0 15px 0 15px;

  font-size: 16px; /* 文字の大きさはここを変更 */

  letter-spacing: 0.1em;

  position: relative;

  box-shadow: 0 10px 0 var(--btn-shadow-color), 0 10px 5px #0000004d;

}

 

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {

  outline: none;

  background: var(--btn-bg-color);

}

 

.btn-primary.active, .btn-primary:active, .btn-primary:hover, .open>.btn-primary.dropdown-toggle {

  color: var(--btn-font-color);

  background: var(--btn-bg-color);

  border: none;

  top: 5px;

  box-shadow: 0 5px 0 var(--btn-shadow-color), 0 5px 5px #0000004d;

}

/* ▲▲ ボタン02 ここまで ▲▲ */

送信ボタンを削除する方法

送信ボタンの削除方法を紹介します。

Lステップ 送信ボタンを削除した回答フォーム 

/* ▼▼ 送信ボタンを削除するCSS ここから ▼▼ */

.form-bottom > .form-editor > .row {

  display: none;

}

/* ▲▲ 送信ボタンを削除するCSS ここまで ▲▲ */

送信ボタンを使わないケースとしては、ブログを配信するなど、友だちからの回答内容やフォーム確認を保存する必要がない時に役立ちます。

Lステップ 構築手順公開 

ラジオボタンを横並びにする方法

ラジオボタンを横並びにする方法を紹介します。

Lステップ 性別ラジオボタン

/* ▼▼ラジオボタン横並び ここから ▼▼ */

.form-editor > div:nth-of-type(3) > .form-group > .form-text > .col-sm-8 > span > .radios {

    margin: 0;

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

}

/* ▲▲ ラジオボタン横並び ここまで ▲▲ */

 

1行目の『type(3) 』の数字部分は、回答フォームの要素の順番の数字です。

Lステップ 性別ラジオボタン設定画面 

横並びにしたい要素の番号に数字を合わせてください。

カスタムCSSを使った回答フォームの作成例

紹介したCSSを使った回答フォームの例です。

Lステップ 住所問い合わせフォーム 

上記のような住所を入力してもらいたい場合、郵便番号を入力したら、自動で住所が反映される設定もできます。

 

 

Lステップ 美容院カウンセリングシート

Lステップ 正社員採用エントリーフォーム

カスタムCSSを利用する際の注意点

カスタムCSSを利用する際の注意点をご紹介します。

テンプレートをそのままコピペする

CSSコードをコピペする時は、一文字も間違えないようにコピーして貼り付けしましょう。

 

以下のような文言も含めて、すべてコピペして大丈夫です。

/* ▼▼ ヘッダー画像を普通に挿入するCSS ここから ▼▼ */

 

少しでも余計なスペースが入っていたり、一文字でも入力間違いがあったりすると正しく反映されません。

 

よくある間違いは以下の文字です。

  • セミコロン ;
  • カッコ { }
  • コメントアウト /*

多くても少なくても反応しないので、正しく貼り付けることが大切です。

 

貼り付けても何も変わらない場合は、貼り付けする文字が足りなかったり、余分な文字が入っていたりする場合があるので、一度消してから貼り直してみましょう。

英語・数字・記号すべて必ず半角で入力する

CSSコードでは全角は使わず、英語・数字・記号すべての文字を、必ず半角で入力しましょう。

 

全角で入力するとうまく反映されなかったり、文字化けしたりする場合があります。

 

スペースも半角で入力されているか確認しましょう。

コードは下に下に貼っていく

CSSコードを追加していく時は、下へ追加していきましょう。

 

その時に、前のコードと2〜3行あけて貼り付けすると、コードの区別がついて見やすくなります。

Lステップ CSSコード

また、CSSコードのスタイルが重複している場合は、あとから貼り付けされたスタイルが優先されます。

 

例えば、中見出しのコードを2種類設定していたとすると、下に貼り付けたほうが適用されます。

まとめ

今回は、Lステップの回答フォームで使えるCSSコードをご紹介しました。

 

今ならLステップご契約者限定プレゼントで、この記事に記載されている以外のCSSコードや、1000種類以上のリッチメニュー画像がもらえます。ぜひダウンロードしてご利用ください。

*特典の画像は、Lステップの管理画面右下のチャットのメニューから受け取れます。

 

 

設定方法のサポートや、使い方についてのアドバイスを希望される方は、ご契約者様限定サポートの「スポットコンサル」をご活用ください。

 

Lステップの認定サポーターが個別にフォローいたします。