Adobe Muse を起動して、設定するサイトを開きます。
最終更新日 :
Apr 27, 2021 10:52:20 PM GMT
サイト所有者のために Web サイトをデザインする場合、まず要望されることに、サイト所有者自身がサイトコンテンツを更新できるシステムの設定があります。デザイナーにとっても、自分のワークステーションから離れているときにサイトの修正が必要になれば、その場で変更できて大変便利です。
Muse には、In-Browser Editing と呼ばれる機能が搭載され、これにより、サイト所有者とデザイナーのチームメンバーが Business Catalyst の管理インターフェイスを使用してテキストコンテンツや画像コンテンツを変更できるようになりましした。ブラウザー内編集を行うユーザーが Adobe Muse をインストールする必要はありません。
ブラウザー内編集も簡単に使用できます。編集をブラウザー上で行うので、Web デザインの経験がまったくないユーザーでも変更が可能です。必要なものは、編集アクセス権だけです。
この記事では、招待されたサイトユーザーが Adobe Muse サイトを更新できるように、Adobe Muse サイトを設定してブラウザー内編集を有効にする方法を学びます。In-Browser Editing インターフェイスの使用手順の概略がわかりますので、他のユーザーの学習を補助するときにも役立ちます。最後に、In-Browser Editing インターフェイスを使用してライブサイトに変更を適用した後に、.muse ファイルをこの最新バージョンと同期する方法を説明します。
In-Browser Editing を使用して編集できるコンテンツ
| コンテンツ | 編集可能？ | リンク先を表示 |
|---|---|---|
| 横書き文字 | はい | いいえ |
| 画像フレーム | はい | はい |
| 縦書き文字 | いいえ | いいえ |
| 画像 - 背景の塗り（長方形、画像フレーム、ウィジェット） | いいえ | いいえ |
| スライドショーのカウンター | いいえ | いいえ |
| フォーム送信ボタン | いいえ | いいえ |
| 動的メニューラベル（「手動」に設定されていないメニューウィジェット） | いいえ | いいえ |
| ラスタライズされるページアイテム（角丸、べベル付きエッジ、光彩（内側）、または回転が適用された、システムフォントを使用したテキストフレーム、および効果を適用済みの回転されたテキストフレーム）。 | いいえ | いいえ |
| ハイパーリンクされたテキスト | はい | はい |
| テキストラベル - アコーディオンウィジェット | はい | はい |
| テキストラベル - タブ付きパネルウィジェット | はい | はい |
| テキストラベル - 手動メニューウィジェット | はい | はい |
ボタン - スライドショーウィジェット
|
はい | はい |
| ボタン - コンポジションウィジェット | はい | はい |
スライドショーのサムネール画像 |
はい | はい |
| コンポジションのウィジェットの「トリガー」領域内にあるテキストと画像のフレーム | はい | はい |
ブラウザー内編集の設定
ブラウザー内編集機能の設定プロセスは 2 段階です。まず、サイトプロパティで In-Browser Editing の設定を有効にして、サイトをアドビがホストするサーバーにパブリッシュします。次に、新規ユーザーをサイトに招待すると、そのユーザーが任意のブラウザーを使用して変更できるようになります。
先に述べたように、背景画像は In-Browser Editing では編集できません。非常に重要なのでサイト所有者が変更できないようにする画像がサイトに含まれている場合は、それらの画像が背景画像として追加されていることを確認した後に、In-Browser Editing を有効にして、編集アクセス権を付与してください。
注意：
In-Browser Editing を使用するには、トライアル Web サイトまたはライブ Web サイトが Adobe Business Catalyst ホスティングサーバー上でホスティングされている必要があります。
-
「サイトプロパティ」ダイアログボックスの「In-Browser Editing を使用」チェックボックスをオンにします。 -
ファイル／サイトプロパティをクリックします。「詳細」タブをクリックして、「In-Browser Editing を使用」オプションが有効になっていることを確認します。
有効になっていない場合は、「In-Browser Editing を使用」チェックボックスをオンにします。
-
「OK」 をクリックして「サイトプロパティ」ダイアログボックスを閉じます。
-
Adobe Muse の上部ナビゲーションバーで、パブリッシュ／Business Catalyst をクリックします。
Business Catalyst を使用したサイトのパブリッシュ 「パブリッシュ」ダイアログボックスで目的のオプションを選択し、次に「パブリッシュ」をクリックしてすべてのサイトファイルを Adobe Business Catalyst ホスティングサーバーにアップロードします。
注意：新規トライアルサイトを作成するか、カスタムドメイン名を使用したライブサイトをアップロードできます。トライアルサイトでもライブサイトでも、アドビの Web サーバー上でホスティングされている限り、In-Browser Editing は有効です。
-
パブリッシュ操作が完了すると、「パブリッシュ」ダイアログボックスが更新され、In-Browser Editing ユーザーをサイトに含めるかどうかを確認するメッセージが表示されます。
ライブサイトを編集できるようにするには、ブラウザー内編集ユーザーをサイトに追加する必要があります。ユーザーのアカウントを作成するには、管理ユーザーインターフェイスを使用することになります。ユーザーのアカウントを作成した後、ユーザーはログインしてサイトの編集を開始できます。
このダイアログボックスでは、リンクまたは「OK」のどちらかをクリックできます。 -
「In-Browser Editing ユーザーを追加」リンクをクリックするか、「OK」をクリックしてダイアログボックスを閉じます。
この例では、「OK」をクリックします。
「In-Browser Editing ユーザーを追加」へのリンクをクリックすると、手順 9 で説明するものと同じインターフェイスが表示されます。
-
Adobe Muse で、手順 5 で説明されている「In-Browser Editing ユーザーを追加」リンクをクリックするか、ファイル／Business Catalyst サイトを管理を選択します。
サイトの Business Catalyst インターフェイスが新しいブラウザーウィンドウで表示されます。
ブラウザー内編集ユーザーをサイトに追加するオプションを選択します。 注意：サイトのパブリッシュが完了したら、「管理」ボタンをクリックし、次に、他の更新を行ってサイトを管理している間に管理ユーザーを招待します。
-
Business Catalyst ユーザーインターフェイスの左側のナビゲーションペインで、サイトの設定／管理ユーザーをクリックします。
-
管理ユーザーを招待をクリックします。
サイトの管理ユーザーインターフェイスで新規管理ユーザーを招待します。 「管理ユーザー」セクションが更新されて、新しいインターフェイスになります。
-
表示されるフィールドに、新規ユーザーの電子メールアドレス、姓名を入力します。必要に応じて、任意に携帯電話番号を入力します。ユーザーの役割メニューを「ユーザー」に設定します。
ユーザーの名前と電子メールアドレスを表示されたフィールドに入力します。 -
「招待」をクリックして、この新規ユーザーを Adobe Muse サイトに追加します。
注意：上記の情報を送信すると、ログイン情報が招待したユーザーに電子メールで自動的に送信されます。電子メールを受け取ったユーザーは、記載されているリンクをクリックして一意のパスワードを設定します。ユーザーが自分のアカウントのパスワードを作成すると、任意の Web ブラウザーを使用してサイト編集機能にログインできます。
In-browser Editing を使用したサイトの更新
このセクションでは、アクセス権を付与されたユーザーが Adobe Muse サイトを更新する手順を示します。この手順のコピーを他のユーザーに送信する場合は、ダウンロードできます。
-
ブラウザーを開き、次のいずれかを入力します。
- my-site.businesscatalyst.com/admin（トライアルサイト）
- my-site.com/admin （ライブサイト）
-
電子メールアドレスとパスワードを入力して、Business Catalyst にログインします。
ログインの詳細が電子メールで送信されています。
任意のブラウザーを使用してサイトのアカウントにログインします。 -
「編集」ボタンをクリックすると、編集インターフェイスにサイトが表示されます。
「編集」ボタンをクリックしてサイトの編集を開始します。 サイトのホームページが、ブラウザー内編集インターフェイスに読み込まれます。
In-Browser Editing を使用したテキストの編集
サイトに変更を加えるときは、ブラウザーウィンドウ内で作業していることを忘れないでください。現在のページから移動するか、ブラウザーウィンドウを閉じる前に、行った変更をパブリッシュすることが重要です。ただし、考えが変わって、変更を破棄する場合は別です。
以下の手順に従って、サイト上のテキストコンテンツを編集します。
-
Business Catalyst を使用してサイトにログインすると、テキストの周囲に青いオーバーレイが表示されます。テキストを選択または削除して、コンテンツの入力を開始します。
編集したいテキストを選択し、更新の入力を開始します。 テキストボックス内のテキストの上にカーソルを置くと、テキストに適用される書式が表示されます。デフォルトでは、テキストボックスに入力したあらゆるテキストに同じ書式が適用されます。
テキストの上にカーソルを置いたときに表示される書式を確認します。 -
変更した結果に満足できず、元のテキストに戻したい場合は、ページの上部にある元に戻すアイコンをクリックします。
元のテキストに戻すには、元に戻すアイコンをクリックします。 -
テキストの編集が完了したら、「パブリッシュ」をクリックします。
「パブリッシュ」ボタンをクリックすると、行った変更がライブになります。 編集インターフェイスで行った変更は、ページの上部にある「パブリッシュ」ボタンをクリックするまでライブ Web サイトには適用されません。何の変更もしないことにした場合は、ブラウザーウィンドウを閉じます。
ページ上に配置またはペーストされた画像の編集
In-Browser Editing を使用すると、サイト上の画像の一部を編集できますが、前面の画像として挿入されている場合に限ります。サイト上の画像が背景画像に設定されていると、編集できません。変更したい画像が編集できない場合は、サイトのデザイン担当者に連絡します。
-
編集する画像を選択します。
画像の横に「画像を編集」ボタンが表示されます。
編集可能な画像の上にカーソルを置くと、「画像を編集」ボタンが表示されます。 -
「画像を編集」をクリックします。
プロジェクトで使用されているすべてのアセットを示すポップアップが表示されます。既存のアセットから画像を選択するか、「写真をアップロード」ボタンを使用して、コンピューターから新しい画像をアップロードします。
画像編集インターフェイスを使用して、既存の画像を新しい画像に入れ替えます。 「写真をアップロード」オプションを選択すると、コンピューター上で選択した画像がサイトに自動的にアップロードされます。選択したファイルが、Web サイトをホスティングしている同じサーバーにアップロードされます。
-
必要に応じて、「画像ツールヒント」フィールドにツールヒントを入力できます。検索エンジン最適化の改善に役立ち、サイトにアクセスしやすくなるので、ツールヒントの入力をお勧めします。
-
次のいずれかの操作を実行します。
- チェックマークをクリックして、変更を保存します。
- ×印をクリックして、更新をキャンセルします。
画像を置換する場合、選択した画像の縦横比が元の画像の縦横比と異なっていると、合うようにクリッピングされます。そのため、既存の画像は、寸法が同じか、幅と高さの比が同じでサイズがより大きい画像とのみ置換することをお勧めします。
特定の画像の定期的な置換を計画しているのであれば、サイトの元々の作成者に、サイズは同じで違う種類の画像を複数アップロードするように依頼してください。そうすることで、サイトに既にある画像を選択できます。例えば、Web デザイナーに春夏秋冬用の同じサイズの 4 枚の画像をアップロードしてもらうなどが考えられます。時間がたてば、「サイトより」オプションを選択して、そのときの季節を反映する画像に入れ替えます。
-
すべての変更が完了したら、「パブリッシュ」をクリックして、変更をライブにします。
テキストフレーム内に配置した画像の編集
ページ上のテキストフレーム内にペーストされている画像でも編集できます。
- テキストフレームを選択します。次に、テキストフレーム内の画像を選択します。
選択した画像の横に「画像を編集」ボタンが表示されます。
- 「画像を編集」をクリックします。既存のアセットのいずれかを選択するか、「写真をアップロード」をクリックして、コンピューターから新しい画像をアップロードします。
- すべての変更が完了したら、「パブリッシュ」をクリックして、変更をライブにします。
共有コンテンツの編集
サイト上のコンテンツの一部が、サイトのデザイン時にマスターページに追加されていることがあります。マスターページに追加されたエレメントは、そのマスターページにリンクされている他のサイトページのすべてに表示されます。これは、あるページでエレメントを更新すると、そのコンテンツの他のインスタンスもすべて更新されるということです。
共有されているエレメントを編集のために選択すると、そのアイテムは共有画像編集ウィンドウに表示されます。
このウィンドウが表示された場合は、変更すると Web サイトの他のページも自動的に更新されることになりますので、ご注意ください。注意して先に進む、つまり「キャンセル」をクリックするのが最善です。新しいブラウザーウィンドウでライブサイトを閲覧し、各ページをレビューして、エレメントが表示されている場所を確認します。エレメントのすべての繰り返し部分を変更してよいことを確認したら、In-Browser Editing インターフェイスに戻って更新します。
ハイパーリンクの編集
ハイパーリンクの編集については、「ハイパーリンクの編集」を参照してください。
ホームページ上のリンクをたどって他のサイトページを編集
ご自身のアカウントに初めてログインすると、サイトのホームページの編集可能なバージョンが表示されます。ホームページの変更が完了したら、サイト内の他のリンクされているページも閲覧して編集できます。
- リンクがテキストフレーム外に表示されている場合も、そのままクリックするとサイト内のリンクされているページにジャンプします。外部リンク（現在の Web サイト内にはない Web ページ）は、編集インターフェイスには読み込まれません。In-Browser Editing では、他の Web サイトのページを編集できないからです。
- リンクがテキストフレーム内に表示されている場合は、そのリンクにカーソルを合わせるとボタンが表示されます。ボタンをクリックして、リンクされている Web ページにジャンプします。例えば、ホームボタンをクリックして、サイトのホームページに移動します。
- リンクがテキストフレーム全体に適用されている場合は、フレーム全体をクリックして、リンクまたはアンカータグを含んでいるボタンを表示します。
サイトの各ページの編集が完了したら、変更を保存する場合は必ず「パブリッシュ」をクリックします。サイト全体の編集が完了したら、ブラウザーウィンドウを閉じます。
ブラウザー内編集で変更をプレビュー
ブラウザー内編集では、レスポンシブレイアウトをサポートしています。つまり、各ブレークポイントでの変更と外観を直接プレビューできます。一方、サイトに代替レイアウトを使用している場合は、ドロップダウンを使用して各デバイスの変更をプレビューできます。
変更をプレビューするには：
-
サイトコンテンツに必要な変更を加えます。
1200 px のブレークポイントに注目してください。ここで、コンテンツを更新しています。このブレークポイントでの変更をプレビューします。
-
ドロップダウンから、他のブレークポイントを選択し、各ブレークポイントでの変更をプレビューします。
-
代替レイアウトを使用してサイトを作成した場合は、ドロップダウンからデバイスを選択し、変更をプレビューします。
.Muse ファイルへの編集の同期
In-Browser Editing が行われると、ローカル .muse ファイルに含まれるコンテンツがライブサイトと同じではなくなります。このセクションでは、In-Browser Editing で行われた変更を承認または拒否し、.muse ファイルを更新して現行のサイトデザインに一致させる方法を学びます。
-
Muse を起動して、サイトの .muse ファイルを開きます。
パブリッシュ済みサイトが変更されたことを示す警告メッセージが表示されます。
.muse ファイルを初めて開くときにもメッセージが表示されますが、ライブ Web サイトと同期が取れていない .muse ファイルのパブリッシュを開始すると、変更を確認してからサイトを再度パブリッシュするように注意するメッセージが表示されます。
注意：ファイル／Adobe Business Catalyst サイトと同期を選択すれば、.muse ファイルとライブサイトの違いを確認できるインターフェイスをいつでも表示できます。
-
「確認」をクリックして変更を確認します。
変更の確認およびマージウィンドウが表示されます。
-
インターフェイスを使用して各変更を確認します。編集ごとに変更内容がハイライトされます。新規コンテンツは緑、削除されたアイテムは赤でマーキングされるので、何が追加され、削除されたかが一目でわかります。
-
ドロップダウンメニューオプション（「マージしない」または「Muse にマージ」）を使用して、特定の変更またはすべての変更を拒否するか、受け入れます。
メニューオプションを使用して変更をマージするか、破棄します。 注意：変更をマージしない場合は、.muse ファイルを次にパブリッシュするときに、ライブサイトに適用された変更を上書きすることになります。この動作は、ユーザーが In-Browser Editing を使用してサイトを編集するときに生じるタイポなどの問題の修正に役立ちます。
-
テキストと画像のライブ Web サイトバージョンをローカル .muse ファイルと比較するには、「ページのプレビュー」チェックボックスを有効および無効にします。
「ページのプレビュー」チェックボックスをオンまたはオフにすることで、デザインビューでの最近の変更の表示／非表示を切り替えます。 .muse ファイルの同期と編集が完了したら、変更をパブリッシュしてライブにします。「マージしない」にマーキングされた変更済みアイテムは、サイトを再度パブリッシュするときに .muse ファイルの現在のデザインにより上書きされます。
Web サイトのパブリッシュ済み繰り返し部分の保存
ご自分が .muse ファイルを変更しているときに、他のユーザーもライブサイトを変更する可能性があるので、変更を同期して最新バージョンをパブリッシュしたら、サイトのコピーを保存することをお勧めします。
サイトのパブリッシュ直後に、ファイル／名前を付けて保存を選択して、.muse ファイルのコピーを保存します。必要に応じて、新規コピーを作成するときにファイル名に現在の日付を含めます。こうしておくと、特定の日にパブリッシュされた .muse ファイルを容易に見つけられます。
例えば、.muse ファイルの最新の実コピーを格納するフォルダーと、サイトデザインのパブリッシュ済みの繰り返し部分が含まれる他のアーカイブバージョンを複数作るなどです。フォルダーのリスト例は以下のようになります。
my-site.muse
my-site_2013-1-4.muse
my-site_2013-2-23.muse
my-site_2013-4-7.muse
こうすることで、容易に前のサイトデザインに戻せることに加えて、In-Browser Editing を使用して Web サイトの何が変更されたのかを Muse が正確に判別できます。サイトのバックアップバージョンを保存しておくと、現在の .muse ファイルとライブ Web サイトが同期を保っているかどうかも容易に確認できます。
アカウントにログイン