In-Browser Editing を使用すると、Web ブラウザーでサイトのコンテンツを簡単に更新できます。Web サイトを稼働中に変更する必要がある場合も、クライアントやサイト協力者に自分のコンテンツを簡単に編集できる機能を提供したい場合でも、In-Browser Editing があればスムーズに実行できます。

In-Browser Editing を使って、何を編集できますか?

In-Browser Editing ではテキストコンテンツの編集とすべての画像の入れ替えができますが、以下の項目は例外です。

  • マスターページのコンテンツ
  • 縦書きテキスト
  • 長方形の背景塗りとしての画像の集合、画像フレーム、およびウィジェット
  • スライドショーのカウンター
  • フォーム送信ボタン
  • 動的に生成されるメニューラベル(「手動」設定されていないメニューウィジェット)
  • ラスタライズされるページアイテム:これには角丸、べベル付きエッジ、光彩(内側)、または回転が適用された画像、システムフォントを使用したテキストフレーム、効果を適用済みの回転されたテキストフレームなどがあります。

注意:

テキストコンテンツは編集可能ですが、テキストの書式は変更できません。画像は入れ替えのみ可能で、追加や削除はできません。

Adobe Muse での In-Browser Editing の有効化

作業を開始する前に、サイトプロパティウィンドウで In-Browser Editing が有効になっていることを確認します。

  1. ファイル/サイトプロパティをクリックします。「詳細」タブをクリックして、「In-Browser Editing」オプションが有効になっていることを確認します。

    サイトプロパティ
  2. サイトを FTP ホストにアップロードします。

    ファイルFTP ホストにアップロードを選択して、Adobe Muse に組み込まれている FTP ホストへのアップロード機能を使用します。手順については、FTP ホストへのアップロードを参照してください。

    FTP アップロード後に .muse ファイルを保存して、In-Browser Editing を使用して行った変更を後でサイトと同期できるようにします。

In-Browser Editing へのサインイン

次のセクションでは、In-Browser Editing を使って、Adobe Muse サイトをアップデートするための手順を説明します。

In-Browser Editing を使って、Adobe Muse Web サイトの内容を編集する方法については、以下を参照してください。  

  1. https://inbrowserediting.adobe.com にアクセスし、編集するサイトのドメイン名(URL)を入力します。

    In-Browser Editing

    注意:

    HTTPS プロトコル経由(HTTP ではなく)でのみ In-browser Editing サイトにアクセスしてください。これにより、セキュリティ保護された接続で認証情報を入力してログイン後、In-browser Editing で Web サイトの変更ができます。

  2. ホスティング認証情報を使用してログインします。

    サインインウィンドウ

    サインインすると、サイトのホームページと共に、上部に In-browser Editing のナビゲーションバーが表示されます。

    In-Browser Editing ホームページ
    In-Browser Editing にサインインすると、ホームページが表示されます。

In-Browser Editing を使用したテキストコンテンツと画像の編集

In-Browser Editing を使って、ブラウザー上でテキストを直接編集できます。また、テキストだけでなく、画像、テキスト内の画像、およびハイパーリンクも編集できます。

Adobe Muse Web サイトの内容をすばやく編集する方法については、以下を参照してください。

テキストの編集

In-Browser Editing を使って、ブラウザー上でテキストを簡単に編集できます。In-Browser Editing にログインした後、削除するテキストを選択して、新しいテキストを入力するだけです。

入力が終了したら、同じブラウザーで変更内容がどのように表示されるかを直ちに確認できます。サイトがレスポンシブの場合、すべてのブレークポイントで変更をプレビューします。代替レイアウトを使ってサイトを作成した場合、デバイスごとに変更をプレビューします。

テキストインラインの編集
In-Browser Editing を使用したテキストインラインの編集

画像およびテキスト内画像の編集

  1. 編集する画像をクリックするか、テキストフレームをクリックして編集する画像をクリックします。

  2. 「画像を編集」をクリックします。

    In-Browser Editing を使用した画像の編集
    In-Browser Editing を使用した画像の編集

    テキスト内画像の編集
    テキストフレーム内画像の編集

  3. 開いたポップアップボックスから、サイトに関連付けられている既存のファイルを選択します。その他に、「写真をアップロード」をクリックして、コンピューターから画像をアップロードすることもできます。

    アップロードする画像を選択
    置換する画像を選択

    このダイアログボックスには、画像に関連付けられているツールヒントテキストを追加または編集するオプションも用意されています。

  4. 写真を選択してから、 をクリックします。

    古い画像が、選択した画像に置き換えられます。

    画像を入れ替える場合、選択した新しい画像は以前の画像が占めていた領域に合うようにサイズが変更されます。新しい画像の縦横比が以前の画像と異なっている場合、以前の画像が占めていた領域全体には収まりません。これは、ページレイアウトの外観に影響する可能性があります。そのため、既存の画像は、寸法が同じか、幅と高さの比が同じでサイズがより大きい画像とのみ置換することをお勧めします。

    サイトの解像度が HiDPI に設定されており、入れ替える画像に 2x に十分なデータがある場合、In-Browser Editing は 1x と 2x の両バージョンを保存して HiDPI ディスプレイでの表示に備えます。HiDPI 用アセットの作成の詳細については、Muse deno HiDPI Web サイトの作成を参照してください。

