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
このクラスを編集してもメッセージの文字揃えを変更することはできません。

モバイル外観