ガイドコンテンツを追加および編集する

最終更新日:

ガイドの右上または左上の閉じる(X)ボタンを除き、ビルディングブロックを使用してオーバーレイガイドや埋め込みガイドにコンテンツを追加します。ガイドコンテンツの配置と編集には、フォーマットのオプションがいくつかあります。各ビルディングブロックの種類とそのフォーマットのオプションの詳細については、「ガイドビルディングブロック」を参照してください。

一貫性と効率性のために、次のことができます。

権限

ガイドにビルディングブロックを追加するには、次のいずれかの権限が必要です。

  • デフォルトのアプリレベルの役割権限が、ガイドコンテンツ編集者またはガイドコンテンツ作成者
  • ガイドを作成/編集するカスタムアプリレベルの役割
  • 管理者ユーザー権限。

詳細については、「役割と権限」を参照してください。

ガイドにビルディングブロックを追加する

新しい行を、行に列を追加することで、ガイド内のステップにビルディングブロックを追加できます。

ガイドにビルディングブロックを追加するには:

  1. ガイドの正しいステップにいることを確認します。ガイドのステップが表示されない場合は、ビジュアルデザインスタジオ(Visual Design Studio)のツールバーの[ステップを表示(View Steps)]タブを選択します。ここから、コンテンツを追加するステップにカーソルを合わせ、[ステップを編集(Edit step)]を選択します。

    Edit step.png
  2. ビルディングブロックを追加します。
    • ガイドにまだコンテンツがない場合は、ガイドの中央にカーソルを合わせ、[クリックしてコンテンツを追加(Click to Add Content)]を選択します。

      Click to Add Content.jpg
    • 既存のビルディングブロックの上または下にビルディングブロックを追加するには、追加する場所にカーソルを合わせ、表示される[行を追加(Add Row)]のプラス()アイコンを選択します。

      行2を追加.jpg
    • 既存のビルディングブロックの左または右にテキスト、ボタン、または画像のビルディングブロックを追加するには、ビルディングブロックの上にカーソルを合わせ、表示される[列を追加(Add Column)]のプラス()アイコンを選択します。ビルディングブロックの列の幅を編集することができます。

      Add column 2.jpg
  3. [ビルディングブロック(Building Blocks)]ウィンドウからコンテンツビルディングブロックを選択します。
  4. ビルディングブロックのコンテンツを編集します。各ビルディングブロックタイプで編集できる内容については、「ガイドビルディングブロック」を参照してください。

ヒント:MacではOptionキー、WindowsではAltキーを使用すると、現在のすべてのビルディングブロックとその境界ボックスが表示されます。

行に列を追加する

行には、ビルディングブロックを列として横に並べて追加できます。ガイドステップの行には、次の項目を含めることができます。

  • 最大4つのボタン。詳細については、「ガイドビルディングブロック」「ボタン」を参照してください。
  • テキスト、ボタン、画像のビルディングブロックのうち、いずれか2つの組み合わせ。例えば、タイトル(テキスト)の横にアイコン(画像)を配置したり、テキストを2列で配置することができます。

ここをクリック 2.png

行に列を追加するには、ガイド内の既存のビルディングブロックにカーソルを合わせ、表示される[列を追加(Add Column)]のプラス()アイコンを選択します。選択可能なビルディングブロック(テキストボタン画像)のいずれかを選択し、必要に応じてビルディングブロックを編集します。

カラム用ビルディングブロック.png

行を編集する

ガイドステップの行にカーソルを合わせると、[行を編集(Edit Row)]メニューが表示されます。

このメニューには、次のオプションがあります。

行を編集 このオプションを選択すると、行の背景色、間隔(パディングとマージン)、および列の水平方向と垂直方向の配置を編集できます。
行を複製 このオプションを選択すると、行の内容をコピーし、そのすぐ下の別の行に貼り付けることができます。その後、必要に応じてその行を編集できます。行のスタイル設定をコピーしたい場合に便利です。
行の配置 ガイドステップ内に複数のコンテンツ行がある場合は、矢印を使用してその行をガイドステップの上下に移動できます。これらの矢印は、ガイドステップ内に複数の行がある場合にのみ表示されます。

[行を編集(Edit Row)]ウィンドウでは、以下の項目を編集できます。

  • 背景色(Background Color):16進数、RGBA数値、またはビジュアルカラーのセレクターとスライダーを使用して、行の背景色とその透明度を設定します。
  • パディング(Padding):行のコンテンツとその行のコンテナとの間にスペースを追加したり、削除したりします。上下、左右のパディングを個別に編集できます。
  • マージン(Margins):行とガイドの端(ガイドコンテナ)または隣接する行との間のスペースを追加したり、削除したりします。上下、左右のマージンを個別に編集できます。
  • 水平方向:行のビルディングブロックを左揃え、中央揃え、右揃え、または均等など、積み重ねて配置します。
  • 垂直方向:同じ行にある、高さの異なるビルディングブロックを、上、中央、または下に揃えます。

BBEditRowMenu.png

ビルディングブロックを編集する

ガイドステップのビルディングブロックにカーソルを合わせると、次の[ビルディングブロックを編集(Edit Building Block)]メニューが表示されます。

メニューには次のオプションがあります。

EditRow.png ビルディングブロックを編集 ビルディングブロックの種類に関連するすべての編集オプションを含むウィンドウが開きます。ほとんどのビルディングブロックの場合、ビルディングブロックを選択するだけでこのウィンドウを開くことができます。
BBDelete.png ビルディングブロックを削除 ガイドステップからビルディングブロックを完全に削除します。ビルディングブロックを削除すると元に戻せません。この操作では確認ウィンドウは表示されません。
BBColumnPosition.png 列の配置 同じ行に複数のコンテンツ列がある場合は、矢印を使用してこれらの列の1つを行内で移動できます。これらの矢印は、1つの行に複数の列がある場合にのみ表示されます。

各ビルディングブロックの種類と編集方法については、「ガイドビルディングブロック」を参照してください。

閉じる(X)ボタンを追加および編集する

オーバーレイガイドと埋め込みガイドの両方について、ビジュアルデザインスタジオ(Visual Design Studio)内の[コンテナを編集(Edit Container)]ウィンドウの[スタイリング(Styling)]タブから閉じる(X)ボタンを追加または削除できます。手順については、「オーバーレイガイドのステップ設定を編集する」または「埋め込みガイドを作成する」を参照してください。

閉じるボタンをガイドに含めると、ビジュアルデザインスタジオ(Visual Design Studio)内でビルディングブロックを編集するのと同じように編集できます。ガイド内の閉じるボタンの場所から[X]アイコンを選択し、[閉じるボタンのスタイル(Close button style)]ドロップダウンメニューから[カスタム(Custom)]を選択して、以下を編集します。

  • 色(Color):閉じるボタンアイコンのデフォルトの色を、16進数、RGB数値、ビジュアルカラーのセレクターまたはスライダーで設定します。
  • カーソルを合わせた時の色(Hover Color):訪問者が閉じるボタンアイコンの上にマウスを置いたときの色を、16進数、RGB数値、ビジュアルカラーのセレクターまたはスライダーで設定します。
  • パディング(Padding):閉じるボタンアイコンとその境界線の間のスペースを設定します。上下、左右のパディングを個別に編集できます。
  • マージン(Margin):閉じるボタンアイコンの境界線と、ガイドステップの端に最も近いアイコンの両端との間のスペースを設定します。上下、左右のマージンを個別に編集できます。
  • アライメント(水平)。閉じるボタンアイコンがガイドステップの左側または右側に配置されているかどうか。

 

 

 

 

この記事は役に立ちましたか?
27人中10人がこの記事が役に立ったと言っています