注意:

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

この記事では、Adobe Muse でハイパーリンクを使用する方法について学びます。ハイパーリンクを使用することで、外部 Web サイト、ダウンロード可能ファイル、電子メールアドレスなどにリンクできます。ダウンロード可能なファイルは、サイト訪問者と共有したい PDF、DOC、PPT、TXT、リッチメディア、または他のタイプですが、Adobe Muse インターフェイスでの挿入には現在対応していません。Adobe Muse ホストアカウントに現在アップロードしているファイルにリンクできるばかりでなく、サードパーティの Web サイトでホストされているファイルにリンクすることもできます。

ビデオ | ハイパーリンクの作成方法

ビデオ | ハイパーリンクの作成方法
Adobe Press

ページへのアンカーリンクの追加

このセクションでは、メニュー項目をアンカー領域の 2 つの要素に接続して、手動メニューにアンカーリンクを追加する方法について説明します。次の手順に従います。

  1. ページ上の任意の箇所をクリックして、ページを選択します(選択範囲インジケーターに「Page」という文字が表示されます)。次に、ウィジェットメニュー項目(ウィジェットコンテナ)を 2 回クリックします。1 回目のクリックで手動メニューウィジェット全体が選択され、2 回目のクリックでメニュー項目が選択されます。選択範囲インジケーターに「メニュー項目」という文字が表示されます。
  2. ハイパーリンクメニューをクリックし、サイトのページとアンカータグの一覧を表示します。「デスクトップ」セクションで、適切なページを見つけて、その真下に作成したアンカータグのリストがあることを確認します。適切なアンカータグを選択し、メニュー項目にリンクします。
アンカーへのリンク
リンクメニューを使用して Breakfast アンカーリンクを Breakfast ボタンに適用します。

  1. アンカーリンクを追加するには、手順 2 を繰り返します。
  2. ファイルサイトプロパティを選択します。「レイアウト」タブで、「アンカーリンクのアクティブステートを有効化」チェックボックスがオンになっていることを確認します。このオプションは、デフォルトではすべての新しいサイトで有効になりますが、古いサイトを編集している場合に、このチェックボックスをオンにすることが求められることもあります。
  3. ファイルブラウザーでページをプレビューを選択します。

リンクをクリックして別のページ領域を表示すると、一致するアクティブステートがナビゲーションメニューに表示されるのがわかります。このサイト機能は、訪問者による移動を容易にし、どのセクションを表示しているか理解するのに役立ちます。ブラウザーを終了して Adobe Muse に戻ります。

ページを上下にスクロールすると、ページ内のコードがどのようにして各アンカータグの場所を検出し、ページ内の各領域を移動するに伴い、手動メニューのアクティブステートを更新するか確認できます。この方法は、垂直方向と水平方向の両方にスクロールするページに適用できます。

注意:各領域にジャンプするアンカータグを配置するスペースを確保するため、ページの高さまたは幅が十分にあることを確認する必要があります。ページ領域が非常に近接しており、スクロールしなくてもすべてのコンテンツがブラウザーウィンドウ内に収まる場合、アンカータグが次の領域にジャンプするようには見えません。

  1. ブラウザーを終了して Adobe Muse に戻ります。

次のセクションでは、ダウンロードリンクの追加方法を説明します。このリンクにより、サイト利用者は、PDF、DOC、MP3、MOV、PSD、高解像度の JPEG ファイルなどのファイル形式をダウンロードできます。

ヒント:Web サイトプロジェクトで他のデザイナーと共同で作業する場合、.muse ソースファイルへのリンクを作成することで、チームメンバーは Web サイトからファイルを直接ダウンロードできます。

アンカータグとアクティブステートの使用

Web ページにアンカー領域を作成することで、ページの異なるセクションを簡単に視覚的に分離できます。これらの各セクションには、ページ上を簡単にナビゲーションできるように設計されているアンカーリンクを使って簡単にアクセスできます。

