現象
コンテンツ内に設定した動画や画像が大きく表示され、設問文や選択肢が一つの画面内に収まりません。設問文や選択肢を一つの画面内に収める方法を知りたいです。
回答
原因
以下のように大きな高画質の動画・画像をブラウザ上で拡大して表示している為、設問文や選択肢と一緒に動画・画像が表示されていない可能性があります。
1)コンテンツ内に設定している動画や画像の縦横サイズ(ピクセル)が大きい。
2)コンテンツを表示しているブラウザの表示倍率が125%や150%など大きい設定になっている。
確認方法(コンテンツ内に使っている動画・画像の縦横サイズ)
動画の縦横サイズを確認する方法)
動画ファイルを選択し、右クリック > プロパティ > 詳細 内のフレーム幅・フレーム高が動画ファイルの縦横サイズにあたります。
画像の縦横サイズを確認する方法)
画像ファイルを選択し、右クリック > プロパティ > 詳細 内の幅・高さが動画ファイルの縦横サイズにあたります。
確認方法(コンテンツを表示しているブラウザの表示倍率)
ブラウザの表示倍率は、画面右上の設定「・・・」のズームから確認できます。
Edge)
Chrome)
回避策
回避策は、コンテンツを作成する側、コンテンツを閲覧する側でそれぞれあります。
コンテンツを作成する側)
THiNQ Xeの仕様として、動画・画像の表示エリアには、横サイズ980ピクセルの上限値が設定されています。そのことから、高解像度の動画・画像を設定しても、980ピクセル以上には表示されません。
その為、動画・画像のピクセル数を小さく調整しておくことで、ブラウザの表示倍率が125%や150%になっていたとしても、ある程度は、一つの画面内に表示を収める事が可能になります。
■お勧めのピクセル数:
640×360 (アスペクト比:16:9)
この程度にピクセル数を抑えておけば、だいたいのブラウザで一つの画面内に表示を収められる可能性が高くなります。
コンテンツを表示する側)
コンテンツを表示するときに、ブラウザの表示倍率を125%、150%ではなく、110%(又は100%)にして表示します。
参考)
THiNQ Xeのコンテンツ表示には、表示しているブラウザの横サイズに合わせて、表示をリサイズする仕組みがあります。この事からスマートフォン/タブレットで高解像度の動画・画像を表示させた場合、PCと比べて整理された状態でコンテンツが表示されます。
例えば、以下の表示でブラウザの横表示エリアを小さくすると・・・
表示が調整されます。
トラブルが解決しない場合は?
本記事でご案内している内容で解決ができなかった場合は「解決できない場合は?」をご確認ください。