Adobe Muse で、Web サイトのヘッダー領域とフッター領域を定義して、メニュー、ロゴ、著作権に関する注意事項などを追加します。

注意:

Adobe Muse は、新しい機能が追加されなくなり、2020 年 3 月 26 日にサポートが中止される予定です。詳細な情報と支援については、Adobe Muse のサービス終了ページを参照してください。

Adobe Muse を使用すれば、Web ページのヘッダーとフッターを簡単に作成できます。ヘッダーエレメントとフッターエレメントを常に同じように表示して、Web サイトの外観の一貫性を維持することをお勧めします。これは、Adobe Muse のマスターページでヘッダーエレメントとフッターエレメントを定義することで実現できます。マスターページを更新すると、Web サイトのすべてのページが更新されます。

HTML と CSS で Web サイトを構築する場合、各ページに表示されるユニークなコンテンツに応じて、各ページの高さが異なる場合がよくあります。Muse には、各ページのユニークなコンテンツに応じて、サイトのページに異なる長さを表示する機能が含まれています。各ページの高さに関係なく、ヘッダーが常に最上部に固定され、フッターが常にページのコンテンツの真下に表示されるように領域を設定できます。

ページのヘッダーとフッターの追加

ページのヘッダー領域とフッター領域の定義を開始する前に、ヘッダーガイドとフッターガイドが表示されていることを確認してください。ガイドが表示されていない場合は、表示ヘッダーとフッターを表示を選択します。

代わりに、コントロールパネルで表示メニューを使用してヘッダーガイドとフッターガイドを有効にできます。

ヘッダーガイドとフッターガイドが有効になっていることを確認します。
ヘッダーガイドとフッターガイドが有効になっていることを確認します。

必要に応じて、ワークスペースの左側(ブラウザーウィンドウ領域のちょうど外側)を右クリックすることもできます。表示されるコンテキストメニューでヘッダーとフッターを表示するオプションを有効にします。

ガイドとルーラーの使用

ヘッダーガイドとフッターガイドの位置を変更するには、定規を有効にする必要があります。定規を使用すると、正確なピクセル位置にガイドを設定できます。デフォルトでは、(新規サイトを作成したときに設定した列の数を表示する)正規のガイドも表示されます。

5 つの青色の水平方向ガイドが、ページの幅にまたがって表示されます。これら 5 つのガイドは、上から順番にページの最上部、ヘッダーの下端、フッターの上端、Web ページの下端、およびブラウザーウィンドウの下端を定義するために使用されます。ガイドをドラッグしてこれらの領域を定義すると、ツールヒントに各ガイドの説明と現在位置が表示されます。ページの倍率を上げると、ズームインしてより正確にガイドを配置できるので便利です。

3 つの中間ガイドは、ヘッダー領域とフッター領域に表示されるコンテンツを定義します。残りの中央領域には、ユニークなページコンテンツを追加します。この中央領域は、各ページに配置された要素の高さに合わせて拡張されます。

ページ上の長方形と要素を選択することもできます。ヘッダー領域とフッター領域を設定しながら、選択された要素のバウンディングボックスを使用してガイドを整列すると、便利です。

注意:

ブラウザーウィンドウの下端は、訪問者がブラウザーでサイトを表示するときに、表示領域の最下部を指定します。デザインに応じて、ブラウザー自体の背景色または背景画像を設定して、ブラウザーガイドの下端の上にページの下端が来るように設定することで、ページのコンテンツの下に背景色または背景画像を表示させることができます。

ヘッダーエレメントとフッターエレメントの定義

ヘッダーエレメントとフッターエレメントを定義するには、次の操作を実行します。

  1. ページの下部ガイドとブラウザーの下部ガイドの両方をページ下部の同じ場所(下の画像に示すようにフッター長方形の真下)にドラッグします。
Adobe Muse でのヘッダーとフッターエレメントの定義
Adobe Muse でのヘッダーとフッターエレメントの定義

  1. タイル張りの背景画像を含むフッター内で長方形を選択します。フッターの長方形の上端に整列されるまで、フッターガイドをドラッグします。
  2. ページの上部ガイドは最上部に配置しておきます(Y: 0 px の位置)。目的の位置になるまでヘッダーガイドを下にドラッグします。

ヘッダーのコンテンツは、ページの上端とヘッダーガイドの間に表示されます。

ヘッダーガイドをドラッグしてヘッダー領域を設定
ヘッダーガイドをドラッグしてヘッダー領域を設定

