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

カスタムテーマの作成、個別コンポーネントのスタイル設定、テーマでの Web フォントの使用について説明します。

これは、「最初のアダプティブフォームを作成する」シリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。

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

テーマを使用すると、アダプティブフォームに独自の外観やスタイルを設定できます。アダプティブフォームエディターの初期設定済みテーマを適用することも、独自のカスタムテーマを作成することもできます。AEM Forms はカスタムテーマを作成するためのテーマエディターを提供します。単一のテーマを使用すると、モバイル、タブレット、デスクトップで開いた同一のアダプティブフォームに異なる外観を設定できます。テーマエディターを使用する場合、CSS や LESS の予備知識は特に必要ありません。

このチュートリアルを終了すると、以下の操作を実行できるようになります。

  • 初期設定済みテーマをアダプティブフォームに適用する
  • テーマエディターを使用して、アダプティブフォームのテーマを作成する
  • 個別コンポーネントのスタイルを設定する
  • オプション:カスタムテーマに Web フォントを使用する

チュートリアルを完了すると、フォームの外観は以下のようになります。

カスタムテーマが使用されているフォーム

事前準備

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

ファイルを入手

ファイルを入手

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

アダプティブフォームエディターは多数の初期設定済みテーマを提供します。アダプティブフォームにカスタムスタイルを使用する場合は、初期設定済みテーマを使用してアダプティブフォームを発行することもできます。テーマはアダプティブフォームから独立しています。同一のテーマを複数のアダプティブフォームに適用できます。テーマをアダプティブフォームに適用するには、次の手順を実行します。

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

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

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

  3. アダプティブフォームのテーマ」フィールドでテーマを選択します(調査テーマ​など)。タップ aem_6_3_forms_save 選択したテーマを適用します。

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

図: デフォルトのテーマを持つアダプティブフォーム

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

図: 調査テーマを持つアダプティブフォーム

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

上記のデザインでは、既存のアダプティブフォームのプレースホルダーテキストとロゴを変更する必要があります。必要な変更を行うには、次の手順を実行します。

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

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

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

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

    3. 「アップロード」をタップし、logo.png を選択して、 aem_6_3_forms_save 変更を保存します。 画像が 事前準備 」セクションに入力します。

    4. ヘッダーテキストをタップします。 We.Retailをタップし、 aem_6_3_edit 編集. ヘッダーテキストを次に変更: we retail. 太字の適用先: wein we retail.

    we-retail-logo-text

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

    1. 「顧客 ID 」フィールドをタップし、をタップします。 cmppr プロパティ。
    2. タイトル」フィールドの内容を「プレースホルダーテキスト」フィールドにコピーします。
    3. コンテンツを削除 タイトル フィールドとタップ aem_6_3_forms_save.
    4. フォーム内のすべてのテキストボックス、数値ボックス、電子メールフィールドで、上記の 3 つの手順を繰り返します。

    updated-adaptive-form

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

テーマエディターを使用すると、カスタムテーマを作成できます。テーマエディターは非常に強力な WYSIWYG エディターです。視覚的に確認しながら、アダプティブフォームの各種コンポーネントに CSS を適用できます。アダプティブフォームのコンポーネントやパネルのスタイルを詳細にコントロールできます。

アダプティブフォームと同様、テーマは独立したエンティティです。アダプティブフォームのコンポーネントとパネルのスタイル(CSS)が含まれています。スタイルには背景色、状態色、透明度、配置、サイズなど、CSS プロパティが含まれています。テーマを適用すると、指定したスタイルがアダプティブフォームの対応するコンポーネントに適用されます。

このチュートリアルでは、ヘッダー、フッター、テキストコンポーネント、数値コンポーネント、添付ファイルコンポーネント、ボタンのスタイルを設定します。まずテーマを作成することから始めましょう。