完成したデザインでは、通常、Web ページにアンカーリンクが含まれるので、訪問者は対応するメニューを表示する領域に、垂直方向にジャンプできるようになります。アンカータグを追加するのは、ページの任意の場所にマーカーを付けるようなものだと考えてください。利用者がそのアンカーへのリンクをクリックすると、リンクは長いページをスクロールして、マーカーが配置された特定のセクションまでジャンプします。

  1. 上部のナビゲーション領域にあるアンカーボタンをクリックして、アンカーツールを読み込みます。
「アンカー」ボタンをクリック
ワークスペースの上部にあるアンカーボタンをクリックして、最初のアンカー用のプレースガンを読み込みます。

  1. ヘッダー領域にある最上位レベルのサイトナビゲーションの上にある、ページの最上部を 1 回クリックします。必要に応じて、ヘッダーの長方形が邪魔にならないように一時的に移動することができます。ヘッダーのコンテンツを移動した場合は、後で元の場所に必ず戻します。
  2. 表示されるアンカー名を変更ダイアログボックスで、アンカー名を入力します(図 を参照)。
アンカー名を入力
ページの上部にある、breakfast メニューのアンカーに名前を付けます。

  1. 手順 1~3 を繰り返して、アンカー領域を定義して、アンカーリンクを追加します。

注意:

(ページの上部にある)最初のアンカーとリンクされたコンテンツ(次のセクションで追加する手動メニューウィジェット)の最初のインスタンスとの間隔(ピクセル)によって、各領域でアクティブステートを変更する「アクティブ領域」が設定されます。例えば、最初のアンカーをページの一番上に配置し、メニューウィジェットをアンカーの 120 ピクセル下に配置すると、訪問者がページをスクロールダウンしてメニューを表示する前に、次の領域のメニュー項目のアクティブステートにより 120 ピクセルも更新されます。

次の手順で手動のメニューウィジェットを追加した後、ボタンをアンカータグにリンクして、訪問者がページの下方向にジャンプして各メニューを読めるようにナビゲーションを作成します。

ダウンロード可能ファイルへのリンクの追加

  1. デザインビューでページを編集する場合、文字ツールを使用して Breakfast メニューのテキストフレームの右上隅近くに、新しいテキストフレームを作成します。「メニューのダウンロード」という言葉を入力します。
  2. そのテキストフレームが選択されたままの状態で、テキストパネルを使用して次の設定を適用します。
    • Web フォント:Kaushan Script(または希望する任意のスクリプトフォント)
    • フォントサイズ:14
    • カラー:#EEE5C4(パート 3 で、このスウォッチカラーを「cream-menu」と名前変更しました)
    • 行送り:57%
    • 整列:中央揃え
  3. 塗りメニューを使用して、塗りのカラーをなしに設定します。「画像」セクションの横にあるフォルダーをクリックして、サンプルファイルフォルダー内にある download-bg.png という名前のファイルを参照して選択し、背景画像を設定します。サイズ調整メニューが「元のサイズ」に設定され、位置が中央であることを確認します。
  1. 塗りメニュー以外の場所をクリックし、メニューを閉じます。必要に応じて、選択ツールを使用してテキストフレームのサイズを変更して、Breakfast メニューテキストフレームの右上隅が中央にくるように位置を変更します。
  1. そのテキストフレームが選択されたままの状態で、コントロールパネルのリンクメニューを使用して、「ファイルへリンク」を選択します。表示される読み込みダイアログボックスで、ファイルを参照して選択し、「開く」をクリックして選択します。

注意:ファイルへリンク機能を使用してファイルを参照して選択すると、そのファイルはサイトアセットの 1 つとなり、サイトがパブリッシュされるとアップロードされ、サイトが書き出されるとサイトファイルに含められます。サイトからリンクするすべてのファイルを、サイトで使用している他の画像ファイルとともに、サイトのローカルフォルダーにコピーしておくことをお勧めします。

これで PDF ファイルへのリンクが追加されました。アセットパネルには、ファイルが Web サイトアセットの 1 つとしてリストされているのが確認できます。

  1. 選択ツールを使用して、テキストフレームを選択します。ダウンロードメニューテキストフレームをコピーしてペーストし、Lunch メニューの右上隅に配置します。この手順をさらに 2 回繰り返し、コピーを作成して Dinner および Dessert メニューの右上隅に配置します。

