customInputPage.css
注意点
デザインをカスタマイズするには静的リソースのファイルをアップロードし、カスタムメタデータ型レコードを編集する必要があります。
まず、次のようなファイル名・フォルダ構成にし、zip化してsalesforce組織にアップロードして下さい。
kamiless_custom(任意の名前)
┠ customCommonInputPage.css
┠ customInputPage.css
┗ customCompletionPage.css
💡NOTE
静的リソースのzipファイル名は好きな名前に変更することができます。ただし、後で設定するカスタムメタデータ型レコードに登録するCSS静的リソース名と一致している必要があります。
💡NOTE
アップロードしたzipファイル名とカスタムメタデータ型レコードに登録した値が異なる場合、デフォルトのデザインが適用されます。
⚠️WARNING
静的リソースがない場合、デザインはデフォルトのものが表示されます。
次に、カスタムメタデータ型にあるCustom CSSのレコード管理をクリックし、静的リソース名をクリックしてください。
最後に、編集ボタンを押し、CSS静的リソース名にアップロードしたファイル名を入力して保存してください。
デフォルトデザイン
何も設定しない場合、次のようなデザインになります。
各部説明
本ファイル内では次のように各部分の名前を定義します。
表の見方
変数の説明に表を用いますが、表の各列についての説明は以下のとおりです。
| 列名 | 説明 |
|---|---|
| 変数名 | 静的リソース内で設定できる変数の名称 |
| デフォルト値 | パッケージ内で設定されている各変数の値 |
| 説明 | 変数の説明 |
💡NOTE
静的リソース内で該当する変数を削除、またはコメントアウトした状態にすると、パッケージ内のデフォルト値がサイトに反映されます。
カスタマイズについて
:root内の変数の値を変更する項目に関しては、それ以上のカスタマイズは行えません。
しかし、それ以外の項目に関しては、本ファイル内に示した例の他にもプロパティを設定することができます。また、適切なクラスやセレクタを用いることで、更にカスタマイズを行うことができます。
カスタマイズ項目説明
タイトル
フォームレイアウト名
フォームレイアウト名の大きさを変更することができます。
変更するには、.inputPage-header-designを編集してください。
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| transform-origin | - | フォームレイアウト名の変形の原点を設定する |
| transform | - | フォームレイアウト名の変形を設定する |
| margin-bottom | - | フォームレイアウト名の下側のマージンを設定する |
設定例は以下の通りです。
.inputPage-header-design { transform-origin: 0; transform: scale(1.5); margin-bottom: 20px; }
⚠️WARNING
transformプロパティは原点を中心に図形を変形させるプロパティです。そのため、適切なマージンを指定しない場合、フォームレイアウト名と補足説明が重なり合うことがあります。必ず適切なマージンを指定してください。
🚫DO NOT
transformプロパティはtransform-originプロパティを原点に図形を変形します。もし、transform-originプロパティの指定がない場合、図形の中心を中心として変形されます。そのため、フォームレイアウト名がタイトルの枠を超えることがあります。
transform-origin: 0;と設定せずにtransformプロパティを用いないでください。
セクションヘッダー
背景色と枠線の色
セクションヘッダーの背景色と枠線の色を変更することができます。
変更するには、:root内の変数を編集してください。
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| --inputPage-input_value-part_div-selected-border-color | #0000ff | セクションヘッダーの枠線の色を設定する |
| --inputPage-input_value-part_div-selected-background-color | #99ccff | セクションヘッダーの背景色を設定する |
設定例は以下の通りです。
--inputPage-input_value-part_div-selected-border-color: red; --inputPage-input_value-part_div-selected-background-color: red;
セクション詳細
項目欄名
項目欄名のデザインを変更することができます。
変更するには、.inputPage-fieldを編集してください。
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| font-size | - | 項目欄名のフォントサイズを設定する |
設定例は以下の通りです。
.inputPage-field { font-size: 2rem; }
入力テキスト
入力されたテキストのデザインを変更することができます。
変更するには、.inputPage-text-design inputを編集してください。
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| font-size | - | 入力されたテキストの大きさを設定する |
| font-weight | - | 入力されたテキストの太さを設定する |
設定例は以下の通りです。
.inputPage-text-design input { font-size: 2rem; font-weight: 500; }
⚠️WARNING
入力欄に半角英数字が入力されることが想定される場合、font-weightプロパティは最低500またはnormalにしてください。500未満またはlighterを指定した場合、半角英数字の文字が掠れているように見えます。
(例)font-weightプロパティを100にした時の見た目
プレースホルダー
プレースホルダーのデザインを変更することができます。
変更するには、.inputPage-text-design ::placeholderを編集してください。
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| color | - | プレースホルダーの文字色を設定する |
設定例は以下の通りです。
.inputPage-text-design ::placeholder { color: #bbb9b9; }
選択リスト
選択リストのデザインを変更することができます。
変更するには、.inputPage-combobox-design .slds-combobox__inputを編集してください。
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| font-size | - | 選択リストのフォントサイズを設定する |
設定例は以下の通りです。
.inputPage-combobox-design .slds-combobox__input { font-size: 2rem; }
💡NOTE
これで変更できるのは選択リストのデザインのみで、選択リストからプルダウンして表示されるメニューには適用されません。
チェックボックス
チェックボックスのデザインを変更することができます。
変更するには、
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| transform-origin | - | チェックボックスの変形の原点を設定する |
| transform | - | チェックボックスの変形を設定する |
| margin | - | チェックボックスのマージンを設定する |
| --slds-c-checkbox-shadow-focus | - | チェックボックスがフォーカス時の影の設定をする |
| --slds-c-checkbox-color-background | - | チェックボックスの背景色を設定する |
| --slds-c-checkbox-color-background-checked | - | チェックボックスのチェック時の背景色を設定する |
| --slds-c-checkbox-color-border | - | チェックボックスの枠線の色を設定する |
| --slds-c-checkbox-color-border-checked | - | チェックボックスがチェック時の枠線の色を設定する |
| --slds-c-checkbox-color-border-focus | - | チェックボックスがフォーカス時の枠線の色を設定する |
| --slds-c-checkbox-mark-color-foreground | - | チェックボックスのチェックマークの色 |
設定例は以下の通りです。
.inputPage-ckeckbox-design { margin: 10px 0 10px 0; transform-origin: 0; transform: scale(1.5); --slds-c-checkbox-shadow-focus: 10px 5px 5px black; --slds-c-checkbox-color-background: orange; --slds-c-checkbox-color-background-checked: red; --slds-c-checkbox-color-border: blue; --slds-c-checkbox-color-border-checked: aqua; --slds-c-checkbox-color-border-focus: green; --slds-c-checkbox-mark-color-foreground: black; }
⚠️WARNING
transformプロパティは原点を中心に図形を変形させるプロパティです。そのため、適切なマージンを指定しない場合、チェックボックスが重なり合うことがあります。必ず適切なマージンを指定してください。
🚫DO NOT
transformプロパティはtransform-originプロパティを原点に図形を変形します。もし、transform-originプロパティの指定がない場合、図形の中心を中心として変形されます。そのため、チェックボックスがフォームの枠を超えることがあります。
transform-origin: 0;と設定せずにtransformプロパティを用いないでください。
ラジオボタン
ラジオボタングループ
ラジオボタンのデザインを変更することができます。
変更するには、.inputPage-radio-designを編集してください。
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| transform-origin | - | ラジオボタンの変形の原点を設定する |
| transform | - | ラジオボタンの変形を設定する |
| margin | - | ラジオボタンのマージンを設定する |
| --slds-c-radio-shadow-focus | - | ラジオボタンがフォーカス時の影を設定する |
| --slds-c-radio-color-background | - | ラジオボタンの背景色を設定する |
| --slds-c-radio-color-background-checked | - | ラジオボタンがチェック時の背景色を設定する |
| --slds-c-radio-color-border | - | ラジオボタンの枠線の色を設定する |
| --slds-c-radio-color-border-checked | - | ラジオボタンがチェック時の枠線の色を設定する |
| --slds-c-radio-color-border-focus | - | ラジオボタンがフォーカス時の枠線の色を設定する |
| --slds-c-radio-mark-color-foreground | - | ラジオボタンのチェックマークの色を設定する |
上の図ではCSSを以下のようにしています。
.inputPage-radio-design { margin: 20px 0 25px 0; transform-origin: 0; transform: scale(1.5); --slds-c-radio-shadow-focus: 0 0 3px #ab00ef; --slds-c-radio-color-background: white; --slds-c-radio-color-background-checked: white; --slds-c-radio-color-border: blue; --slds-c-radio-color-border-checked: rgb(252, 0, 176); --slds-c-radio-color-border-focus: rgb(206, 63, 170); --slds-c-radio-mark-color-foreground: green; }
⚠️WARNING
transformプロパティは原点を中心に図形を変形させるプロパティです。そのため、適切なマージンを指定しない場合、項目欄名とラジオボタンが重なり合うことがあります。必ず適切なマージンを指定してください。
🚫DO NOT
transformプロパティはtransform-originプロパティを原点に図形を変形します。もし、transform-originプロパティの指定がない場合、図形の中心を中心として変形されます。そのため、ラジオボタンがフォームの枠を超えることがあります。
transform-origin: 0;と設定せずにtransformプロパティを用いないでください。
ラジオボタン
ラジオボタンごとの間隔を変更することができます。
変更するには、.inputPage-radio-design .slds-radioを編集してください。
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| margin | - | ラジオボタンごとの間隔を設定する |
.inputPage-radio-design .slds-radio { margin: 2px 0; }
ファイルドロップゾーン
ファイルドロップゾーンのデザインを変更することができます。
変更するには、:root内の変数を編集してください。
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| --inputPage-file_drop_zone-background-color | - | ファイルドロップゾーンの背景色を設定する |
| --inputPage-file_drop_zone-border-width | - | ファイルドロップゾーンの枠線の太さを設定する |
| --inputPage-file_drop_zone-border-style | - | ファイルドロップゾーンの枠線のスタイルを設定する |
| --inputPage-file_drop_zone-border-color | - | ファイルドロップゾーンの枠線の色を設定する |
設定例は以下の通りです。
--inputPage-file_drop_zone-background-color: #f8aeae; --inputPage-file_drop_zone-border-width: 2px; --inputPage-file_drop_zone-border-style: dashed; --inputPage-file_drop_zone-border-color: blue;
外部リンクボタン
外部リンクボタンの大きさを変更
外部リンクボタンの大きさを変更する時は.inputPage-button-design .slds-buttonを編集してください。
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| transform-origin | - | 外部リンクボタンの変形の原点を設定する |
| transform | - | 外部リンクボタンのの変形を設定する |
| margin | - | 外部リンクボタンのマージンを設定する |
設定例は以下の通りです。
.inputPage-button-design .slds-button { transform: scale(1.5); transform-origin: 0; margin: 8px 50px 8px 0; }
⚠️WARNING
transformプロパティは原点を中心に図形を変形させるプロパティです。そのため、適切なマージンを指定しない場合、項目欄名やボタンのラベルと外部リンクボタンが重なり合うことがあります。必ず適切なマージンを指定してください。
🚫DO NOT
transformプロパティはtransform-originプロパティを原点に図形を変形します。もし、transform-originプロパティの指定がない場合、図形の中心を中心として変形されます。そのため、外部リンクボタンがフォームの枠を超えることがあります。
transform-origin: 0;と設定せずにtransformプロパティを用いないでください。
ボタンのラベル
ボタンのラベルのデザインを変更する時は.buttonExternalLink-Label-design編集してください。
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| font-size | - | ボタンのラベルのフォントサイズを設定する |
| color | - | ボタンのラベルのフォントの色を設定する |
設定例は以下の通りです。
.buttonExternalLink-Label-design { font-size: 1.5rem; color: blue; }
必須でない外部リンクボタンのデザイン
必須でない外部リンクボタンのデザインを変更する時は.input-design-button .slds-button_brandを編集してください。
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| --slds-c-button-brand-color-background | - | 外部リンクボタンの背景色を設定する |
| --slds-c-button-brand-color-background-active | - | 外部リンクボタンがアクティブ時の背景色を設定する |
| --slds-c-button-brand-color-background-hover | - | 外部リンクボタンがホバー時の背景色を設定する |
| --slds-c-button-brand-color-border | - | 外部リンクボタンの枠線の色を設定する |
| --slds-c-button-brand-color-border-hover | - | 外部リンクボタンがホバー時の枠線の色を設定する |
| --slds-c-button-brand-text-color | - | 外部リンクボタンのテキストの色を設定する |
| --slds-c-button-brand-text-color-active | - | 外部リンクボタンがアクティブ時のテキストの色を設定する |
| --slds-c-button-brand-text-color-hover | - | 外部リンクボタンがホバー時のテキストの色を設定する |
設定例は以下の通りです。
.input-design-button .slds-button_brand { --slds-c-button-brand-color-background: #ffa6009a; --slds-c-button-brand-color-background-active: #fdaa0f; --slds-c-button-brand-color-background-hover: #fdaa0f; --slds-c-button-brand-color-border: #ffa6009a; --slds-c-button-brand-color-border-hover: #fdaa0f; --slds-c-button-brand-text-color: #4f4ff38a; --slds-c-button-brand-text-color-active: #1b0470; --slds-c-button-brand-text-color-hover: #1b0470; }
必須な外部リンクボタンのデザイン
必須な外部リンクボタンのデザインを変更する時は.input-design-button .slds-button_destructiveを編集してください。
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| --slds-c-button-destructive-color-background | - | 外部リンクボタンの背景色を設定する |
| --slds-c-button-destructive-color-background-active | - | 外部リンクボタンがアクティブ時の背景色を設定する |
| --slds-c-button-destructive-color-background-hover | - | 外部リンクボタンがホバー時の背景色を設定する |
| --slds-c-button-destructive-color-border | - | 外部リンクボタンの枠線の色を設定する |
| --slds-c-button-destructive-color-border-active | - | 外部リンクボタンがアクティブ時の枠線の色を設定する |
| --slds-c-button-destructive-text-color | - | 外部リンクボタンのテキストの色を設定する |
| --slds-c-button-destructive-text-color-active | - | 外部リンクボタンがアクティブ時のテキストの色を設定する |
| --slds-c-button-text-color-hover | - | 外部リンクボタンがホバー時のテキストの色を設定する |
設定例は以下の通りです。
.inputPage-button-design .slds-button_destructive { --slds-c-button-destructive-color-background: gold; --slds-c-button-destructive-color-background-active: orange; --slds-c-button-destructive-color-background-hover: orange; --slds-c-button-destructive-color-border: gold; --slds-c-button-destructive-color-border-active: orange; --slds-c-button-destructive-text-color: red; --slds-c-button-destructive-text-color-active: #444444; --slds-c-button-text-color-hover: black; }
クリック後の外部リンクボタンのデザイン
クリック後の外部リンクボタンのデザインを変更するには.input-design-button .slds-button_neutralを編集してください。
| 変数 | デフォルト値 | 説明 |
|---|---|---|
| --slds-c-button-neutral-color-background | - | 外部リンクボタンの背景色を設定する |
| --slds-c-button-neutral-color-background-active | - | 外部リンクボタンがアクティブ時の背景色を設定する |
| --slds-c-button-neutral-color-background-hover | - | 外部リンクボタンがホバー時の背景色を設定する |
| --slds-c-button-neutral-color-border | - | 外部リンクボタンの枠線の色を設定する |
| --slds-c-button-neutral-color-border-active | - | 外部リンクボタンがアクティブ時の枠線の色を設定する |
| --slds-c-button-neutral-color-border-hover | - | 外部リンクボタンがホバー時の枠線の色を設定する |
| --slds-c-button-text-color | - | 外部リンクボタンのテキストの色を設定する |
| --slds-c-button-text-color-active | - | 外部リンクボタンがアクティブ時のテキストの色を設定する |
| --slds-c-button-text-color-hover | - | 外部リンクボタンがホバー時のテキストの色を設定する |
設定例は以下の通りです。
.input-design-button .slds-button_neutral { --slds-c-button-neutral-color-background: #e67a7a; --slds-c-button-neutral-color-background-active: #a52e2e; --slds-c-button-neutral-color-background-hover: #a52e2e; --slds-c-button-neutral-color-border: #e67a7a; --slds-c-button-neutral-color-border-active: #a52e2e; --slds-c-button-neutral-color-border-hover: #a52e2e; --slds-c-button-text-color: white; --slds-c-button-text-color-active: black; --slds-c-button-text-color-hover: black; }
💡NOTE
クリック後の外部リンクボタンデザインは、クリック前の外部リンクボタンが必須かそうでないかに依らず共通です。