Adobe Muse サイトのメニューを追加および設定する方法について説明します。モバイルメニューとロールオーバーステートの作成方法、およびメニューラベルの編集方法について説明します。

注意:

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

ナビゲーションは、Web サイトを構築する際に考慮すべき最も重要な側面の 1 つです。Web サイトを設計するときは、サイトのナビゲーションのタイプと配置を選択することが重要です。Web サイトのユーザー体験は、メニューやサイトナビゲーションによって高められることもあれば、損なわれることもあります。

Adobe Muse では、メニューウィジェットを使用してサイトナビゲーションシステムをすばやく作成できます。ページを接続するリンクを手動で作成できますが、メニューウィジェットには、ナビゲーションをサイトに追加する簡単で
柔軟な方法が用意されています。他のウィジェットと同様に、メニューウィジェットをページにドラッグするだけで、メニューを追加できます。その場合は、ページ名と同じメニューラベルが自動的に入力されます。プランビューでページ名を変更すると、メニューラベルが自動的に更新されます。

垂直方向のメニューと水平方向のメニューを追加できます。また、Adobe Muse では、サンドイッチメニューと、メニュー項目のロールオーバーステートを作成できます。Adobe Muse を使用してこれらすべてをおこなう方法については、以下を参照してください。

 

メニューウィジェットの追加

  1. マスターページを編集用にデザインビューに開いておき、ウィジェットライブラリを開きます。まだ開いていない場合は、ウィンドウウィジェットライブラリを選択します。

  2. ウィジェットライブラリパネルで、「メニュー」をクリックしてメニューウィジェットのリストを展開します。サイトの設計とメニューを配置する場所に応じて、次のいずれかを選択します。

    • 水平メニューを追加するには、「水平方向」を選択します。
    • 垂直メニューを追加するには、「垂直方向」を選択します。
    Adobe Muse での垂直または水平メニューウィジェットの選択
    垂直または水平メニューウィジェットの選択
  3. 選択ツールを使用して、ウィジェットをドラッグし、レイアウトの目的の位置に配置します。例えば、ヘッダーセクションに水平メニューウィジェットを配置できます。

    ヘッダー内の茶色いリボンの背景画像の上にメニューウィジェットを配置します。
    ヘッダー内の茶色いリボンの背景画像の上にメニューウィジェットを配置します。

    メニューに、サイトマップに表示されるのと同じ順序で、作成したページの名前が自動的に表示されるのがわかります。メニューラベルは自動的にページにリンクされ、動的に変更されます。つまり、後でページの名前を変更したりページを移動したりすると、メニューは自動的に更新されます。リンクは正しく機能し続けます。

  4. コントロールパネルのカラーピッカーをクリックし、メニューのカラーを設定します。次にテキストサイズフィールドを使用して、メニューのテキストのテキストサイズを設定します。

    テキストのサイズとカラーの選択
    フォントカラーとポイントサイズを設定して、水平メニューウィジェットのテキストボタンを制御します。

メニューウィジェットの設定とカスタマイズ

