Adobe Museでフルスクリーンの背景画像を設定する方法

最近、Adobe Museを勉強しています。Adobe Museはコードを記述せずにWebサイトを作ることが出来るアプリケーションです。以前までβ版のような扱いでAdobeCCの登録者なら無料でダウンロードできていたもので、現在は正式リリースとなり価格も設定されています。
コードの知識が無くても簡単にサイトを構築できるのがMuseの強みですが、コードの代わりとなる設定をしっかりやらないと思い通りにはサイトは動きません。設定項目も少なくないので、どこにどの設定があるのかを忘れてしまうこともしばしばです。
そこで、Museを触ってきた中で気づいた事や意外と見落としがちなポイントがあった際には、記録としてこのブログに書いていこうと思います。

フルスクリーン背景画像を設定するには

今回はフルスクリーン背景画像の設定です。結構初歩的な内容なのですが、これを見失っていた私はウィジェット内のフルスクリーンスライドショーに一枚だけ写真を指定して代用していたりしました（笑）。

Adobe Museで背景にフルスクリーンの画像を配置するには、「ブラウザー背景」を使用します。実際に使用したイメージが以下の写真となります。

これは私が以前に購入した本「HTML&CSSとWebデザインが一冊できちんと身につく本」の中でサンプルとして配布されているデザインをもとにして、Museで作ったものです。背景に使用した画像はフリー写真素材サイト「Pixabay」からダウンロードしたNYの遊園地「コニーアイランド」。文章はコニーアイランドのウィキペディアからの引用です。

以下、ブラウザー背景の設定の方法です。

1. 画面上部のコントロールパネル内、青文字の「ブラウザー背景」をクリックします。

2. 表示されたパネルの中の上部にあるボタン「塗り」を指定します。
3. パネルの中ほどにある「画像：」の横にある青文字「画像を追加」をクリックします。

4. 表示されたブラウザのウィンドウから使いたい画像を選択し、「開く」をクリックします。

5. パネル内「サイズ調整：」の横にあるプルダウンメニューから「全体に拡大・縮小」を選択します。また、スクロールのチェックを入れると要素と共に背景画像がスクロールし、チェックを外すと要素に影響されずに画像は画面に固定されます。今回はスクロールのないトップページの一枚絵なので、スクロールのチェックは外してあります。

6. 各要素を配置して完成。プレビューで冒頭のイメージとなります。

気になる点：ブラウザー背景画像は環境によっては両端がトリミングされる

ブラウザー背景は可変幅と固定幅の両方で使用できるのですが、可変幅で使用した場合、配置した画像をブレイクポイントで切り替えることができません。スマホやタブレットでもデスクトップと同じ画像が使用されます。そのため、デスクトップ環境では見えていた背景画像の両端は、スマホなどで見た場合は画面外になってしまう可能性があります。
固定幅の場合はデスクトップ、タブレット、スマホでそれぞれのブラウザー背景を指定できるので、別の見せ方ができます。

リンク

・HTML&CSSとWebデザインが一冊できちんと身につく本（HTML初心者と中級者の間の人にオススメの本。clearfixの説明が秀逸です。また、本としても読みやすくデザインされています。）
・Pixabay（結構有名なフリー素材サイト。海外のおしゃれな写真が欲しいときに役立ちます。）