v4.8

リリース

申請ページに対して別途用意したCSSファイルを適用することでデザインを変更します。

この設定はLightning ExperienceとExperience Cloudサイトの両方に反映されます。また、帳票+入力フォームにも反映されます。

設定方法

デザインを変更するにはCSSファイルをzip化したものを静的リソースにアップロードする必要があります。

ここでは、ログイン申請画面（Lightning Experience）に限定して説明します。Experience Cloudサイト用のCSSファイルの作成についてはサイトデザインを変更するにはを参照してください。

■ ファイルの用意

静的リソースにアップロードするCSSファイルを用意します。ファイル名は必ず「customInputPage.css」としてください。

このCSSファイルをzip化したのち、zipファイルを静的リソースにアップロードします。zipファイル名は任意で構いません。

■ 静的リソースへのアップロード

設定から「静的リソース」と検索し、静的リソースの[新規]ボタンを押下します。

名前は任意で構いません。ファイルは先ほどzip化したファイルを選択します。

キャッシュコントロールは必ず公開にします。

■ 静的リソースにアップロードしたCSSの適用

静的リソースにアップロードしたファイルを参照するための設定を行います。

カミレスの「基本設定」タブの「汎用申請画面」を選択し、「サイトURL」と「CSSファイル名」の両方を設定をします。

・サイトURL

Experience CloudサイトにCSS適用させる場合に設定が必要です。Lightning Experienceにデザインを適用する場合はサイトURLが空のままで問題ありません。

Experience CloudのURLは以下の形式になっています。ここからサイトURLのみを入力して下さい。

｛サイトドメイン}/{サイトURL}/s

サイトドメイン：〇〇.my.site.com
サイトURL：エクスペリエンスクラウドサイト作成時に設定（空の場合もある）

URLはビルダー画面の歯車マークから全般をクリックすると、「公開済み状況」で確認することができます。

・ CSSファイル名

CSSファイル名は静的リソースの名前にしてください。

CSSの参考

■ 任意バッジの削除

.optionalBadge {
  display: none;
}

■ 対象項目ラベルを太字にする

.input_page_detail-field-label-simple {
  font-weight: bold;
}

■ セクションラベルの背景デザイン変更

.input_page_detail-section-header-simple {
  background-color: white !important;
  border-color: #0250d9;
  border-width: 5px;
  border-style: solid;
  color: inherit !important;
}

■ セクションの背景色変更と影削除

.slds-modal__content {
  background-color: #ffeecb !important;
  box-shadow: none !important;
}

留意事項

適用するCSSを変更したい場合は静的リソースで[編集]ボタンを押下し、変更後のCSSファイルをzip化したものを選択してください。
静的リソース作成時のファイル選択時に.cssファイルも選択しても正しく動作しません。必ずzipファイルを選択するようにしてください
適用するCSSによっては帳票＋入力フォームにもデザイン変更が反映されます。適用後は帳票＋入力フォームとシンプル入力フォームのどちらも確認するようにしてください。
複数のExperience Cloudサイトにデザイン変更を反映させることができません。その場合はカスタムCSSによるシンプル入力フォームのデザイン変更を参照して下さい。