How To
CSS記述欄 (複数) でチャットのデザインを調整したい
「CSS記述欄 (複数)」では、チャットに適用するCSSを用途ごとに分けて追加できます（旧画面の編集画面でも利用できます）。
よく使うデザイン調整はプリセットとして用意しているので、メニューから選ぶだけで追加できます。
CSS記述欄 (複数) を開く
プロファイルの編集画面で左上の「基本情報・全体設定」を押下し、「デザイン・動作設定」の「外観」にあるCSS記述欄 (複数)の「＋」を押下します。
プリセットを追加する
追加メニューから、使いたいプリセットを選びます。項目にマウスを載せると説明が表示されます。
追加した項目を開くと、CSSの内容と使い方の説明が表示されます。色や大きさは、説明にしたがってCSS内の値を書き換えて調整できます。
用意しているプリセット
| メニュー | 項目 | 内容 |
|---|---|---|
| 汎用 | 自由CSS | 任意のCSSを記述します |
| ボタン | 次へ / 更新 / 確認ボタンの見た目 | 角丸・太字（影は次へボタンのみ。色はスタイル設定の各ボタン色で変更） |
| ボタン | 次へ / 確認ボタンを揺らして目立たせる | 2秒ごとにボタンが上下に小さく揺れます |
| ボタン | ボタンを横幅いっぱいにする | ボタンを横幅いっぱいに広げます |
| 吹き出し | 吹き出しの見た目 | 吹き出しの余白・角丸、しっぽの非表示 |
| レイアウト | プログレスバーの見た目 | バーの高さ・余白・背景色 |
| ヘッダー / フッター | ヘッダー / フッターコンテンツの見た目 | 余白・背景色・文字サイズ |
| フォーム | 入力欄の見た目 | 入力欄の枠線・角丸・高さ |
| フォーム | 入力中の欄を強調する | 入力中の欄に色付きの太枠を付けます |
| フォーム | 画像選択を横並びにする | 画像の選択肢を横スクロールではなく折り返して表示します |
| フォーム | チェックボックスを大きくする | 同意チェックなどを1.5倍に拡大します |
| フォーム | 必須フォームを赤枠で強調する | 対象フォームの「HTML class 属性」に required-form を入れると赤枠で表示します（入力欄・セレクト・テキストエリアのフォームが対象です。ラジオボタンとチェックボックスには効きません） |
| フォーム | パスワードチェックリストの見た目 | 達成時の丸の色・文字サイズ（入力前から表示したい場合は、末尾の .validation-checks.is-empty { から } までの3行の行頭の // を外します）。チェックリストのフォームを使う場合のみ有効です |
項目の操作と適用順
- 各項目は、スイッチで有効 / 無効を切り替えられます。無効にした項目は、削除しなくてもビルド・プレビューに反映されません。
- CSSは「スタイル設定 > CSS記述欄」の内容のあとに、CSS記述欄 (複数) の上から順に適用されます。同じ指定がある場合は、後（下）にある項目が優先されます。ただし、並び順が効くのはセレクタの強さが同じ場合です。自由CSSで書いた指定が効かないときは、セレクタの強さが足りていない可能性があります。ボタンや吹き出しは
#smart-dialog .layout-paddingから書き始める、入力欄はプリセット「入力欄の見た目」と同じ形のセレクタにする、入力中の枠の色が変わらないときは同じ指定にanimation: none;を加える、のように、同じ種類のプリセットの書き方を参考にしてください。 - 自由CSSは、
#smart-dialog { }の中に書くとチャット内にだけ適用されます。button { }のように書くと、LPの要素にも適用されるためご注意ください。 - 「＋」で追加した項目はリストの先頭に入ります。既存の項目より優先させたい場合は、「下へ」で並べ替えてください。
- 各項目は別々に処理されるため、ほかの項目で定義したSCSSの変数（
$xxx）は使えません。項目の中で完結するように書いてください。
編集内容を保存し、ビルドを実行するとLPのチャットに反映されます。反映前の見た目は、編集画面右側のプレビューで確認できます。
この記事の目次
このセクションの記事