Adobe Muse での塗りおよびブラウザー背景の使用

プランビューで A-マスターページのサムネールをダブルクリックすると、デザインビューでこのページが開きます。

A-マスターページがワークスペースの最上部に沿ってタブ内で開きます。

コントロールパネルの左上隅にある選択範囲インジケーターに注意してください。ページ要素が選択されていない場合、選択範囲インジケーターに「ページ」という文字が表示されます。ページ上のオブジェクト、例えば画像を選択すると、「画像フレーム」という文字が選択範囲インジケーターに表示されます。

選択範囲インジケーターを使用して、制御する選択した要素を確認します。他のページ要素を選択した場合は、ページ外のグレーの領域をクリックしてページを再選択できます。

ページを選択しながら、コントロールバーにあるメニューを使用して、塗りと線のカラーの設定を更新できます。

コントロールパネルで、ブラウザー背景をクリックします。「カラー」フィールドから目的のカラーを選択します。背景塗りのカラーを選択するには、次のいずれかを実行します。

• カラーピッカーを使用してカラーを選択します。
• RGB 値を入力します。
• Hex# フィールドに 16 進コードを入力します。
• 既に保存されているスウォッチからカラーをクリックして選択します。

単色またはグラデーションの塗りカラーを適用するには、ブラウザー背景パネルで、単色またはグラデーションを選択します。ラジオボタンを使用して、単色またはグラデーションの塗りカラーのいずれかを選択します。

グラデーションを適用するには、「塗りの種類」を「グラデーション」に設定します。カラースウォッチを設定して、最初と最後のカラーストップを設定します。

「方向」を「水平方向」または「垂直方向」に設定し、グラデーションの方向を設定します。

コントロールパネルで、塗りをクリックします。ページの塗りカラーが「なし」に設定されていることを確認します。「塗り」メニューには、赤い対角線の入った白いスウォッチが表示されます。

.muse ファイルのマスターページを開きます。

特定のページに背景画像を追加することができます。ただし、デザイン内のすべてのページに背景画像を表示する場合は、マスターページに移動します。

コントロールパネルで、「ブラウザー背景」をクリックします。「塗りの種類」が「単色」に設定されていることを確認します。

背景塗りとして画像を選択するには、「画像の追加」リンクをクリックします。ローカルコンピュータから目的の画像ファイルを参照して選択します。「開く」をクリックして、背景画像を設定します。

背景画像の「サイズ調整」を設定します。次のいずれかのオプションを設定できます。

• 全体に拡大・縮小：背景画像がサイズ全体に拡大・縮小されます。指定した設定に従って、画像のサイズと位置が調整されます。
• サイズに合わせて拡大・縮小：画像がサイズに合わせて拡大・縮小されます。
• 元のサイズ：画像が元のサイズで背景塗りとして適用されます。
• 並べて表示：画像が背景全体にわたって繰り返されます。並べて表示するオプションにより、サイト訪問者のモニターサイズに関係なく、ブラウザーウィンドウの大きさに合わせて繰り返し使用される、サイズがより小さな画像を作成できます。
• 横に並べて表示：画像が水平方向に繰り返し並べて表示されます。
• 縦に並べて表示：画像が垂直方向に繰り返し並べて表示されます。

並べて表示された背景画像は、Web デザインで一般的に使用されます。サイトをパブリッシュするときに、並べて表示された背景塗りとして設定した元の小さな画像が、ブラウザーで一度だけ読み込まれます。並べて表示された背景画像を使用すると、ダウンロード速度やサイトのパフォーマンスに影響を与えることなく、ページの広い領域を覆うことができます。

背景画像の位置を設定するには、9 つのグリッド位置から目的の位置を選択します。例えば、中央の四角形をクリックすると、画像がブラウザーウィンドウの中央に表示されます。

ブラウザー背景パネルの外側にある場所をクリックすると、このパネルは閉じます。

背景画像を表示するには、Adobe Muse またはブラウザーでサイトをプレビューします。

ページ要素に対して 100％幅を設定するページを開きます。必要なページエレメントを選択します。例えば、ページの最下部付近で、ページの幅いっぱいに広がり、かつ高さが約 250 ピクセルの長方形を選択します。

長方形を選択しながら、線幅を 0 に設定します。選択範囲インジケーターの左上隅に「長方形」という文字が表示されるので、長方形を選択していることがわかります。

コントロールパネルで、塗りをクリックします。「塗り」メニューが「なし」に設定されていることを確認します。赤い対角線の入った白いスウォッチが表示されます。

塗りパネルの画像の追加リンクをクリックします。目的の画像を参照して、画像を選択し、開くをクリックします。

サイズ調整ドロップダウンリストから、横に並べて表示を選択します。このオプションを指定すると、画像が左から右に X 軸を横切って並べて表示されます。

長方形の変形ハンドルをドラッグして、可視領域の下部に配置します。ページの左側、下側、および右側と交差するように幅を調整します。

長方形が 100％幅モードに設定されたことを示す赤色の境界線が一時的に表示されます。

コントロールパネルで、ブラウザー背景をクリックしてメニューを展開します。背景塗りとして追加する画像を選択するには、画像の追加リンクをクリックします。

コントロールパネルで、塗りをクリックして「塗り」メニューを展開します。

不透明度を 80％に設定します。この設定は、透明度が 20％で、ほとんど不透明です。ページの編集を続けて、境界線を追加したり、追加のグラフィック効果を適用したりできます。