これでメニューウィジェットがレイアウトに追加されたので、要件に合わせてこのウィジェットをカスタマイズできます。オプションパネルを使用して、メニューを設定できます。オプション パネルはコンテキストに応じたパネルで、変更を適用してウィジェットに特有の設定を更新できます。このパネルを使用して、ウィジェットの動作と、ウィジェットのコンテンツの表示方法を制御します。

  1. メニューウィジェットを選択し、ウィジェットの右上隅にある青い矢印をクリックします。オプションパネルが表示されます。

    オプションパネルからのメニューウィジェットの設定
    オプションパネルからのメニューウィジェットの設定
  2. オプションパネルを使用してメニューウィジェットを設定します。次のオプションを設定できます。

    • メニューの種類:サイトナビゲーションに含めるページを指定します。最初のレベルまたは親ページのみを含める場合は、「トップページ」を選択します。ナビゲーションにサブページも含めるには、「すべてのページ」を選択します。子ページがサブメニューとして表示されます。メニューウィジェットに表示する目的のページを手動で選択するには、「手動」を選択します。
    • 方向:メニューを水平方向に追加するか、垂直方向に追加するかを指定します。
    • 編集をすべてに適用:すべてのメニュー項目を一緒に更新する場合は、このチェックボックスをオンにします。デフォルトでは、このチェックボックスが選択されています。このチェックボックスを選択しないと、選択した設定は、選択したメニュー項目にのみ適用されます。
    • アイテムのサイズ:メニュー項目を幅で均等に割り付けるか、サイズで均等に割り付けるかを指定します。
    • 左アイコンを表示:デフォルトでは、このチェックボックスは選択されていません。各メニュー項目の左隅にアイコンを追加する場合は、このオプションをオンにします。
    • ラベルを表示:デフォルトで、このチェックボックスが選択されています。このチェックボックスの選択を解除すると、メニューラベルは表示されなくなります。
    • 右アイコンを表示:右アイコンを無効にするには、「オフ」を選択します。メニュー項目の右隅にアイコンを設定する場合は、「オン」を選択します。「右」アイコンは、メニュー項目にサブメニューがあることを示す矢印を追加する場合に便利なオプションです。「サブメニューのみ」オプションを選択して、サブメニューのあるメニュー項目だけに右アイコンを設定することもできます。
    • パーツの配置:各タブの内部パーツの開始点を指定します。
    オプションパネルを使用したメニューウィジェットの設定
    オプションパネルを使用したメニューウィジェットの設定

メニューラベルの編集とスタイル設定

以下の手順では、各メニュー項目においてページ名を表示するテキストラベルの更新方法を指定します。シンプルなテキストリンクを持つ非常に基本的なデザインを使用した水平メニューウィジェットを取り上げます。この例では、すべてのステートに同じフォントフォーマットが使用されていると想定します。

  1. 編集するメニューラベルをダブルクリックして選択します。

  2. メニュー項目内部のテキストを編集するには、テキストパネル(ウィンドウテキスト)を開きます。ラベルを選択した状態で、テキストパネルを使用して、必要なオプションを選択しテキストのフォーマットを指定します。

    • フォント:メニューラベルに適用する必要なフォントを選択します。
    • フォントスタイル:メニューラベルに斜体または太字を使用する必要がある場合は、どちらかを選択します。
    • サイズ:メニューラベルのフォントサイズを選択します。
    • カラー:「カラー」ドロップダウンフィールドから、適用するカラーの 16 進数コードを入力します。または、スポイトを使用してカラーを選択します。
    メニューウィジェットのメニューラベルの編集
    メニューウィジェットのメニューラベルの編集
  3. テキストパネルを使用して、メニューラベルのインデントの値を設定します。メニューラベルに適用するハイパーリンクスタイルが既にある場合は、abc の横のドロップダウンフィールドからスタイルを選択します。

    段落スタイルを適用するには、テキストパネルの「段落スタイル」ドロップダウンフィールドからスタイルを選択します。

  4. 塗りをメニューラベルに適用するには、ダブルクリックしてメニューラベルを選択します。ページの上部のツールバーから、塗りのカラーと線のカラーを選択します。

    ツールバーから線幅を編集し、メニューラベルの角丸の半径を有効にすることもできます。

    塗りと線の設定のメニューラベルへの適用
    塗りと線の設定のメニューラベルへの適用

