レスポンシブ画像のフォーカス ポイント

フォーカス ポイントを設定することで、画像の重要な部分が切り抜かれるのを防止できます。フォーカス ポイントは、同じ画像が別のサイズで表示されることがある、レスポンシブ レイアウトの場合に特に効果的です。

フォーカス ポイント

フォーカス ポイントの利用に関する制限:

• 画像のスケーリング タイプ - スケーリング プロパティは [画像が収まるように切り抜く] または [なし] に設定する必要があります。
• 画像のソースタイプ - ソースには外部 URL ではなく、ローカルの画像を使用する必要があります。
• ダイナミック広告 - ダイナミック広告ではフォーカス ポイントがサポートされていません。
• アニメーション - フォーカス ポイントをアニメーションに適用することはできません。画像のディメンションをアニメーション化すると、この画像に設定したフォーカス ポイントは最初の画像サイズに適用されます。

フォーカス ポイントを有効にすると、位置揃えオプションがオーバーライドされます。

フォーカス ポイントの設定

1. 次のいずれかの方法で [画像のフォーカス ポイントの編集] ダイアログを開きます。
   • ステージ上の画像を選択し、[プロパティ] パネルの [フォーカス ポイントを有効にする] チェックボックスをオンにします。
   • 画像を右クリックし、ポップアップ メニューから [フォーカス ポイントの設定] を選択します。
2. フォーカス ポイントを任意の場所にドラッグします。
   • デフォルトでは、フォーカス ポイントは画像の中心になっています。
   • わかりやすいように、フォーカス ポイントのコントロールは白い円として表示されますが、実際のフォーカス ポイントは中央の十字線の位置にあります。
   • キーボードの矢印キーを使用すると、フォーカス ポイントを 1 ピクセルずつ動かすことができます。
   • フォーカス ポイントをリセットして中央に戻すには、画像を右クリックしてポップアップ メニューから [リセット] を選択するか、Ctrl+R（Windows）または ⌘+R（Mac）を押します。
3. [プレビュー] タブに切り替えると、画像のアスペクト比を変えた場合に、フォーカス ポイントが画像の切り抜きにどのように影響するかを確認できます。
4. [OK] をクリックします。

画像ソースを変更した際は、フォーカス ポイントの保存、編集、または破棄を選択できます。

フォーカス ポイントの編集

既存のフォーカス ポイントの位置を変更できます。

1. 次のいずれかの方法で [画像のフォーカス ポイントの編集] ダイアログを開きます。
   • 画像を右クリックし、ポップアップ メニューから [フォーカス ポイントの編集...] を選択します。
   • 画像を選択し、[プロパティ] パネルの [フォーカス ポイントを有効にする] チェックボックスの横にある [フォーカス ポイントの位置を設定] ボタン をクリックします。
2. フォーカス ポイントを新しい位置にドラッグします。
3. [OK] をクリックします。

フォーカス ポイントの切り替え

フォーカス ポイントを無効にすると、位置揃えオプションを使用した場合にどのように画像が表示されるかを確認できます。フォーカス ポイントを再度有効にすると、設定済みのフォーカス ポイントの位置に戻ります。

選択した画像のフォーカス ポイントの有効 / 無効を切り替えるには、次のいずれかの方法を使用します。

• [プロパティ] パネルの [フォーカス ポイントを有効にする] チェックボックスをオンにします。
• 画像を右クリックし、ポップアップ メニューから [フォーカス ポイントを有効にする] または [フォーカス ポイントを無効にする] を選択します。

フォーカス ポイントの削除

1. 画像を右クリックします。
2. ポップアップ メニューから [フォーカス ポイントの削除] を選択します。

画像をフォーカス ポイントと入れ替える

[画像を入れ替え] 機能を使用する場合や、有効なフォーカス ポイントがある画像のソースを変更する場合は、新しい画像で同じフォーカス ポイントの保持、フォーカス ポイントの編集、または破棄のいずれかを指定できます。

コードビューでのフォーカス ポイント

コードビューでは、フォーカス ポイントの座標は gwd-image 要素の focalpoint 属性で設定されています。例: