画像ボタンコンポーネント

このコンポーネントは、AMP HTML 広告、動画広告、イメージ広告ではサポートされていません。

画像ボタンコンポーネントは、次の 3 つの視覚的状態を有するボタンです。

アップ画像 - ユーザーがボタンを操作していないときのデフォルトの画像
オーバー画像 - ユーザーのカーソルがボタン上にあるときの画像
ダウン画像 - ユーザーがボタンをクリックしたときの画像

これにより、3 つの画像を指定するだけで視覚的に反応するボタンを作成できます。

プロジェクトで画像ボタンコンポーネントを使用するには:

[コンポーネント] パネル、[操作] フォルダの順に開きます。
[画像ボタン] コンポーネントをステージにドラッグします。
[プロパティ] パネルの [画像ボタン] プロパティセクションで、[アップ画像]、[オーバー画像]、[ダウン画像] の URL を入力します。画像のソースファイルがローカルにある場合は、各項目の参照ボタンをクリックして、パソコンのファイルシステムから画像を選択します。

プロパティ

プロパティ	説明
名前	コンポーネント名。
アップ画像	押されていない状態のボタンの画像の URL です。外部 URL（「https://www.google.com/example.jpg」）またはライブラリのアセット（「assets/example.jpg」）を参照できます。動的データにバインドできます。
オーバー画像	マウスオーバーやカーソルを合わせた状態のボタンの画像の URL。外部 URL（「https://www.google.com/example.jpg」）またはライブラリのアセット（「assets/example.jpg」）を参照できます。動的データにバインドできます。
ダウン画像	押されている状態のボタンの画像の URL。外部 URL（「https://www.google.com/example.jpg」）またはライブラリのアセット（「assets/example.jpg」）を参照できます。動的データにバインドできます。
背景	画像がコンポーネント領域よりも小さい場合に表示される色。動的データにバインドできます。
位置揃え	コンポーネント内での画像の配置方法です。 center bottom bottom left bottom right left right top top left top right
スケーリング	コンポーネントとサイズが異なる画像を表示する方法: 画像が収まるようにサイズ変更 - トリミングや縦横比の変更を行わずに、画像がコンポーネント領域内にできるだけ大きく表示されるようサイズ調整します。画像が収まるように切り抜く - 縦横比の変更を行わずに、画像でコンポーネント領域が隙間なく埋まるようにサイズ調整し、はみ出た部分（縦または横）をトリミングします。なし画像が収まるように拡大 - 画像全体をコンポーネント領域全体に表示します。
無効	ボタンを無効にします。このチェックボックスはデフォルトでオフになっています。

イベントとアクション

画像ボタンコンポーネントから送信されるイベント

次の画像ボタンコンポーネントからのイベントにより、他のアクションをトリガーできます。

イベント	説明
画像ボタンの読み込み完了	すべてのボタン画像が読み込まれると送信されます。

[イベント] ダイアログで上記のイベントのいずれかを選択する場合は、画像ボタンコンポーネントをターゲットとして設定します。

画像ボタンコンポーネントにより実行されるアクション

他のイベントによって、次の画像ボタンコンポーネントのアクションをトリガーできます。

アクション	設定項目
Toggle enable	なし
Set images	Up image source - 新しいアップ画像の URL。 Over image source - 新しいオーバー画像の URL。 Down image source - 新しいダウン画像の URL。

[イベント] ダイアログで上記のアクションのいずれかを選択する場合は、画像ボタンコンポーネントをレシーバーとして設定します。

イベントを設定する方法をご確認ください。

プレビュー

このコンポーネントは Google Web Designer インターフェースではプレビューできません。コンポーネントの動作を確認するには、右上隅にある [プレビュー] ボタンをクリックし、お使いのブラウザでドキュメントをプレビューしてください。

この情報は役に立ちましたか？

改善できる点がありましたらお聞かせください。

画像ボタン コンポーネント