メニューアイテムのロールオーバーステートの作成

  1. 選択ツールを使用して、ロールオーバーステートを作成するメニューラベルを選択します。ステートパネルを開きます。ボタンのデフォルトステートは既に定義済みです。ステートパネルのロールオーバーサムネールをクリックし、そのステートを編集します。

  2. メニューラベルが選択された状態で、塗りのカラーピッカーを使用し、赤い斜線の縞になった白いスウォッチをクリックして、塗りなし(透明)を選択します。

  3. テキストツールをクリックして、コントロールパネルのカラーピッカーを使用し、ロールオーバーステート用にオフホワイトカラーを選択します。

  4. ステートパネルで、「マウスダウンステート」を選択します。テキストツールが選択されている間に、コントロールパネルのカラーピッカーでカラースウォッチを選択し、マウスダウンテキストをさらに暗い色に設定します。

  5. ステートパネルで、「アクティブステート」を選択します。コントロールパネル「塗り」リンクをクリックし、塗りメニューを開きます。

  6. 塗りメニューで、カラーピッカーをクリックして塗りのカラーを「なし」に設定します。画像セクションの横のフォルダーアイコンをクリックします。表示された読み込みダイアログボックスで、背景画像ファイル top-nav-over.png を参照して選択します。「選択」をクリックしてそのファイルを選択します。読み込みダイアログボックスは自動的に閉じます。

  7. 引き続き、塗りメニューで、「サイズ調整」オプションを「元のサイズ」に設定します。次に、「位置」セクションで 9 ドットの中心をクリックします。これにより、背景画像の塗りは、中央配置、塗りのカラーなし、元のファイルサイズで表示されます。任意の場所をクリックして、塗りメニューを閉じます。

    ボタンステートの定義
    メニューアイテムのアクティブステートを定義します。

    デフォルトのオプション、「編集をすべてに適用」が水平メニューウィジェットで有効になっているため、メニューラベルに加えたすべての変更がナビゲーションバーのすべてのボタンに自動的に適用されています。

  8. ファイル保存を選択して編集内容を保存します。「A-マスター」タブの X をクリックしてデザインビューのページを閉じて、プランビューに戻ります。すべてのページサムネールが更新され、マスターページに追加したコンテンツが含まれています。

    注意:

    ヘッダーとフッター領域のガイドはサイトのマスターページのみで編集できます。ページのヘッダーまたはフッターのサイズを編集するには、マスターページをダブルクリックしてデザインビューで開き、ガイドの位置を変更します。

モバイルメニューの作成

Adobe Muse では、サンドイッチメニューまたはモバイルメニューを作成することもできます。この種類のメニューを作成した場合、メインメニューの上にマウスを置くと、ドロップダウンサブメニューが表示されます。このタイプのメニューを作成するには、「コンポジションウィジェットを使用したサブメニューの作成」を参照してください。

メニューからのページの除外

プランビューでサイトの新しいトップレベルのページを作成するたびに、Adobe Muse が自動的にページをメニューに追加します。ただし、訪問者がアクセスできるようにする前にページをテストする場合や、特定のページを非表示にする場合があります。このような場合、Adobe Muse では、ナビゲーションから特定のページを除外して、メニューウィジェットのメニュー項目としてこれらのページが表示されないようにすることができます。

メニューウィジェットからページを除外するには、次の手順を実行します。

  1. サイトのサイトマップが既に作成されているという前提で、Adobe Muse のプランビューに移動します。この手順では、ホーム、ポートフォリオ、マイストーリー、連絡先、製品を含むページがサイトマップにあると想定します。

    プランビューでのサイトマップの表示
    プランビューでのサイトマップの表示

    マスターページに移動し、メニューウィジェットをドラッグすると、すべてのページがメニューの一部として含まれていることがわかります。

  2. 特定のページを除外するには プランビューで除外するページを右クリックします。メニューオプションメニューに含めないをクリックします。

    例えば、製品ページを除外する場合は、「製品」を右クリックします。次に、メニューオプション/メニューに含めないを選択します。

    メニューウィジェットからの特定のページの除外
    メニューウィジェットからの特定のページの除外

    ここで、マスターページに戻ってメニューを表示すると、メニューウィジェットからその製品が削除されていることがわかります。

    注意:

    メニュー全体を削除するには、メニューウィジェットを追加したページに移動します。ウィジェットを選択し、「削除」を押します。

    リンクなしでメニュー項目を表示するシナリオでは、プランビューで特定のページを右クリックします。メニューオプションハイパーリンクなしでページを含めるを選択します。

    このオプションは、Web サイトの作成中の様々な用途に適しています。例えば、ロールオーバー製品ページで、サイトの訪問者が製品カテゴリのみをクリックし、メインの製品ラベルはクリックしないようにする場合は、このオプションを使用できます。

メニューウィジェットの使用

メニューウィジェットの使用
Brian Wood 司会によるこのビデオでは、ページにメニューウィジェットを挿入する方法について学びます。
Adobe Press - Peachpit

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

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