デザインプロセス中はいつでも、ヘッダーとフッターのコンテンツに合わせてガイドを再調整する必要がある場合、A-マスターページに戻ることができます。

プランリンクをクリックするか、katiesCafe というラベルの付いたタブをクリックすると、プランビューに戻ります。

サイト内のすべてのページのサムネールには、リンクされている A-マスターページに追加したデザイン要素が表示されることが分かります。

A-マスターページにリンクされているすべてのページに指定されたヘッダーとフッターに注目
プランビュー内で、すべてのリンクされているページのサムネールに A-マスターデザインが表示されます。

サイトをデザイン中はいつでも、マスターページに加えた変更が、リンクされているページに自動的に反映されます。マスターページを使用すると、サイトを更新または維持するのが簡単になります。これは、1 つのマスターページを更新するだけで、サイトの外観を変更できるためです。

画像の配置によるヘッダーコンテンツの入力

サイトロゴはサイトのすべてのページに表示されるため、マスターページのヘッダーに配置するのが最適です。

  1. ファイル配置を選択します。または、必要に応じて、キーボードショートカットの Control+D(Windows)または Command+D(Mac)を使用して、画像を配置します。

  2. 表示される読み込みダイアログボックスで、Kevins_Koffee_Kart フォルダーに含まれる Logo.png というファイルを探して選択します。「選択」をクリックします。

  3. 選択ツールを使用して、以前の手順で定義したヘッダー領域の上部近くにロゴをドラッグします。

次に、次のセクションで追加するメニューバーウィジェットの背景グラフィックとして機能する別の画像を配置します。

  1. ファイル配置を選択するか、オペレーティングシステムのキーボードショートカット、Control+D(Windows)または Command+D(Mac)を使用します。

  2. Kevins_Koffee_Kart フォルダーに移動し、top-nav.png というファイルを選択します。

  3. ページの上部、前の手順でヘッダーとして定義した領域内を 1 回クリックします。どのページでも、画像がメインページのコンテンツの上の同じ位置に表示されるよう、ヘッダーマーカーより上に置かれていることを確認します。

  4. 選択ツールを使用して、先ほど配置した茶色のリボングラフィックをドラッグし、ロゴの中の赤い自転車のタイヤが茶色のリボンの上部に接するようにします。この配置にすると、バイクが茶色のリボンの上を走っているように見えます。

  5. ファイル配置をもう一度選択します。thedrip.png という名前のファイルを参照して選択します。茶色のリボングラフィックの右下側近くを 1 回クリックして画像を元のサイズで配置します。

  6. 選択ツールを使用して、ドリップ画像の位置を変更し、茶色のリボンと整列させ、コーヒーが右側からドリップしているように表示します。

    サイトナビゲーションのロゴと背景を追加した後のヘッダーコンテンツ。
    サイトナビゲーションのロゴと背景を追加した後のヘッダーコンテンツ。

    ロゴとトップナビゲーションの正しい配置を確認するには、ライブサイトの例を参照してください。

    次のセクションでは、ウィジェットコンテナの使用方法の簡単な概要に続いてウィジェットの追加方法について学びます。

スティッキーフッターの使用

スティッキーフッターオプションを使用することで、Web ページにフッターエレメントを貼り付けることができます。スティッキーフッターは、大画面のデスクトップモニターを使用している訪問者用に特別に設計されています。スティッキーフッターオプションを有効にすると、ブラウザーウィンドウが Web ページデザインよりも大幅に大きい場合でも、フッターが目的の位置に保たれたままになります。

スティッキーフッターオプションは、Muse でサイトを作成しているときに新規サイトダイアログ(ファイル新規サイト)に表示されます。また、スティッキーフッターには、ページプロパティページページプロパティ)およびサイトプロパティダイアログ(ファイルサイトプロパティ)からもアクセスできます。

デフォルトでは、「スティッキーフッター」オプションが有効になっています。通常、サイトをデザインするときに「スティッキーフッター」機能を使用するのが最適です。ただし、表示されるページの長さが希望の長さよりもはるかに長い(サイトにはわずかなページコンテンツしか含まれないため、ページはかなり短い)場合は、ページのプロパティダイアログボックスでチェックボックスをオフにすることで、いつでもこの機能を無効にすることができます。

Web サイト全体でこのオプションを無効にしておきたい場合は、サイトプロパティダイアログでオプションを選択解除します。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー