Show Menu
トピック×

アダプティブフォームのスタイル設定

カスタムテーマの作成、個別コンポーネントのスタイル設定、テーマでの Web フォントの使用について説明します。
これは、「 最初のアダプティブフォームを作成する 」シリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。

このチュートリアルについて

テーマを使用すると、アダプティブフォームに独自の外観やスタイルを設定できます。アダプティブフォームエディターの初期設定済みテーマを適用することも、独自のカスタムテーマを作成することもできます。AEM Forms はカスタムテーマを作成するための テーマエディター を提供します。単一のテーマを使用すると、モバイル、タブレット、デスクトップで開いた同一のアダプティブフォームに異なる外観を設定できます。テーマエディターを使用する場合、CSS や LESS の予備知識は特に必要ありません。
このチュートリアルを終了すると、以下の操作を実行できるようになります。
  • 初期設定済みテーマをアダプティブフォームに適用する
  • テーマエディターを使用して、アダプティブフォームのテーマを作成する
  • 個別コンポーネントのスタイルを設定する
  • オプション:カスタムテーマに Web フォントを使用する
チュートリアルを完了すると、フォームの外観は以下のようになります。

事前準備

以下に示すヘッダースタイルとロゴの画像をローカルマシンにダウンロードします。 shipping-address-add-update-form アダプティブフォームのヘッダーは、ヘッダースタイルとロゴの画像を使用します。ヘッダースタイルの画像はヘッダーの右側に表示されます。

手順 1:アダプティブフォームへのテーマの適用

アダプティブフォームエディターは多数の初期設定済みテーマを提供します。アダプティブフォームにカスタムスタイルを使用する場合は、初期設定済みテーマを使用してアダプティブフォームを発行することもできます。テーマはアダプティブフォームから独立しています。同一のテーマを複数のアダプティブフォームに適用できます。テーマをアダプティブフォームに適用するには、次の手順を実行します。
  1. アダプティブフォームを編集用に開きます。
  2. アダプティブフォームコンテナ ​のプロパティを開きます。プロパティブラウザーで、 基本 アダプティブフォームのテーマ ​に移動します。すべての初期設定済みテーマとカスタムテーマが、「 アダプティブフォームのテーマ 」フィールドに表示されます。デフォルトではキャンバステーマが適用されます。
  3. アダプティブフォームのテーマ 」フィールドでテーマを選択します( 調査テーマ ​など)。「 」をタップして、選択したテーマを適用します。
図: デフォル トテーマを持つアダプティブフォーム
図: アダプティブ フォームと調査テーマ

手順 2:アダプティブフォームの更新

上記のデザインでは、既存のアダプティブフォームのプレースホルダーテキストとロゴを変更する必要があります。必要な変更を行うには、次の手順を実行します。
  1. ヘッダーの既存のロゴとテキストを変更します。ロゴを削除するには、次の手順を実行します。
    1. フォームエディターでフォームを開きます。
    2. Tap logo image in the header component and tap properties. 画像のプロパティで X をタップし、既存のロゴの画像を削除します。
    3. Tap upload, select the logo.png, and tap to save the changes. The image was downloaded in the Before you start section.
    4. ヘッダーテキストを We.Retail タップし、 ​をタップします 。 Change header text to we retail . Apply bold formatting only to we in we retail .
  2. タイトルを削除してプレースホルダーテキストを追加します。
    1. Tap the Customer ID field and tap properties.
    2. タイトル 」フィールドの内容を「 プレースホルダーテキスト 」フィールドにコピーします。
    3. 「タイトル」フィールドの 内容を 削除し、「 」をタップします。
    4. フォーム内のすべてのテキストボックス、数値ボックス、電子メールフィールドで、上記の 3 つの手順を繰り返します。

手順 3:アダプティブフォームのカスタムテーマの作成

テーマエディター を使用すると、カスタムテーマを作成できます。テーマエディターは非常に強力な WYSIWYG エディターです。視覚的に確認しながら、アダプティブフォームの各種コンポーネントに CSS を適用できます。アダプティブフォームのコンポーネントやパネルのスタイルを詳細にコントロールできます。
アダプティブフォームと同様、テーマは独立したエンティティです。アダプティブフォームのコンポーネントとパネルのスタイル(CSS)が含まれています。スタイルには背景色、状態色、透明度、配置、サイズなど、CSS プロパティが含まれています。テーマを適用すると、指定したスタイルがアダプティブフォームの対応するコンポーネントに適用されます。
このチュートリアルでは、ヘッダー、フッター、テキストコンポーネント、数値コンポーネント、添付ファイルコンポーネント、ボタンのスタイルを設定します。まずテーマを作成することから始めましょう。

テーマを作成する

  1. Log in to the AEM author instance and navigate to Adobe Experience Manager > Forms > Themes . The default URL is http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes .
  2. 作成 」をタップし、「 テーマ 」を選択します。テーマの作成が必要なフィールドが含まれた「テーマを作成」ページが表示されます。「タイトル」と「ドキュメント名」の各フィールドは入力が必須です。
    • タイトル: テーマのタイトルを指定します。 ( グローバルテーマ ​など)。タイトルはテーマのリストから目的のテーマを見つけるのに役立ちます。
    • 名前: テーマの名前を指定します。 ( グローバルテーマ ​など)。指定された名前のノードがリポジトリに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。候補として入力された値は変更可能です。「ドキュメント名」フィールドには、英数字、ハイフン、アンダースコアのみを使用することができます。無効な入力はすべてハイフンに置き換えられます。
  3. 作成 」をタップします。テーマが作成され、フォームを編集用に開くためのダイアログが表示されます。Tap Open to open the newly created theme in a new tab. テーマがテーマエディターで開きます。スタイルを設定する際、テーマエディターは AEM Forms に付属している初期設定済みアダプティブフォームを使用します。
    For information about using theme editor UI, see About the theme editor .
  4. Tap Theme Options > Configure . In the Preview Form field, select the shipping-address-add-update-form adaptive form, tap , tap Save . テーマエディターで、デフォルトのアダプティブフォームではなく独自のアダプティブフォームを使用できるようになります。テーマエディターに戻るには、「 キャンセル 」をタップします。
    図: 配送先住 所 — 追加 — 更新 — フォームのアダプティブフォームを含むテーマエディター
    図: デフォル トフォームを含むアダプティブフォーム

データ取得コンポーネントのスタイル設定とアダプティブフォームの背景の適用

アダプティブフォームでは複数のコンポーネントを使用してデータを取得できます。例えば、テキストボックスと数値ボックスを使用できます。すべてのデータ取得コンポーネントと同じスタイルを指定するか、各コンポーネントに対して別々のスタイルを指定できます。 このチュートリアルでは、数値ボックス(顧客 ID、郵便番号)とテキストボックス(顧客 ID、名前、発送先住所、状態、電子メール)に同じスタイルを適用します。データ取得コンポーネントのスタイルを設定するには:
  1. 「顧客 ID」フィールドをタップし、「 フィールドウィジェット 」オプションをタップします。次のプロパティを設定し、
アコーディオン プロパティ
ボーダー 境界線の色 A7A9AC
ボーダー 境界線の半径
  • 上:7 px
  • 右:7 px
  • 下:7 px
  • 左:7 px
テキスト フォントファミリー Arial
テキスト フォントカラー 939598
テキスト フォントサイズ 18 px
寸法と位置 60%
寸法と位置 の余白
  • 左:10rem
  1. 「顧客 ID」フィールドの上部で空白領域をタップし、「 レスポンシブパネルコンテナ 」をタップします。 背景 背景色 ​を F1F2F2 に設定します。aem_6_3_forms_save

ボタンのスタイル設定