Adobe Muse サイトでのハイパーリンクの挿入と編集

外部リンク、宛先、Web サイトの他のページへのリンク、ダウンロードファイルなど、Web ページで複数の種類のハイパーリンクを編集できます。In-Browser Editing を使用したハイパーリンクの編集については、以下を参照してください。

In-Browser Editing を使用したリンクの挿入

In-Browser Editing で「リンクを追加」ボタンを使って、ハイパーリンクの追加または挿入が実行できます。Adobe Muse サイトのリンクの挿入または更新を行うには、次の手順に従ってください。

  1. リンクを追加するテキストをクリックします。

  2. 「リンクを追加」をクリックします。

    「リンクを挿入」オプション
    In-Browser Editing を使ったハイパーリンクの挿入

  3. リンクを挿入ダイアログで、ターゲットの次のタイプのいずれかをリンクに追加します。

    • ページ:「ページ」タブを選択して、ページを選択ドロップダウンリストから、リンクするページを選択します。
    • 外部:「外部」タブを選択し、「外部リンク」フィールドに機能 URL を入力します。
    • 電話番号:「電話番号」タブを選択して、電話番号を入力します。
    • ファイル:「ファイル」タブを選択して、既存のファイルを選択するか、アップロードするファイルを参照します。
    • 電子メールアドレス:「電子メールアドレス」タブを選択して、目的の電子メールアドレスを入力します。
    オプションで、ターゲットタイプのツールヒントを入力したり、ユーザーが新しいウィンドウにリンクを開けるようにすることができます。
    リンクを挿入ダイアログボックス
    In-Browser Editing のリンクを挿入ダイアログボックス

  4. 「OK」をクリックしてハイパーリンクを挿入します。

外部リンクの編集

  1. 編集するハイパーリンクをクリックします。

  2. ポップアップからペン記号をクリックします。

    「リンクを編集」ボタン
    In-Browser Editing で外部リンクを編集します。

  3. リンクを編集ダイアログで、「外部」タブを選択します。完全な機能 URL を入力します。URL が分割されておらず、目的の Web ページが公開されてアクセスできることを確認します。

    リンクを編集ダイアログの「外部」タブ
    ハイパーリンクの編集ダイアログボックスに、新しいリンクを入力します。

  4. オプションで、以下の詳細情報を入力することもできます。

    • ツールヒント:目的のページのわかりやすい説明を入力します。
    • 新しいウィンドウで開く:必要に応じて、リンクを新しいウィンドウで開きます。
  5. 「OK」をクリックして終了します。

    手順 1 ~ 4 に従い、テキスト、テキストフレームにネストしているテキスト、スライドショーウィジェット内のラベル、カスタムリンク、画像などに適用する外部ハイパーリンクを編集します。

内部リンクを編集して、別のページまたはアンカーを指示

  1. 編集するハイパーリンクをクリックします。

  2. リンクを介して表示されたポップアップから、ペン記号をクリックします。

    内部リンクの編集
    内部リンクを編集して別のページを指示

  3. リンクの編集ダイアログで、「ページ」タブを選択します。ページを選択またはアンカードロップダウンリストから、リンクする内部ページまたはアンカーを選択します。

    ページを選択した状態のリンクの編集ダイアログ
    ページへの内部リンクの編集

    アンカーは、ページ名に続く「アンカー」という単語で示されます。同じページまたは Web サイトの別のページのアンカーにリンクできます。

  4. オプションで、以下の詳細情報を入力することもできます。

    • ツールヒント:目的のページのわかりやすい説明を入力します。
    • 新しいウィンドウで開く:必要に応じて、リンクを新しいウィンドウで開きます。
  5. 「OK」をクリックして終了します。

ハイパーリンクを編集して電話番号を変更

  1. 編集するリンクをクリックします。

  2. リンクを介して表示されたポップアップから、ペン記号をクリックします。

    ペン記号をクリック
    ペン記号をクリック

  3. リンクを編集ダイアログボックスで、「電話番号」タブを選択します。「電話番号」フィールドで新しい電話番号を指定します。

    電話番号の選択
    電話番号へのリンクの編集

  4. オプションで、以下の詳細情報を入力することもできます。

    • ツールヒント:ツールヒントのわかりやすい説明を入力します。
    • 新しいウィンドウで開く:必要に応じて、リンクを新しいウィンドウで開きます。
  5. 「OK」をクリックして終了します。

