アダプティブフォームのスタイル設定 do-not-publish-style-your-adaptive-form

アダプティブフォームを編集用に開きます。

http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

アダプティブフォームコンテナ ​のプロパティを開きます。プロパティブラウザーで、基本／アダプティブフォームのテーマ ​に移動します。すべての初期設定済みテーマとカスタムテーマが、「アダプティブフォームのテーマ」フィールドに表示されます。デフォルトではキャンバステーマが適用されます。

「アダプティブフォームのテーマ」フィールドでテーマを選択します（調査のテーマ ​など）。 を選択すると、選択したテーマを適用できます。

図： デフォルトのテーマを使用したアダプティブフォーム

図： 調査テーマを使用したアダプティブフォーム

既存のヘッダーのロゴとテキストを変更します。ロゴを削除するには、次の手順を実行します。

1. フォームエディターでフォームを開きます。

   http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

2. ヘッダーコンポーネントでロゴの画像を選択し、「 プロパティ」をタップします。画像のプロパティで X を選択し、既存のロゴの画像を削除します。

3. 「アップロード」を選択して、logo.png を選択し、 を選択して変更を保存します。この画像は事前準備の節でダウンロードした画像です。

4. ヘッダーテキスト We.Retail を選択してから、「 編集」を選択します。ヘッダーテキストを we retail に変更します。太字書式を we retail の we にのみ適用します。

   

タイトルを削除してプレースホルダーテキストを追加します。

1. 「顧客 ID」フィールドを選択し、「 プロパティ」を選択します。

2. 「タイトル」フィールドの内容を「プレースホルダーテキスト」フィールドにコピーします。

3. 「タイトル」フィールドのコンテンツを削除して、 を選択します。

4. フォーム内のすべてのテキストボックス、数値ボックス、メールフィールドで、上記の 3 つの手順を繰り返します。

   

AEM オーサーインスタンスにログインして、Adobe Experience Manager／Forms／テーマ ​に移動します。デフォルトの URL は http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes です。

「作成」を選択し、「テーマ」を選択します。テーマの作成が必要なフィールドを含む「テーマを作成」ページが表示されます。「タイトル」フィールドと「名前」フィールドは入力必須です。

• タイトル： ​テーマのタイトルを指定します。（グローバルテーマ ​など）。タイトルはテーマのリストから目的のテーマを見つけるのに役立ちます
• 名前： ​テーマの名前を指定します。（グローバルテーマなど）。 ​指定された名前のノードがリポジトリーに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。候補として入力された値は変更可能です。「ドキュメント名」フィールドには、英数字、ハイフン、アンダースコアのみを使用できます。無効な入力は、すべてハイフンに置き換えられます。

「作成」を選択します。テーマが作成され、フォームを編集用に開くためのダイアログが表示されます。「開く」を選択し、新規作成されたテーマを新しいタブで開きます。テーマエディターでテーマが開きます。テーマエディターでは、スタイル設定に AEM に付属している標準提供のアダプティブフォームを使用します。Forms

テーマエディター UI の使用について詳しくは、テーマエディターについてを参照してください。

テーマオプション ／設定 ​を選択します。「フォームのプレビュー」フィールドで shipping-address-add-update-form アダプティブフォームを選択し、「 」、「保存」の順に選択します。テーマエディターで、デフォルトのアダプティブフォームではなく独自のアダプティブフォームを使用できるようになります。テーマエディターに戻るには、「キャンセル」を選択します。

図： shipping-address-add-update-form アダプティブフォームを使用したテーマエディター

図： デフォルトのフォームを使用したアダプティブフォーム

セレクターパネルで​ ヘッダー／テキスト ​オプションに移動します。セレクターパネルはテーマエディターの左側にあります。パネルが表示されない場合は、「 」を選択します。

「テキスト」アコーディオンで以下のプロパティを設定し、「 」を選択します。

ヘッダーウィジェットを選択し、「ヘッダー」を選択します。ヘッダーウィジェットのスタイルを設定するオプションが左側に表示されます。「寸法と位置」アコーディオンを展開し、「高さ 」を 120px に設定して、「 」を選択します。

ヘッダーウィジェットの「背景」アコーディオンを展開し、「背景色」を「F6921E.」に設定します。

画像とグラデーション／+ 追加 ​にポインタを合わせ、「画像」を選択します。以下のプロパティを設定し、「 」を選択します。

テーマエディターで、ヘッダーのロゴを選択し、「ヘッダーロゴ」を選択します。「寸法と位置」アコーディオンを展開し、次のプロパティを設定して、「 」を選択します。

フッターウィジェットを選択し、「フッター」を選択します。背景 ​アコーディオンを展開し、「背景色」を F6921E に設定して、「 」を選択します。

「顧客 ID」フィールドを選択し、「フィールドウィジェット」オプションを選択します。次のプロパティを設定し、「 」を選択します。

「顧客 ID」フィールドの上部で空白領域を選択し、「レスポンシブパネルコンテナ」を選択します。背景／背景色 ​を F1F2F2 に設定します。「 」を選択します。

「送信」ボタンを選択し、「ボタン」オプションを選択します。次のプロパティを設定し、「 」を選択します。

アダプティブフォームにカスタムテーマを適用するか、グローバルテーマを適用します。スタイルがアダプティブフォームに反映されない場合は、ブラウザーのキャッシュを削除した後、もう一度実行してください。

アダプティブフォームを編集用に開きます。http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

上部バーで「スタイル」オプションを選択します。

「添付」ボタンを選択し、 アイコンを選択します。「寸法と位置」アコーディオンで以下のプロパティを設定します。

「政府が承認した住所の証明」オプションを選択し、 アイコンを選択します。次のプロパティを設定します。

「送信」ボタンを選択し、 アイコンを選択します。次のプロパティを設定します。

「</>」ボタンをクリックして、目的のフォントが見つかった場合に備えて、web プロジェクトにファミリを追加します。

Web プロジェクトにフォントを追加ダイアログ画面が表示されます。

Web プロジェクトに名前を付けます。

チェックボックスをオンにして、含めるフォントの太さとスタイルを選択します。

「クリック」を選択して、プロジェクトを作成します。

画面から埋め込みコードと URL をコピーします。

「完了」をクリックし、web プロジェクト ウィンドウを閉じます。

AEM インスタンスにログインし、URL http://server:port/crx/de/index.jsp# に移動します。

CRXDE でフォルダー構造（/apps/[fontslibrary]/[customlibrary(clientlibrary)] など）を作成します。

新しく作成した clientlibs フォルダーに移動し、allowProxy プロパティと categories プロパティを追加します。

/apps/[fontslibrary]/[customlibrary(clientlibrary)] に移動して、css フォルダーを作成します。

作成した CSS フォルダーに移動し、ファイルを作成します。例えば、ファイルを fonts.css として作成し、埋め込みコードを URL と共に貼り付けます。

変更を保存します。