You can use a custom theme to apply an identical style to all the buttons of the adaptive form and inline styling to apply a style to a specific button. ボタンのスタイルを設定するには、次の手順を実行します。
  1. 送信 」ボタンをタップし、「 ボタン 」オプションをタップします。次のプロパティを設定し、
アコーディオン プロパティ
背景 背景色 F6921E
ボーダー 境界線の色 F6921E
ボーダー 境界線の半径
  • 上:7 px
  • 右:7 px
  • 下:7 px
  • 左:7 px
テキスト フォントファミリー Arial
テキスト フォントカラー FFFFFF
テキスト フォントサイズ 18 px
  1. アダプティブフォームに カスタムテーマを適用 するか、グローバルテーマを適用します。スタイルがアダプティブフォームに反映されない場合は、ブラウザーのキャッシュを消去してから、もう一度やり直してください。

手順 4:個別コンポーネントのスタイル設定

一部のスタイルは特定のコンポーネントのみに適用されます。このようなコンポーネントのスタイルは、アダプティブフォームエディターで設定します。
  1. アダプティブフォームを編集用に開きます。 http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
  2. 上部バーで「 スタイル 」オプションを選択します。
  3. Tap the Attach button and tap the icon. Set the following properties in the Dimensions and Position accordion:
    プロパティ
    浮動小数
    Left
    10%
  4. Tap the Government approved address proof option and tap the icon. 次のプロパティを設定します。
アコーディオン プロパティ
寸法と位置 浮動小数 Left
寸法と位置 73%
寸法と位置 パディング
  • 左:10 px
寸法と位置 高さ 40 px
寸法と位置 の余白
  • 右:2rem
  • 左:10rem
背景 背景色 FFFFFF
ボーダー 境界線の幅 1 px
ボーダー 境界線のスタイル 実線
ボーダー 境界線の色 A7A9AC
ボーダー 境界線の半径 7 px
テキスト フォントファミリー Arial
テキスト フォントカラー BCBEC0
テキスト フォントサイズ 18 px
テキスト 行の高さ 2
  1. Tap the Submit button and tap the icon. 次のプロパティを設定します。
アコーディオン プロパティ
寸法と位置 浮動小数 Right
寸法と位置 の余白
  • 上:5rem
  • 右:14rem
  • 下:20 px
  • 左:20 px
背景 背景色 F6921E
ボーダー 境界線の色 F6921E

手順 5:オプション:カスタムテーマでの Web フォントの使用

アダプティブフォームは各種フォントを使用してデザインできます。アダプティブフォームのデザインに使用するフォントが、アダプティブフォームを表示するデバイスに存在しない場合があります。Webフォントサービスを使用して、必要なフォントをデバイスにターゲットできます。
Adobe Typekit は Web フォントサービスです。アダプティブフォームでこのサービスを設定、使用できます。アダプティブフォームでAdobe Typekitを使用するには:
Typekitは、Adobe Fontsと呼ばれ、Creative Cloudやその他の購読に含まれています。 詳細情報 を参照してください。
  1. Create an Adobe Typekit account, create a kit, add font Myriad Pro to the kit, publish the kit, and obtain the Kit ID. アダプティブフォームでAdobe Typekitフォント(Webフォント)を使用する必要があります。
  2. In the AEM Forms server, navigate to Adobe Experience Manager > Tools > Deployment > Cloud Services . On the Cloud Services page, navigate to Third Party Services > Typekit , and click Configure Now under Typekit. 設定が既に使用可能な場合は、「+」ボタンをクリックして新しいインスタンスを作成します。
    On the Create Configuration dialog, specify a Title for the configuration, and click Create . 設定ページにリダイレクトされます、In the Edit Component dialog that appears, provide your Kit ID and click OK .
  3. TypeKit 設定を使用するようにテーマを設定します。On the author instance, open Global Theme in the theme editor. In the theme editor, navigate to Theme Options > Configure. In Typekit Configuration field, select the kit, and click Save .
    The fonts added to the Typekit are available for selection in the Text accordion of all the components.