実際のプロジェクトでは、4 つの異なるメニューファイルにリンクして、利用者がメニューの表示および印刷に利用できる 4 つの異なるダウンロード可能な PDF ファイルを提供できます。このチュートリアルの目的上、「ダウンロード」ボタンは各ページ領域内にある同じ PDF ファイルにリンクされます。

  1. ファイル/ブラウザーでページをプレビューを選択します。水平メニューのメニュー項目の 1 つをクリックして、ページにあるそのメニューにジャンプします。Dinner および Dessert メニューを表示するために、スクロールダウンすると、他のページコンテンツの上部にヘッダーが表示されるのがわかります。このビヘイビアーが発生するのは、food ページが前面マスターページを使用し、food ページのヘッダーコンテンツが前面に移動するからです。
  2. ダウンロードメニューリンクをクリックして、PDF ファイルをコンピューターにダウンロードして確認してください。

ご使用のブラウザーとその設定に応じて、ビヘイビアーが異なります。PDF をブラウザーウィンドウ内で表示するブラウザーもあれば、単に PDF ファイルをデスクトップにダウンロードするブラウザーもあります。後者の場合は Acrobat Pro または Acrobat Reader を使用してファイルを開きます。

電子メールアドレスへのリンクの作成

Adobe Muse を以前からずっと使用している場合、最近、リンクメニューがセクションごとに再構成され、リンクできるページ名や項目が見つけやすくなったことにお気付きでしょう。このセクションでは、リンクメニューの構成、およびメニューリストで項目をフィルターする方法について説明します。また、電子メールリンクの追加方法についても説明します。

  1. リンクメニューの下向き矢印をクリックし、表示される一覧を確認します。
電子メールアドレスへのリンク
展開したビューにリンクメニューのリストが表示されます。

  1. リンクメニューはセクションで構成されています。「最近使用したリンク」には、サイトに追加された外部 Web サイトへのリンクがすべて表示されます。外部 Web サイトにリンクするために、「リンク」フィールドに直接 URL を入力することができます。
  2. 「デスクトップ」セクションには現在のサイトのページがあります。food ページに追加したアンカータグが food ページの下にアルファベット順にリストされています。このことは、サイトの複数ページで同じ名前のアンカーが作成でき、リンクを設定するときに、これらを容易に識別できることを意味します。このサンプルサイトには、デスクトップレイアウトしかありませんが、サイトに携帯電話またはタブレット用の代替レイアウトがある場合は、これらのセクションがその対応するページセットとともに表示されます。
  3. 最後の「ファイル」セクションには、ファイルへリンク機能、および現在のサイトに追加されたダウンロード可能ファイルがすべて表示されます。KatiesCafeMenu.pdf へのリンクを最近追加したため、そのファイル名がこのセクションにリストされており、サイトの複数のページの共通アセットに容易に再リンクできます。
  4. 電子メールリンクをクリックすると、利用者の電子メールクライアントが開き、宛先フィールドに電子メールアドレスが挿入された状態で、新規メールが開きます。電子メールリンクを追加するには、リンクメニューフィールドに次のように、mailto: プレフィックスを付けた電子メールアドレスを入力します。

    mailto:email@address.com

  5. リンクメニュー内の項目リストは場合によって、非常に長くなり、大規模な Web サイトではナビゲーションが困難になることがあります。特定のページ、アンカー、ファイル、または外部 URL へのリンクを探すには、リンクメニューフィールドでリンクの最初の数文字を入力すると、一致した項目が表示されます。これにより、リストをすばやくフィルターして、リンクしたい項目を見つけることができます。

外部 Web サイトへのリンクの追加

ソーシャルメディアアイコンボタンが配置されたので、これらのソーシャルメディアネットワークサイトへの外部リンクを追加します。

  1. Facebook アイコンを選択し、次のような Katie's Cafe の Facebook ページへのリンクをリンクメニューフィールドに入力(またはコピー/ペースト)します。http://www.facebook.com/KatiesCafeSF。
  2. Google+ アイコンを選択し、次の Google+ 上の Katie's Cafe ページへのリンクを入力(またはコピー/ペースト)します。https://plus.google.com/u/1/117800212967830061444/posts。
  3. Twitter アイコンを選択し、次の Twitter 上の Katie's Cafe ページへのリンクを入力(またはコピー/ペースト)します。http://twitter.com/katiescafesf。
  4. Facebook アイコンを再びクリックして選択します。青い下線付きの言葉をクリックします。リンクはリンクメニューの左側にあります。表示されるダイアログボックスで、「新規ウィンドウまたは新規タブでリンクを開く」チェックボックスをオンにします。
  5. 手順 4 を繰り返し、Google+ および Twitter リンクも新規ブラウザーウィンドウで開くように設定します。

