レスポンシブオーサリングのスタイルの調整

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間：3分

    • さまざまなフォームファクターのレスポンシブオーサリングを使用してページを作成する際、スタイルオプションを変更して、小さいサイズでページの使いやすさを向上させる方法を説明します。

    始める前に

    必要なロール：ui_builder_admin

    このタスクについて

    ページの使いやすさを向上させる方法は、ブレークポイント間で異なるスタイルを使用してコンポーネントをカスタマイズすることです。スタイルの編集には多数のオプションがあります。この手順では、定型テキストコンポーネントの周囲の余白を編集し、テキストサイズを小さくして、小さいフォームファクターで使用するスペースを減らします。

    手順

    1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
    2. 作業するエクスペリエンスを開くか、または [作成] > [エクスペリエンス] を選択してエクスペリエンスを作成します。
      エクスペリエンスの作成の詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
    3. レスポンシブオーサリングでページを最初から作成します。
      ページを作成する方法の詳細については、「UI ビルダーでのページの作成」を参照してください。
    4. 上部にある [デスクトップレスポンシブオーサリング (desktop responsive authoring)] アイコンが選択されていることを確認します。
      エディタービューの UI ビルダーページの上部にある [デスクトップフォームファクター (desktop form factor)] アイコンを指す黒い矢印。
    5. ステージで、[+ コンテンツを追加] を選択します。
    6. [レイアウト] タブで、[単一列] を選択します。
    7. 定型テキストコンポーネントを追加します。
      1. ステージの列の中央にある [+] アイコンを選択します。
      2. [コンポーネント] タブで、[定型テキスト] コンポーネントを見つけて選択します。
      3. 構成パネルで、[なし - コンポーネントを手動構成します (None - Configure the component manually)] を選択します。
      4. 構成パネルの [構成] タブで、[テキスト] フィールドをダブルクリック (またはキーボードのショートカットを使用) して、デフォルトのテキストを選択します。
      5. Critical Operations Workspace Admin Center と入力して、デフォルトのテキストを置き換えます。

        [テキスト] フィールドを指す黒い矢印が表示された定型テキストコンポーネントの [構成] パネル。

      6. [保存] を選択します。
    8. 定型テキストコンポーネントの周囲にスペースを追加し、中央に配置します。
      1. コンテンツツリーで、[定型テキスト 1] を選択します。
      2. [構成] パネルで、[スタイル] タブを選択します。
      3. [間隔] で [余白] を選択します。
      4. リストで [大] を選択します。

        [余白] オプションと [L] サイズオプションを指す黒い矢印が表示された定型テキストコンポーネントの [構成] パネル。

      5. [配置 (Alignment)] で [中央 (center)] アイコンを選択します。

        [配置 (Alignment)] フィールドの [中央 (center)] アイコンを指す黒い矢印が表示された定型テキストコンポーネントの [構成] パネル。

      6. [保存] を選択します。
      ステージが自動的に更新され、定型テキストコンポーネントの周囲に余白が表示され、中央に配置されます。
    9. [タブレットフォームファクター (tablet form factor)] アイコンを選択します。

      エディタービューの UI ビルダーページの上部にある [タブレットフォームファクター (tablet form factor)] アイコンを指す黒い矢印。

      定型テキストコンポーネントの間隔と見出しのサイズは、タブレットサイズに合わせて適切に表示されます。

    10. [モバイルフォームファクター (mobile form factor)] アイコンを選択します。

      エディタービューの UI ビルダーページの上部にある [モバイルフォームファクター (mobile form factor)] アイコンを指す黒い矢印。

      定型テキストコンポーネントは、小さいサイズで垂直方向のスペースを多く使用します。

      定型テキストコンポーネントと H1 見出しサイズの周囲に大きな余白がある、[モバイルフォームファクター (mobile form factor)] に表示されるページ。

    11. 余分な余白スペースを削除し、モバイルフォームファクター専用のヘッダーを小さくします。
      1. コンテンツツリーで、[定型テキスト 1] を選択します。
      2. [構成] パネルで、[スタイル] タブを選択します。
      3. [間隔] で [余白] を選択します。
      4. リストで [0] を選択します。
      5. [構成] タブを選択します。
      6. [HTML] タブで [H3] を選択します。
      7. [保存] を選択します。
      ステージが自動的に更新され、定型テキストコンポーネントの使用スペースが小さくなったことが表示されます。

      定型テキストコンポーネントの周囲の余白がゼロで、見出しサイズが小さくなった、モバイルフォームファクターに表示されるページ。

    12. 上部にある [タブレットフォームファクター (tablet form factor)] アイコンと [デスクトップフォームファクター (desktop form factor)] アイコンを選択して、大きいフォームファクターに変更が加えられていないことを確認します。