テーマの作成

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

  2. 作成」をタップし、「テーマ」を選択します。テーマの作成が必要なフィールドが含まれた「テーマを作成」ページが表示されます。「タイトル」フィールドと「ドキュメント名」フィールドは必須です。

    • タイトル: テーマのタイトルを指定します。 (グローバルテーマ​など)。タイトルはテーマのリストから目的のテーマを見つけるのに役立ちます。
    • 名前: テーマの名前を指定します。 (グローバルテーマ​指定された名前のノードがリポジトリーに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。候補として入力された値は変更可能です。「ドキュメント名」フィールドには、英数字、ハイフン、アンダースコアのみを使用できます。無効な入力は、すべてハイフンに置き換えられます。
  3. 作成」をタップします。テーマが作成され、フォームを編集用に開くためのダイアログが表示されます。タップ 開く をクリックして、新しく作成したテーマを新しいタブで開きます。 テーマがテーマエディターで開きます。スタイルを設定する際、テーマエディターは AEM Forms に付属している初期設定済みアダプティブフォームを使用します。

    テーマエディターの UI の使用について詳しくは、 テーマエディターについて.

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

    カスタムテーマ

    図: shipping-address-add-update-form アダプティブフォームのテーマエディター

    create-a-theme

    図: デフォルトフォームを持つアダプティブフォーム

ヘッダーとフッターをアダプティブフォームで使用すると、独特な外観を作成できます。通常、ヘッダーには組織のロゴと名前が含まれ、フッターには著作権情報が含まれます。これらは組織の複数のフォーム間で統一されます。shipping-address-add-update-form アダプティブフォームのヘッダーとフッターのスタイルを設定するには、次の手順を実行します。

  1. セレクターパネルで​ヘッダーテキスト​オプションに移動します。セレクターパネルはテーマエディターの左側にあります。パネルが表示されない場合は、をタップします。 サイドパネルを切り替え サイドパネルを切り替えます。

  2. 次のプロパティを テキスト アコーディオンとタップ aem_6_3_forms_save.

    プロパティ
    フォントファミリー Arial
    フォントカラー FFFFFF
    フォントサイズ 54 px
  3. ヘッダーウィジェットをタップし、「ヘッダー」をタップします。ヘッダーウィジェットのスタイルを設定するオプションが左側に表示されます。を展開します。 Dimensionと位置 アコーディオン、 高さ から 120pxをタップし、 aem_6_3_forms_save.

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

    上にマウスポインターを置く 画像とグラデーション > +追加​をタップします。 画像. 次のプロパティを設定し、 aem_6_3_forms_save.

    プロパティ
    画像 header-style.png をアップロードします。画像が 事前準備 」セクションに入力します。
    位置 右下
    タイル 繰り返しなし
  5. テーマエディターで、ヘッダーのロゴをタップし、「ヘッダーロゴ」をタップします。「Dimensionと位置」アコーディオンを展開し、次のプロパティを設定して、をタップします。 aem_6_3_forms_save.

余白
余白
  • 上:1.5rem
  • 下:-35 px
  • 左:1rem

ヒント: フィールドごとに異なる値を設定するには、 リンクアイコンをタップします。

高さ 4.75rem
  1. フッターウィジェットをタップし、「フッター」をタップします。を展開します。 背景 アコーディオン、 背景色 から F6921Eをタップし、 aem_6_3_forms_save.

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

アダプティブフォームでは複数のコンポーネントを使用してデータを取得できます。例えば、テキストボックスと数値ボックスを使用できます。すべてのデータキャプチャコンポーネントと同じスタイルを指定するか、コンポーネントごとに別々のスタイルを指定することができます。 このチュートリアルでは、数値ボックス(顧客 ID、郵便番号)とテキストボックス(顧客 ID、名前、発送先住所、状態、電子メール)に同じスタイルを適用します。データ取得コンポーネントのスタイルを設定するには:

  1. 「顧客 ID」フィールドをタップし、「フィールドウィジェット」オプションをタップします。次のプロパティを設定し、 aem_6_3_forms_save.
アコーディオン プロパティ
境界線 境界線の色 A7A9AC
境界線 境界線の半径
  • 上:7 px
  • 右:7 px
  • 下:7 px
  • 左:7 px
テキスト フォントファミリー Arial
テキスト フォントカラー 939598
テキスト フォントサイズ 18 px
寸法と位置 60%
寸法と位置 余白
  • 左:10rem
  1. 「顧客 ID」フィールドの上部で空白領域をタップし、「レスポンシブパネルコンテナ」をタップします。背景背景色​を F1F2F2 に設定します。タップ aem_6_3_forms_save.

ボタンのスタイル設定

カスタムテーマを使用して、アダプティブフォームのすべてのボタンに同じスタイルを適用し、 インラインスタイル をクリックして、特定のボタンにスタイルを適用します。 ボタンのスタイルを設定するには、次の手順を実行します。

  1. 送信」ボタンをタップし、「ボタン」オプションをタップします。次のプロパティを設定し、 aem_6_3_forms_save.
アコーディオン プロパティ
背景 背景色 F6921E
境界線
境界線の色 F6921E
境界線 境界線の半径
  • 上:7 px
  • 右:7 px
  • 下:7 px
  • 左:7 px
テキスト
フォントファミリー Arial
テキスト フォントカラー FFFFFF
テキスト フォントサイズ 18 px
  1. アダプティブフォームにカスタムテーマを適用するか、グローバルテーマを適用します。スタイルがアダプティブフォームに反映されない場合は、ブラウザーのキャッシュを消去して、もう一度試してください。

    style-data-capture-components

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

一部のスタイルは特定のコンポーネントのみに適用されます。このようなコンポーネントのスタイルは、アダプティブフォームエディターで設定します。

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

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

    style-option

  3. 次をタップします。 添付 ボタンをクリックし、 aem_6_3_editアイコン 次のプロパティを Dimensionと位置 アコーディオン:

    プロパティ
    浮動小数 Left
    10%
  4. 次をタップします。 政府が承認した住所の配達確認 オプションを選択し、 aem_6_3_editアイコン 次のプロパティを設定します。

アコーディオン プロパティ
寸法と位置 浮動小数
寸法と位置 73%
寸法と位置 パディング
  • 左:10 px
寸法と位置 高さ 40 px
寸法と位置
余白
  • 右:2rem
  • 左:10rem
背景 背景色 FFFFFF
境界線 境界線の幅 1 px
境界線 境界線のスタイル 実線
境界線 境界線の色 A7A9AC
境界線 境界線の半径 7 px
テキスト フォントファミリー Arial
テキスト フォントカラー BCBEC0
テキスト フォントサイズ 18 px
テキスト 行の高さ 2
  1. 次をタップします。 送信 ボタンをクリックし、 aem_6_3_edit アイコン 次のプロパティを設定します。
アコーディオン プロパティ
寸法と位置 浮動小数 Right
寸法と位置 余白
  • 上:5rem
  • 右:14rem
  • 下:20 px
  • 左:20 px
背景 背景色 F6921E
境界線 境界線の色 F6921E

styled-adaptive-form-1

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

アダプティブフォームは各種フォントを使用してデザインできます。アダプティブフォームのデザインに使用するフォントが、アダプティブフォームを表示するデバイスに存在しない場合があります。Web フォントサービスを使用して、必要なフォントをターゲットデバイスに配信できます。

Adobe Typekit は Web フォントサービスです。アダプティブフォームでこのサービスを設定、使用できます。アダプティブフォームでAdobe Typekitを使用するには:

メモ

typekit-to-adobe-fonts Typekit は現在はAdobe Fontsと呼ばれ、Creative Cloudや他の購読に含まれています。 詳細情報を参照してください。

  1. の作成 Adobe Typekit アカウント、キットの作成、キットへのフォントMyriad Pro の追加、キットの公開、キット ID の取得を行います。 アダプティブフォームでAdobe Typekitフォント(Web フォント)を使用する必要があります。

  2. AEM Formsサーバーで、に移動します。 adobeexperiencemanager Adobe Experience Manager > ツール ハンマー > 導入 > Cloud Services. Cloud Servicesページで、に移動します。 サードパーティのサービス > Typekit​をクリックし、 設定 Typekit の下に表示されます。 設定が既に使用可能な場合は、「+」ボタンをクリックして新しいインスタンスを作成します。

    設定を作成ダイアログで、 タイトル 設定の場合は、「 」をクリックします。 作成. 設定ページにリダイレクトされます。表示される編集コンポーネントダイアログで、 キット ID をクリックし、 OK.

  3. TypeKit 設定を使用するようにテーマを設定します。オーサーインスタンスで、を開きます。 グローバルテーマ (テーマエディター)を使用します。 テーマエディターで、テーマオプション theme-options/設定に移動します。In Typekit 設定 「 」フィールドでキットを選択し、 保存.

    Typekit に追加されたフォントは、 テキスト アコーディオンを使用します。

このページ