アダプティブフォームのスタイル設定 do-not-publish-style-your-adaptive-form
カスタムテーマの作成、個別コンポーネントのスタイル設定、テーマでの web フォントの使用について説明します。
これは、最初のアダプティブフォームを作成するシリーズを構成するチュートリアルです。チュートリアル内のユースケースを理解して実際に操作できるように、このシリーズのチュートリアルを最初から順に学習することをお勧めします。
チュートリアルについて about-the-tutorial
テーマを使用すると、アダプティブフォームに独自のアピアランスやスタイルを設定できます。アダプティブフォームエディター標準のテーマを適用することも、独自のカスタムテーマを作成することもできます。AEM Forms はカスタムテーマを作成するためのテーマエディターを提供します。単一のテーマで、モバイル、タブレット、デスクトップで開いた同一のアダプティブフォームに異なるアピアランスを設定できます。テーマエディターを使用する場合、CSS や LESS の予備知識は特に必要ありません。
このチュートリアルを終了すると、以下の操作を実行できるようになります。
- 標準のテーマをアダプティブフォームに適用
- テーマエディターを使用して、アダプティブフォームのテーマを作成
- 個別コンポーネントのスタイル設定
- ボーナスセクション:カスタムテーマに web フォントを使用
チュートリアルを完了すると、フォームのアピアランスは以下のようになります。
事前準備 before-you-start
以下に示すヘッダースタイルとロゴの画像をローカルマシンにダウンロードします。shipping-address-add-update-form
アダプティブフォームのヘッダーは、ヘッダースタイルとロゴの画像を使用します。ヘッダースタイルの画像はヘッダーの右側に表示されます。
手順 1:アダプティブフォームへのテーマの適用 step-apply-a-theme-to-your-adaptive-form
アダプティブフォームエディターには、すぐに使用できる複数のテーマが用意されています。アダプティブフォームにカスタムスタイルを使用しない場合は、標準のテーマを使用してアダプティブフォームを公開することもできます。テーマはアダプティブフォームから独立しています。同一のテーマを複数のアダプティブフォームに適用できます。
テーマをアダプティブフォームに適用するには、次の手順を実行します。
-
アダプティブフォームを編集用に開きます。
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
-
アダプティブフォームコンテナ のプロパティを開きます。プロパティブラウザーで、基本/アダプティブフォームのテーマ に移動します。すべての初期設定済みテーマとカスタムテーマが、「アダプティブフォームのテーマ」フィールドに表示されます。デフォルトではキャンバステーマが適用されます。
-
「アダプティブフォームのテーマ」フィールドでテーマを選択します(調査のテーマ など)。選択 選択したテーマを適用できます。
図: デフォルトのテーマを使用したアダプティブフォーム
図: 調査テーマを使用したアダプティブフォーム
手順 2:アダプティブフォームの更新 step-update-your-adaptive-form
上記のデザインでは、既存のアダプティブフォームのプレースホルダーテキストとロゴを変更する必要があります。
アダプティブフォームを更新するには、次の手順を実行します。
-
既存のヘッダーのロゴとテキストを変更します。ロゴを削除するには、次の手順を実行します。
-
フォームエディターでフォームを開きます。
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
-
でロゴイメージを選択 ヘッダー コンポーネントと選択 プロパティ. Adobe Analytics の 画像 プロパティの上にマウスポインターを置き、「X」を選択して既存のロゴイメージを削除します。
-
選択 アップロード、logo.png を選択し、「 をクリックして変更を保存します。 この画像は「事前準備」セクションでダウンロードした画像です。
-
ヘッダーテキストを選択します。
We.Retail
をクリックし、次を選択します。 編集. ヘッダーテキストをwe retail
に変更します。太字書式をwe retail
のwe
にのみ適用します。
-
-
タイトルを削除してプレースホルダーテキストを追加します。
-
「顧客 ID 」フィールドを選択し、「 」を選択します。 プロパティ。
-
「タイトル」フィールドの内容を「プレースホルダーテキスト」フィールドにコピーします。
-
コンテンツを削除する タイトル 「 」フィールドで「 」を選択します。 .
-
フォーム内のすべてのテキストボックス、数値ボックス、メールフィールドで、上記の 3 つの手順を繰り返します。
-
手順 3:アダプティブフォームのカスタムテーマの作成 step-create-a-custom-theme-for-your-adaptive-form
テーマエディターを使用すると、カスタムテーマを作成できます。テーマエディターは非常に強力な WYSIWYG エディターです。視覚的に確認しながら、アダプティブフォームの各種コンポーネントに CSS を適用できます。アダプティブフォームのコンポーネントやパネルのスタイルを詳細に制御できます。
アダプティブフォームと同様、テーマは独立したエンティティです。アダプティブフォームのコンポーネントとパネルのスタイル(CSS)が含まれています。スタイルには背景色、状態色、透明度、配置、サイズなどの、CSS プロパティが含まれています。テーマを適用すると、指定したスタイルがアダプティブフォームの対応コンポーネントに適用されます。
このチュートリアルでは、ヘッダー、フッター、テキストコンポーネント、数値コンポーネント、添付ファイルコンポーネント、ボタンのスタイルを設定します。まずテーマを作成することから始めましょう
テーマの作成 create-a-theme
-
AEM オーサーインスタンスにログインして、Adobe Experience Manager/Forms/テーマ に移動します。デフォルトの URL は http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes です。
-
選択 作成 を選択し、 テーマ. テーマの作成が必要なフィールドを含む「テーマを作成」ページが表示されます。「タイトル」フィールドと「名前」フィールドは入力必須です。
- タイトル: テーマのタイトルを指定します。(グローバルテーマ など)。タイトルはテーマのリストから目的のテーマを見つけるのに役立ちます
- 名前: テーマの名前を指定します。(グローバルテーマなど)。 指定された名前のノードがリポジトリーに作成されます。タイトルを入力し始めると、名前フィールドの値が自動的に生成されます。候補として入力された値は変更可能です。「ドキュメント名」フィールドには、英数字、ハイフン、アンダースコアのみを使用できます。無効な入力は、すべてハイフンに置き換えられます。
-
「作成」を選択します。テーマが作成され、フォームを編集用に開くためのダイアログが表示されます。選択 開く をクリックして、新しく作成したテーマを新しいタブで開きます。 テーマエディターでテーマが開きます。テーマエディターでは、スタイル設定に AEM に付属している標準提供のアダプティブフォームを使用します。Forms
テーマエディター UI の使用について詳しくは、テーマエディターについてを参照してください。
-
選択 テーマオプション > 設定. Adobe Analytics の フォームをプレビュー フィールドで、 shipping-address-add-update-form アダプティブフォーム、「 」を選択します。 を選択します。 保存. テーマエディターで、デフォルトのアダプティブフォームではなく独自のアダプティブフォームを使用できるようになります。選択 キャンセル をクリックして、テーマエディターに戻ります。
図: shipping-address-add-update-form アダプティブフォームを使用したテーマエディター
図: デフォルトのフォームを使用したアダプティブフォーム
ヘッダーとフッターのスタイル設定 style-header-and-footer
アダプティブフォームでは、ヘッダーとフッターを使用して一貫性のある外観を独自に作成できます。通常、ヘッダーには組織のロゴと名前が含まれ、フッターには著作権情報が含まれます。これらは組織の複数のフォーム間で統一されます。shipping-address-add-update-form アダプティブフォームのヘッダーとフッターのスタイルを設定するには、次の手順を実行します。
-
セレクターパネルで ヘッダー/テキスト オプションに移動します。セレクターパネルはテーマエディターの左側にあります。パネルが表示されない場合は、「 サイドパネルを切り替えます。
-
次のプロパティを テキスト アコーディオンと選択 .
table 0-row-2 1-row-2 2-row-2 3-row-2 プロパティ 値 フォントファミリー Arial® フォントカラー FFFFFF フォントサイズ 54 px -
を選択します。 ヘッダー ウィジェットと選択 ヘッダー. ヘッダーウィジェットのスタイルを設定するオプションが左側に表示されます。を展開します。 Dimensionと位置 アコーディオン、 高さ から
120px
をクリックし、次を選択します。 . -
ヘッダーウィジェットの「背景」アコーディオンを展開し、「背景色」を「
F6921E.
」に設定します。カーソルを合わせる 画像とグラデーション > +追加 を選択します。 画像. 次のプロパティを設定し、「 」を選択します。 .
table 0-row-2 1-row-2 2-row-2 3-row-2 プロパティ 値 画像 header-style.png をアップロードします。この画像は「事前準備」セクションでダウンロードした画像です。 位置 右下 タイリング 繰り返しなし -
テーマエディターで、ヘッダーのロゴを選択し、「 」をクリックします。 ヘッダーロゴ. 「Dimensionと位置」アコーディオンを展開し、次のプロパティを設定して、「 」を選択します。 .
table 0-row-2 1-row-2 2-row-2 html-authored no-header 余白 値 余白 - 上:1.5 rem
- 下:-35 px
- 左:1rem
ヒント: を選択します。 リンクアイコンを使用して、各フィールドに異なる値を指定します。
高さ 4.75 rem -
フッターウィジェットを選択し、「 」を選択します。 フッター. を展開します。 背景 アコーディオン、 背景色 から
F6921E
をクリックし、次を選択します。 .
データ取得コンポーネントのスタイル設定とアダプティブフォームの背景の適用 style-the-data-capture-component-and-apply-a-background-to-the-adaptive-form
アダプティブフォームでは複数のコンポーネントを使用してデータを取得できます。例えば、テキストボックスや数値ボックスなどです。すべてのデータ取得コンポーネントに同じスタイルを設定することも、コンポーネントごとに異なるスタイルを設定することもできます。このチュートリアルでは、数値ボックス(顧客 ID、郵便番号)とテキストボックス(顧客 ID、名前、発送先住所、状態、メール)に同じスタイルを適用します。データ取得コンポーネントのスタイルを設定するには、次の手順を実行します。
-
を選択します。 顧客 ID フィールドに値を入力し、 フィールドウィジェット オプション。 次のプロパティを設定し、「 」を選択します。 .
table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 html-authored no-header アコーディオン プロパティ 値 境界線 境界線の色 A7A9AC 境界線 境界線の半径 - 上:7 px
- 右:7 px
- 下:7 px
- 左:7 px
テキスト フォントファミリー Arial® テキスト フォントカラー 939598 テキスト フォントサイズ 18 px 寸法と位置 幅 60% 寸法と位置 余白 - 左:10 rem
-
上の空の領域を選択 顧客 ID 「 」フィールドで「 」を選択します。 レスポンシブパネルコンテナ. 背景/背景色 を F1F2F2 に設定します。選択 .
ボタンのスタイル設定 style-the-buttons
カスタムテーマを使用すると、アダプティブフォームのすべてのボタンに同じスタイルを適用することも、特定のボタンにインラインスタイル設定を適用することもできます。ボタンのスタイルを設定するには、次の手順を実行します。
-
を選択します。 送信 ボタンをクリックし、 ボタン オプション。 次のプロパティを設定し、「 」を選択します。 .
table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 html-authored no-header アコーディオン プロパティ 値 背景 背景色 F6921E 境界線 境界線の色 F6921E 境界線 境界線の半径 - 上:7 px
- 右:7 px
- 下:7 px
- 左:7 px
テキスト フォントファミリー Arial® テキスト フォントカラー FFFFFF テキスト フォントサイズ 18 px -
アダプティブフォームにカスタムテーマを適用するか、グローバルテーマを適用します。スタイルがアダプティブフォームに反映されない場合は、ブラウザーのキャッシュを削除した後、もう一度実行してください。
手順 4:個別コンポーネントのスタイル設定 step-style-individual-components
一部のスタイルは特定のコンポーネントのみに適用されます。このようなコンポーネントのスタイルは、アダプティブフォームエディターで設定します。
-
アダプティブフォームを編集用に開きます。http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
-
上部バーで「スタイル」オプションを選択します。
-
を選択します。 添付 ボタンをクリックし、 アイコン。 「寸法と位置」アコーディオンで以下のプロパティを設定します。
table 0-row-2 1-row-2 2-row-2 プロパティ 値 浮動小数点数 左 幅 10% -
を選択します。 政府が承認した住所の配達確認 オプションを選択し、 アイコン。 次のプロパティを設定します。
table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 9-row-3 10-row-3 11-row-3 12-row-3 13-row-3 14-row-3 html-authored no-header アコーディオン プロパティ 値 寸法と位置 浮動小数点数 左 寸法と位置 幅 73% 寸法と位置 パディング - 左:10 px
寸法と位置 高さ 40 px 寸法と位置 余白 - 右:2 rem
- 左:10 rem
背景 背景色 FFFFFF 境界線 境界線の幅 1 px 境界線 境界線のスタイル 実線 境界線 境界線の色 A7A9AC 境界線 境界線の半径 7 px テキスト フォントファミリー Arial® テキスト フォントカラー BCBEC0 テキスト フォントサイズ 18 px テキスト 行の高さ 2 -
を選択します。 送信 ボタンをクリックし、 アイコン。 次のプロパティを設定します。
table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 html-authored no-header アコーディオン プロパティ 値 寸法と位置 浮動小数点数 右 寸法と位置 余白 - 上:5 rem
- 右:14 rem
- 下:20 px
- 左:20 px
背景 背景色 F6921E 境界線 境界線の色 F6921E
手順 5:オプション:カスタムテーマでの web フォントの使用 step-bonus-section-using-web-fonts-in-a-custom-theme
アダプティブフォームは各種フォントを使用してデザインできます。アダプティブフォームのデザインに使用するフォントが、アダプティブフォームを表示するデバイスに存在しない場合があります。Web フォントサービスを使用すると、必要なフォントを目的のデバイスで使用できます。
Adobe Fonts は web フォントサービスです。アダプティブフォームでこのサービスを設定、使用できます。Adobe Fonts をアダプティブフォームで使用するには:
- 次を参照: Adobeフォントのライブラリ フォームのスタイルを設定するフォントを選択します。
-
</> ボタンをクリックして、目的のフォントが見つかった場合に備えて、Web プロジェクトにファミリを追加します。
Web プロジェクトにフォントを追加ダイアログ画面が表示されます。
note note NOTE フォントを 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 を貼り付けます。
-
変更を保存します。
付属のフォントは、次のカスタムフォントクライアントライブラリを通じてアダプティブフォームからアクセスできるようになりました。