サイズとレイアウト

<caputchin-game> は 3 つのレイアウトでレンダリングできます（layout 属性で設定）：inline、modal、fullscreen。どうサイズを決めるかはレイアウトによります。modal と fullscreen のレイアウトは2 つの別々のボックスを見せるからです。

• ページ内の要素：あなたのページのフローに収まるもの。inline ではそれはゲームパネル全体で、modal / fullscreen では、訪問者がゲームを開くためにクリックする小さなチェックボックスです。
• ゲームボックス：modal / fullscreen で上に開くダイアログで、中にゲームが入っています。（inline では別のダイアログはありません。パネルがゲームそのものです。）

4 つの属性がこの 2 つのボックスのサイズを決めます。各値は auto（既定）、full（利用可能なスペースを覆う）、または 480 のような正のピクセル数のいずれかです。

Inline

inline はボックスが 1 つなので、width / height がパネル全体のサイズを決めます。overlay-width / overlay-height はここでは何もせず無視されます（設定するとウィジェットが警告をログに記録します）。

<!-- A panel that spans its container, at a fixed height -->
<caputchin-game sitekey="cpt_pub_..." layout="inline" width="full" height="480"></caputchin-game>

Modal と fullscreen

ここでは 2 つのボックスは独立しています。width / height はあなたのページの入口チェックボックスのサイズを決め、overlay-width / overlay-height は訪問者がクリックしたときに開くダイアログとゲームのサイズを決めます。

<!-- Full-width entry checkbox; the game opens at its natural size, centered -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" width="full"></caputchin-game>

<!-- Compact entry checkbox; the game fills the dialog -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" overlay-width="full" overlay-height="full"></caputchin-game>

<!-- A 500px entry, opening a fixed 900x600 game dialog -->
<caputchin-game
  sitekey="cpt_pub_..."
  layout="modal"
  width="500"
  overlay-width="900"
  overlay-height="600"
></caputchin-game>

overlay-width="full" はゲームをその軸に沿ってダイアログいっぱいに広げます。ピクセル値はゲームをそのサイズに固定します（モーダルがその周りをぴったり包みます）。fullscreen ではダイアログがすでにビューポートを覆っているので、overlay-* はゲームが伸びて埋めるか、自分のサイズで中央に収まるかを制御します。

ゲームボックスを未設定のままにするとき

overlay-width / overlay-height を設定しないと、ゲームボックスはゲームの作者がゲームのために選んだサイズを使います（その好ましいフットプリントで、ゲームの caputchin.json で宣言されます）。なのでほとんどの場合、あなたのページレイアウトには width / height だけが必要で、ゲームは自分のサイズを適切に決めます。それを上書きしたいときだけ overlay-* を設定してください。

ピクセル値

ただの数字は CSS ピクセルです：width="500" と width="500px" は同等です。ゼロ、負、非数値の値は拒否されます（属性は既定に戻り、ウィジェットが警告をログに記録します）。

あわせて読む

• ゲームウィジェット要素：<caputchin-game> の属性一式。
• ウィジェットのメソッドとイベント：ウィジェットを駆動し、それに反応する。