ハイパーリンクを編集して電子メールアドレスを更新

  1. 編集するハイパーリンクをクリックすると、リンクが編集可能であることを示すポップアップが表示されます。

  2. ペン記号をクリックします。

    ペン記号をクリック
    ペン記号をクリックします。

  3. リンクを編集ダイアログボックスで、「電子メールアドレス」タブを選択します。「電子メールアドレス」フィールドで新しい電子メールアドレスを指定します。

    電子メールアドレスの選択
    電子メールへのハイパーリンクの編集

  4. オプションで、以下の詳細情報を入力することもできます。

    • ツールヒント:ツールヒントのわかりやすい説明を入力します。
    • 新しいウィンドウで開く:必要に応じて、リンクを新しいウィンドウで開きます。
  5. 「OK」をクリックして終了します。

In-Browser Editing を使用したダウンロードファイルの編集

Web デザインの一般的な習慣として、PDF、インストーラー、ビデオ、オーディオファイルなどのダウンロード可能なファイルにリンクします。

In-Browser Editing を使用して、Adobe Muse サイトでテキスト、シェイプ、画像の形式でハイパーリンクのターゲットとしてファイルを設定できます。ファイルの最大サイズが 50MB を超えていないことを確認します。

In-Browser Editing を使って、ファイルをアップロードできます。ファイルをアップロードする場合は、ファイル名を一意にする必要があります。既存のファイルと同じ名前のファイルをアップロードすると、ファイルの名前を変更するように求められます。

  1. 編集するリンクをクリックします。

  2. 表示されたポップアップから、ペン記号をクリックします。

    ペン記号をクリック
    ペン記号をクリック

  3. リンクの編集ダイアログで、「ファイル」タブを選択します。

    ファイルを選択した状態のリンクの編集ダイアログ
    ダウンロードファイルのアップロードとアップデート

  4. ドロップダウンリストから既存のファイルを選択するか、「参照」をクリックしてナビゲートし、コンピューターでファイルを開きます。

  5. 以下の詳細情報の入力を選択することもできます。

    • ツールヒント:ツールヒントのわかりやすい説明を入力します。
    • 新しいウィンドウで開く:必要に応じて、リンクを新しいウィンドウで開きます。
  6. 「OK」をクリックして終了します。

変更の取り消しまたはやり直し

内容、画像、リンクをアップデートするたびに、直ちに変更を取り消しまたはやり直すことができます。

  • 変更を取り消すには、 をクリックします。
  • 変更をやり直すには、 をクリックします。

すべての変更が適切であることを確認したら、他のブレークポイントやデバイスビューで変更をプレビューします。

変更のプレビューとパブリッシュ

In-Browser Editing を使って編集する場合は、ブラウザーで変更をプレビューすることができます。重要な点は、変更をパブリッシュする前に変更をプレビューすることです。

レスポンシブレイアウトを使ってサイトを作成した場合、ブレークポイントのドロップダウンリストを使って、変更をプレビューできます。

レスポンシブレイアウトの In-Browser Editing
レスポンシブレイアウトの In-Browser Editing プレビュー

各ブレークポイントを選択して、そのブレークポイントの変更をプレビューすることができます。これにより、アップデートしたレイアウトが対応するブラウザー幅で表示されるようになります。

一方、代替レイアウトを使ってサイトを作成した場合、デバイスドロップダウンリストを使って、変更をプレビューできます。ドロップダウンリストから、変更をプレビューするデバイスを選択します。

代替レイアウトのデバイスプレビューの表示
代替レイアウトの In-Browser Editing プレビュー

すべての変更が適切であることを確認したら、上部ナビゲーションバーの「パブリッシュ」をクリックして、変更を確定し、実際のサイトで確認します。満足できなかった場合、変更内容はいつでも破棄できます。破棄すると、サイトのコンテンツは前回パブリッシュしたときの状態にリセットされます。

In-Browser Editing の同期

In-Browser Editing を使用してライブサイトの変更を行うと、ローカルの .muse ファイルのコンテンツがライブサイトと同じではなくなります。

In-Browser Editing の結果を Muse ファイルと同期するには、以下の手順に従います。

  1. Adobe Muse を起動し、サイトの .muse ファイルを開きます。

  2. ライブサイトが変更されている旨の警告メッセージが表示されます。「レビュー」をクリックして、変更の確認およびマージウィンドウを開きます。

  3. 変更の確認およびマージインターフェイスでは各変更がハイライトされ、それぞれ確認できます。新しいコンテンツは緑でハイライトされ、削除されたアイテムは赤でマークされます。ライブサイトでの変更をローカル .muse ファイルと比較するには、「ページのプレビュー」チェックボックスのオン/オフを切り替えます。

  4. ドロップダウンリストオプション(「マージしない」または「Muse にマージ」)を使用して、特定の変更またはすべての変更を拒否するか、受け入れます。

    注意:

    「マージしない」を選択すると、.muse ファイルを次回アップロードするときに、ライブサイトに適用された変更を上書きすることになります。

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

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