Adobe Captivate でコンテンツブロックとコンポーネントに余白を追加する

サイズの調整：要素の周囲にさらにスペースが必要な場合、余白を追加したり増やしたりすることを検討してください。スペースを追加することでアクセシビリティを向上できるインタラクティブな要素の場合に特に便利です。
境界線の間隔：余白を設定することで、コンテンツとその境界線の間にスペースを追加できるため、ページ内にある他の要素との配列整えることができます。

このページのトピック：

コンテンツブロックの余白
コンポーネントレベルの余白
異なるコンポーネントの余白の例
自動レイアウト

コンテンツブロックの余白

境界線からコンテンツブロック全体に余白を追加し、異なる表示形式で挙動を確認します。

右側のツールバーから「ビジュアルプロパティ」を選択し、「整列と間隔」セクションを展開して、余白値を表示します。

コンテンツブロックの余白
「コンテンツ幅」スライダーを使用して、コンテンツブロックの水平方向の間隔を左側または右側から変更します。スライダーを使用して、希望する間隔のパーセンテージを指定します。幅を調整すると、余白の値が自動的に更新され、変更内容が反映されます。
「自動レイアウト」を有効にして、すべてのデバイスの表示形式で比率を保持したままコンテンツの幅を調整するか、無効にして手動で調整します。詳しくは、異なる表示形式に対応する自動レイアウトについて参照してください。

「自動レイアウト」を無効にする場合は、すべての辺の余白値を設定でき、表示形式のコンテンツの幅を個別に調整することが可能です。 1 つの表示形式のコンテンツ幅を追加しても、他の表示形式にはその変更内容が反映されません。

「自動レイアウト」が無効になっているタブレットビューのコンテンツブロックの余白

注意：

プロジェクトの幅が固定されるため、コンテンツブロックの水平方向の余白は、パーセンテージで設定されます。縦方向の余白は、長いスクロールコンテンツに対応するために、ピクセル単位で定義されます。

コンポーネントレベルの余白

画像、テキスト、インタラクティブ要素、カード、ウィジェットオブジェクトなど、コンテンツブロック内の各要素に余白を組み込みます。コンテンツブロック内のコンポーネントに余白を追加するには、以下の 2 つの方法があります。

均一な余白：4 辺すべてに同時に余白を追加します。

均一でない余白：余白を各辺に個別に追加します。デフォルトではこのオプションが選択されています。

以下に、テキストブロックの 4 辺すべてに 50 ピクセルの均一な余白を適用した例を示します。

コンポーネントのエッジにカーソルを合わせると、ピンク色のハンドルが表示され、ドラッグして間隔を調整できます。すべての辺に均一な余白を適用するには、Shift キーを押しながらハンドルをドラッグします。

異なるコンポーネントの余白の例

以下に、寸法が 1366 x 768 ピクセルのプロジェクトに含まれる、さまざまなコンポーネントの余白の例をいくつか示します。

任意のテキストブロックに余白を追加して、コンテンツとその境界線の間にスペースを作成します。テキストコンポーネント（タイトル、字幕、本文）ごとに、ピンク色のハンドルを使用してキャンバスに直接ドラッグし、余白を追加します。または、テキストコンポーネントを選択し、「ビジュアルプロパティ」の「整列と間隔」セクションに余白の値を入力します。

この例は、本文コンポーネント内の複数列のテキストブロックに余白を追加する（具体的には下部に 100 ピクセルの余白を適用する）方法を示しています。

画像を選択し、画像の境界線の近くにあるピンク色のハンドルをドラッグします。または、「ビジュアルプロパティ」メニューの「整列と間隔」セクションに余白の値を入力することもできます。

この例では、画像コンテナの境界線から 60 ピクセルの下部の余白を示しています。

ウィジェット、カード、文字、質問スライドの画像など、画像グリッド内にある画像に余白を追加しますが、背景画像に余白を追加することはできません。

これは、インタラクティブなボタンコンポーネント内に余白を追加する例です。ボタンコンポーネントを追加し、そのコンテンツブロック内のボタンを選択します。ピンク色のハンドルを使用してドラッグして間隔を追加するか、「整列と間隔」セクションに余白の値を入力します。

注意：

「ラジオグループ」および「ドロップダウン」のインタラクティブコンポーネントは、余白をサポートしていません。

見出しのテキスト、字幕、画像、カード、アイコンなど、ウィジェット内の任意のコンポーネントに余白を追加します。この例のフリップカードウィジェットでは、ウィジェット内の任意のコンポーネントを選択し、ピンク色のハンドルを使用して余白を調整できます。

または、コンポーネントを選択して、「ビジュアルプロパティ」の「整列と間隔」から余白を追加します。この例では、カード内のフリップアイコンに 30 ピクセルの余白が追加されています。同様に、各カード内の任意のテキストや画像を選択し、その境界線に余白を追加できます。

テキスト、画像、インタラクティブボタンを含む、質問スライド上のすべてのコンポーネントに余白を組み込みます。質問スライドの選択肢間にスペースを追加すると、選択しやすくなり、質問の全体的な美観が向上します。これは、画像オプションの内側に余白を追加した多肢選択問題の例です。

自動レイアウト

「自動レイアウト」を有効にすると、デバイス表示形式全体でコンテンツブロックとコンポーネントの余白が比例的に調整され、値はプロジェクトの寸法に基づいて、デスクトップ、タブレット、モバイルデバイスに応じて設定されます。詳しくは、Adobe Captivate でプロジェクト寸法を変更する
方法を参照してください。

自動レイアウトが有効になっている場合の動作

「自動レイアウト」が有効になっている場合、余白は異なるデバイス間で比例的に調整され、各表示形式の値が自動的に変更されます。解像度が 1366 x 768 ピクセルのプロジェクトでは、デスクトップで 50 ピクセルの余白がタブレットでは 28 ピクセルに、モバイルでは 16 ピクセルに縮小され、アスペクト比が維持されます。