これは一般的な Web デザイン方法です。同じサイト内の他のページを開くリンクは同じブラウザーウィンドウで開き(これは Adobe Muse では初期設定です)、他の外部の Web サイトのページへのリンクは、新規ウィンドウまたは新規タブで開きます。

リンクの追加を準備するときのファイルの URL の識別

Adobe Muse サイトのページにリンクを追加する前にリンクを準備するには、ブラウザーを使用してライブのアップロード済みのファイルにアクセスします。次の手順に従います。

  1. ご使用のブラウザーを起動します。
  2. アップロードされた依存ファイルを含んでいるユーザーのサイトまたはサードパーティのサイトを参照します。Google などの検索エンジンを使用するか、ブラウザーのアドレスバーにサイトのドメイン名を直接入力することができます。
アドレスバーを参照する
ブラウザーのアドレスバーにサイトのドメイン名を直接入力することができます。

  1. 目的のサイトのホームページにアクセスした後、サイトのナビゲーションをクリックするか、ブラウザーのアドレスバーに完全な URL を入力して特定の依存ファイルにアクセスできます。この手順を終了したら、アクセスしているファイルがブラウザーで表示、再生、またはダウンロードされます。
  2. 正しい URL を入力してアップロードされたファイルにアクセスしたら、ブラウザーのアドレスバーの内容全体を選択して、編集/コピーを選択します。また、キーボードショートカットの Command+C キー(Mac)または Control+C キー(Windows)を使用することもできます。
ブラウザーのアドレスバーのアドレスのコピー
ブラウザーのアドレスバーからの URL のコピー

この時点で、依存ファイルへの URL はクリップボードにコピーされています。次のセクションで説明しているように、依存ファイルの URL をハイパーリンクフィールド内にペーストするまで他のアイテムをコピーしないように注意してください。

外部ファイルへのリンクの作成

依存ファイルを正常にアップロードし、ブラウザーを介してアクセスし、ファイルの URL をコピーしたら、最後に残った手順は Adobe Muse サイトのページにリンクを作成することです。次の手順に従います。

  1. Adobe Muse を起動します。ページサムネールをダブルクリックし、ページをデザインビューで開きます。
  2. 依存ファイルをダウンロードまたはアクセスするために訪問者がクリックする「ボタン」にする、一部のテキスト、配置されている画像、または矩形シェイプを選択します。
  3. テキストまたはページエレメントを選択した状態で、「ハイパーリンク」フィールドドロップダウンをクリックし、前にコピーした依存ファイルへの URL(絶対パス)をペーストします。

リンクを設定して新しいブラウザーウィンドウで開く場合は、ハイパーリンクウィンドウのすぐ左にあるハイパーリンクラベルをクリックします。表示されたダイアログボックスで、下に示すように「新規ウィンドウまたは新規タブでリンクを開く」オプションの横にあるチェックボックスをオンにします。

ハイパーリンクのオプション
「新規ウィンドウまたは新規タブでリンクを開く」オプションを選択

ページを保存し、変更をサイトにパブリッシュします。

ブラウザーでページにアクセスします。リンクされたテキストまたはボタンをクリックして、リンクが想定どおりに機能することを確認します。

注意:

Chrome、Safari、および Firefox など、複数の異なるブラウザーでサイトへのアクセスを試して、ライブサイトのリンクをクリックして依存ファイルにアクセスしたときに様々なブラウザーが問題なく動作するかどうかを確認できます。

Adobe Muse の使用に関するヒントについては、Adobe Muse ヘルプとチュートリアルページを、ライブおよび記録されているウェビナーについては、Adobe Muse イベントページを参照してください。

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

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