# customCompletionPage.css

## 注意点

デザインをカスタマイズするには静的リソースのファイルをアップロードし、カスタムメタデータ型レコードを編集する必要があります。

まず、次のようなファイル名・フォルダ構成にし、zip化してsalesforce組織にアップロードして下さい。

    kamiless_custom(任意の名前)
                ┠ customCommonInputPage.css
                ┠ customInputPage.css
                ┗ customCompletionPage.css

> 💡NOTE
> 静的リソースのzipファイル名は好きな名前に変更することができます。ただし、後で設定するカスタムメタデータ型レコードに登録するCSS静的リソース名と一致している必要があります。

> 💡NOTE
> アップロードしたzipファイル名とカスタムメタデータ型レコードに登録した値が異なる場合、デフォルトのデザインが適用されます。

> ⚠️WARNING
> 静的リソースがない場合、デザインはデフォルトのものが表示されます。

次に、カスタムメタデータ型にある`Custom CSS`のレコード管理をクリックし、静的リソース名をクリックしてください。

最後に、編集ボタンを押し、CSS静的リソース名にアップロードしたファイル名を入力して保存してください。

## デフォルトデザイン

## 各部説明

本ファイル内では次のように各部分の名前を定義します。

## 表の見方

変数の説明に表を用いますが、表の各列についての説明は以下のとおりです。

列名 | 説明
--- | ---
変数名 | 静的リソース内で設定できる変数の名称
デフォルト値 | パッケージ内で設定されている各変数の値
説明 | 変数の説明

> 💡NOTE
> 静的リソース内で該当する変数を削除、またはコメントアウトした状態にすると、パッケージ内のデフォルト値がサイトに反映されます。

## カスタマイズについて

`:root`内の変数の値を変更する項目に関しては、それ以上のカスタマイズは行えません。
しかし、それ以外の項目に関しては、本ファイル内に示した例の他にもプロパティを設定することができます。また、適切なクラスやセレクタを用いることで、更にカスタマイズを行うことができます。

> 💡NOTE
> 入力画面と確認画面のデザインは共通になります。ただし、一部デザインは確認画面のみに反映ささせることができます。

## カスタマイズ項目説明

### プログレスインジケータ

> 🚫DO NOT
> プログレスインジケータのデザインを編集する時は、必ず`customCommonInputPage.css`と`customCompetionPage.css`の両方の該当の箇所を編集してください。

#### 文字

プログレスインジケータの文字のデザインを変更することができます。
変更するには、以下の二つを編集してください。

クラス | 説明
--- | ---
`.custom-active-text` | 活性化状態の文字を設定する
`.custom-inactive-text` | 非活性化状態の文字を設定する

設定例は以下のとおりです。

    .custom-active-text {
        font-size: 1.55rem;
        font-weight: bold;
        color: black;
    }
    .custom-inactive-text {
        font-size: 1.55rem;
        font-weight: bold;
        color: white;
    }

> ⚠️WARNING
> 文字サイズを変更することができますが、スマートフォンで閲覧した場合に見切れる可能性があります。
> 幅73.9mm(液晶サイズ6.4インチ)のスマートフォンで閲覧した場合、フォントサイズは1.55倍が限度になります。

#### インジケータ

プログレスインジケータの背景色を変更することができます。
変更するには、以下の二つを編集してください。

クラス | 説明
--- | ---
`.progress-event .custom-completion-active, .progress-event .custom-completion-active::before, .progress-event .custom-completion-active::after` | 活性化状態のデザインを設定する
`.progress-event .custom-completion-inactive, .progress-event .custom-completion-inactive::before, .progress-event .custom-completion-inactive::after` | 非活性化状態のデザインを設定する

設定例は以下のとおりです。

    .progress-event .custom-completion-active, .progress-event .custom-completion-active::before, .progress-event .custom-completion-active::after {
        background-color: green;
    }
    .progress-event .custom-completion-inactive, .progress-event .custom-completion-inactive::before, .progress-event .custom-completion-inactive::after {
        background-color: #a9e2a9;
    }

### 入力完了画面

入力完了画面のデザインを変更することができます。
変更するには、`completion-box`を編集してください。

変数 | デフォルト値 | 説明
--- | --- | ---
border | - | 入力完了画面の枠線を設定する
background | - | 入力完了画面の背景を設定する

設定例は以下のとおりです。

    .completion-box {
        border: 2px dashed red;
        background: pink;
    }

### 入力完了画面タイトル

入力完了画面のタイトルのデザインを変更することができます。
変更するには、`completion-title`を編集してください。

変数 | デフォルト値 | 説明
--- | --- | ---
color | - | タイトルの文字色を設定する
font-size | - | タイトルの文字の大きさを設定する
font-weight | - | タイトルの文字の太さを設定する

設定例は以下のとおりです。

    .completion-title {
        color: red;
        font-size: 2rem;
        font-weight: bold;
    }

### 入力完了画面メッセージ

入力完了画面のメッセージのデザインを変更することができます。
変更するには、

変数 | デフォルト値 | 説明
--- | --- | ---
color | - | メッセージの文字色を設定する
font-size | - | メッセージの文字の大きさを設定する
font-weight | - | メッセージの文字の太さを設定する

設定例は以下のとおりです。

    .completion-message {
        color: blue;
        font-size: 2rem;
        font-weight: bold;
    }

> ⚠️WARNING
> このクラスを編集してもメッセージの文字揃えを変更することはできません。

## モバイル外観