メディアルールとオーバーライドを管理する

メディアルールを使用するには:

1. [レスポンシブ] パネルを開き、[サイズと範囲] タブで [レスポンシブ レイアウト] チェックボックスがオンになっていることを確認します。
2. パネルでサイズまたはサイズ範囲を選択して、そのメディアルールにオーバーライドを設定します。

メディアルールが選択されているときに、パネルおよびアクションを特定のサイズに限定できない場合、それらのパネルおよびアクションは無効になります。たとえば、新しい要素の追加やイベントの編集はできません。これらの変更を加えるには、まず [レスポンシブ] パネルで [ベース ドキュメントを編集] を選択します。

特定のサイズのメディアルール

クリエイティブが表示される予定の広告スロットの正確なサイズがわかっている場合は、特定のサイズのメディアルールを設定できます。

一般的なサイズ

[レスポンシブ] パネルには、現在のファイルの広告環境で頻繁に使用されている広告サイズが [サイズと範囲] タブの [サイズ] に表示されます。これらのサイズの編集や削除はできません。

カスタムサイズ

[レスポンシブ] パネルにサイズを追加できます。

カスタムサイズを追加する

1. [カスタムサイズを追加] をクリックします。
2. 必要なディメンションを入力して Enter キーを押します。

カスタムサイズを編集する

1. 編集するサイズにカーソルを合わせます。
2. 編集 アイコンをクリックします。
3. 新しいディメンションを入力します。

カスタムサイズを削除する

1. 削除するサイズにカーソルを合わせます。
2. 削除 アイコンをクリックします。

サイズ範囲のメディアルール

範囲メディアルールを管理する

範囲メディアルールを表示するには、[レスポンシブ] パネルの [サイズと範囲] タブの [範囲メディアルール] セクションで [範囲メディアルールを管理] ボタン をクリックします。または、範囲メディアルールの [その他] ボタン をクリックして、ポップアップ メニューから [ダイアログを開く...] を選択することもできます。

範囲メディアルールを追加する

• パネルで操作を行う場合:
  1. [サイズ範囲を追加] をクリックします。
  2. サイズ範囲の最小ディメンションと最大ディメンションを入力します。
  3. Enter キーを押します。
• ダイアログで操作を行う場合:
  1. ビューポート スペース内をクリックし、マウスをドラッグして長方形を描きます。
     • 長方形が赤色に変わった場合は、サイズ範囲が既存のサイズ範囲と重複しており、設定できません。
  2. [保存] をクリックします。

範囲メディアルールの向きを変更する

ビューポートが横向きまたは縦向きに定められている場合にのみオーバーライドが有効になるように、範囲メディアルールの向きを指定できます。

1. 範囲メディアルールの横にある、向きのプルダウンをクリックします。
2. 新しい向きを選択します。
   • 任意の向き
   • 横向き
   • 縦向き

サイズ範囲を編集する

• パネルで操作を行う場合:
  1. 範囲メディアルールにカーソルを合わせ、編集 アイコンをクリックします。
  2. サイズ範囲の新しい最小ディメンションと最大ディメンションを入力します。
• ダイアログで操作を行う場合:
  1. 編集する範囲メディアルールを選択します。サイズ変更ハンドルが、メディアルールの図形周囲の青いボックスに沿って表示されます。
  2. メディアルールの図形を新しい場所にドラッグするか、サイズ変更ハンドルのいずれかをドラッグします。
     • アスペクト比を維持するには、Shift キーを押しながらサイズ変更ハンドルをドラッグします。
     • ボックスが赤色に変わった場合は、新しいサイズ範囲が既存のサイズ範囲と重複しており、設定できません。
  3. [保存] をクリックします。

オーバーライド

オーバーライドを使用すると、さまざまなビューポート サイズに合わせてプロパティを調整して、レイアウトを最適化できます。

メディアルールでは、size、position、visibility、source、animation を含め、CSS で定義したあらゆるプロパティを変更できます。Google Web Designer では、画像ソース、コンポーネント プロパティ、テキスト コンテンツ、テキストの適合に関する設定など、その他の属性をオーバーライドすることもできます。メディアルールが選択されている場合は、オーバーライドできないプロパティは無効になります。

オーバーライドを表示する

現在選択されているサイズまたはサイズ範囲のオーバーライドは、[オーバーライド] タブの [レスポンシブ] パネルに表示されます。オーバーライドのある各要素と、値がオーバーライドされたプロパティが一覧表示されます。

オーバーライドのリストをフィルタする

パネルの上部にあるプルダウンから、オーバーライドのリストをフィルタできます。

• すべて - すべてのオーバーライドを表示します。
• 現在のページ - 現在のページの要素のオーバーライドを表示します。
• 選択 - 選択した要素のオーバーライドを表示します。

オーバーライドを管理する

オーバーライドを追加または変更する

1. [レスポンシブ] パネルの [サイズと範囲] タブで、メディアルールを選択します。メディアルールがパネル内でハイライト表示され、ステージの左上に表示されます。
2. 必要に応じて変更を加えます。

タイムラインでアニメーションが変更された場合は、[プロパティ] パネルで、テキスト コンテンツまたはテキストの適合に関する設定が変更された場合は、[テキスト] パネルで、オーバーライドされたプロパティのラベルが黄色でハイライト表示されます。

       

オーバーライドを伴うサイズには、[レスポンシブ] パネルでサイズ別のメディアルール アイコンが表示されます。

メディアルールのオーバーライドをコピーする

1. 次のいずれかの操作を行います。
   • 特定のサイズのオーバーライドをコピーするには: [レスポンシブ] パネルでサイズを右クリックします。
   • サイズ範囲のオーバーライドをコピーするには: [レスポンシブ] パネルでサイズ範囲にカーソルを合わせ、表示されるその他 アイコンをクリックします。
2. ポップアップ メニューから [オーバーライドをコピー] を選択します。
3. 次のいずれかの操作を行います。
   • 特定のサイズにオーバーライドを貼り付けるには: [レスポンシブ] パネルでサイズを右クリックします。
   • サイズ範囲にオーバーライドを貼り付けるには: [レスポンシブ] パネルでサイズ範囲にカーソルを合わせ、表示されるその他 アイコンをクリックします。
4. ポップアップ メニューから [オーバーライドを貼り付ける] を選択します。

オーバーライドを削除する

1. オーバーライドを示す黄色のプロパティ ラベルをクリックします。
   • ほとんどのオーバーライドは [プロパティ] パネルに表示されます。
   • アニメーションのオーバーライドはタイムラインに表示されます。
   • テキスト コンテンツやテキストの適合に関する設定は、[テキスト] パネルで確認できます。
2. ポップアップ ダイアログで [オーバーライドを削除] を選択します。

メディアルールのオーバーライドをすべて削除する

• 特定のサイズの場合:
  1. そのサイズのサイズ別のメディアルール アイコンを右クリックします。
  2. ポップアップ メニューから [オーバーライドを削除] を選択します。
• サイズ範囲の場合:
  1. 範囲メディアルールにカーソルを合わせます。
  2. その他 アイコンをクリックします。
  3. ポップアップ メニューから [オーバーライドを削除] を選択します。