フルスクリーン機能について – サイト開設サポート

画面いっぱいにメインビジュアルを表示することができる機能です。
画像だけでなく、動画にも対応しています。
サイトにアクセスした直後（ファーストビュー）では、ヘッダーの背景が透過し、スクロールすると通常のTOPページと同じデザインに切り替わります。

①.gif

1.「デザイン管理>トップページ/メインビジュアル」項目の表示形式で「フルスクリーン」を選択します。

②.png

2. 「フルスクリーン時ロゴ＞」を押し、お好みの画像を設定します。

フルスクリーン時ロゴとは？
フルスクリーン表示形式時に表示されるロゴ画像です。
フルスクリーン表示形式時にはヘッダーの背景が透明になるため、メインビジュアルに設定している画像/動画によっては共通の項目で通常設定しているロゴが見えづらくなる場合があります。
そのため、視認性を確保できるよう別のロゴが設定できます。

③.png

3. 「フルスクリーン時メニューカラー＞」を押し、画像青色部分をクリックしてカラーパレットを開くまたはカラーコードを入力しお好みのカラーを設定します。

フルスクリーン時メニューカラーとは？
フルスクリーン表示形式時にはヘッダーの背景が透明になるため、メインビジュアルのデザインによってはメニューの文字やボタンの色が見えづらくなる場合があります。
この機能を利用することで、メニューの文字やボタンの色を調整できます。

ポイント：フルスクリーン時のロゴと色味を統一するのがおすすめです。

④.png

4. 「PC向け画像/映像＞」を押し、下記の項目を設定します。

　a. 「画像・動画」を選択します。
　b. 「ファイルを選択」より、お好みの画像または動画を選択し、「適用」を押してください。

⑤.png

5. 「SP向け画像/映像＞」を押し、下記の項目を設定します。

　a. 　「画像・動画」を選択します。
　b. 　「ファイルを選択」より、お好みの画像または動画を選択し、「「適用」を押してください。

⑥.png

6. 設定後「適用」を押し、公開設定を選択し画面右上の「保存」を押せば設定完了です。

メインビジュアル（画像・動画）と重なっても見やすいロゴを設定してください。主に色味の調整を目的としています。

例:

変更が不要な場合は、設定しなくても問題ありません。

片方だけ設定している場合、そちらを流用してもう一方も表示されますので、必ずしも両方設定する必要はございません。
ただし、閲覧しているブラウザのサイズに応じて調整されるため、画質が荒く見えたり、切り取られて見れない領域が大きくなってしまうことがございますので、両方設定することを推奨しています。

画面いっぱいにメインビジュアルを表示する関係上、ほとんどの場合で画像・動画の端が若干切り取られてしまいます。
画像・動画は以下のような仕組みで画面に表示されています。

このため、以下の点に気をつけて画像を制作いただくことをおすすめします。

⑦.gif

関連記事