Adobe Muse Web サイトに Facebook の「いいね!」と「シェア」、ツィート、Google マップ、YouTube ビデオなどのソーシャルコンテンツを追加および構成する方法を学習します。

注意:

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

Adobe Muse のソーシャルウィジェットを使用すると、Web サイトでソーシャル共有ツールや以下のツールをすばやく簡単に追加できます。Facebook の「いいね!」、Google マップ、ツイートなどソーシャルツールを 1 回のクリックで追加することが可能です。  Adobe Muse では、以下のソーシャルウィジェットがサポートされています。

  • Adobe Muse バッジ
  • Facebook : いいね!
  • Facebook : フォロー
  • Facebook : コメント
  • Google マップ
  • Google+
  • Linkedin
  • Paypal
  • Pinterest
  • Twitter : フォロー
  • Twitter : ツイート
  • Vimeo
  • Youtube

ウィジェットをページに追加するには、ウィンドウウィジェットライブラリソーシャルからウィジェットをドラッグして配置します。次の記事では、ソーシャルウィジェットを追加して設定する方法について説明します。

ソーシャルウィジェットの追加

ソーシャルウィジェットでは、簡単にカスタム HTML を設定して、それを Adobe Muse ページに埋め込むことができます。Web ウィジェット機能の多くは、サードパーティ Web サイトの HTML を埋め込んで利用することもできます。アプリケーション外部でコードを生成し、それを埋め込み HTML として Adobe Muse にペーストするのではなく、Adobe Muse 内から Web コンテンツを追加して設定すると、時間を節約できます。

Adobe Muse ページにソーシャルウィジェットを追加するには、次の手順を実行します。

  1. ソーシャルウィジェットを追加するページを開きます。ウィンドウウィジェットライブラリをクリックし、ソーシャルをクリックします。

    ソーシャルウィジェットの全リストが表示されます。

    Adobe Muse のソーシャルウィジェット
    Adobe Muse のソーシャルウィジェット
  2. 追加するソーシャルウィジェットをドラッグし、選択ツールを使用してレイアウトに配置します。

    デザインビューでソーシャルウィジェットをドラッグして配置します。
    デザインビューでソーシャルウィジェットをドラッグして配置します。
  3. 選択ツールを使用して選択したウィジェットのハンドルをドラッグすると、そのウィジェットを変形できます。また、ウィジェットの中央をクリック&ドラッグすれば、他のサイトエレメントの横に再配置することもできます。

  4. ウィジェットの右上隅にある青い矢印に注目してください。この矢印をクリックして、オプションパネルを開きます。このパネルでは、ソーシャルウィジェットを設定できます。

    ウィジェットが選択されているときに、ウィジェットの右上隅にある青い矢印をクリックすると、いつでもオプションパネルにアクセスできます。

    ウィジェットの右上隅にある青い矢印をクリック
    ウィジェットの右上隅にある青い矢印をクリック

    次の手順では、各ソーシャルウィジェットを設定する方法について説明します。

ソーシャルウィジェットの設定

これで、ページにソーシャルウィジェットを追加しました。次のステップは、これらのウィジェットをユーザーの要件に合うように設定することです。Adobe Muse で各ソーシャルウィジェットを設定する方法については、次の手順を参照してください。

  1. Adobe Muse バッジを設定するには、ウィジェットライブラリソーシャルからこのウィジェットをドラッグして配置します。ウィジェットの右上隅にある青い矢印をクリックします。 カラースキームフィールドから、「明」と「暗」のいずれかを選択します。

    Adobe Muse バッジウィジェットの設定
    Adobe Muse バッジウィジェットの設定
  2. 「Facebook:いいね!」ウィジェットを使用すると、「いいね!」ボックスを追加し、訪問者が、サイトに関連する facebook ページを閲覧してアクセスできるようになります。このウィジェットを設定するには、ウィジェットライブラリソーシャルから「Facebook:いいね!」ウィジェットをドラッグして配置します。ウィジェットの右上隅にある青い矢印をクリックします。次のオプションを設定できます。

    • アクション:このフィールドから、「いいね!」または「おすすめ」のいずれかを選択します。選択に基づいて、「いいね!」の数または「おすすめ」の数が表示されます。
    • レイアウト:このフィールドから、「標準」、「ボタンの数」、または「ボックスの数」のいずれかを選択できます。標準レイアウトを選択した場合は、ユーザーにサインアップを促すメッセージと一緒に「いいね!」の数が表示されます。「ボタンの数」を選択すると、「いいね!」または「おすすめ」の数のみが表示されます。「ボックスの数」レイアウトには、「いいね!」または「おすすめ」の数が四角形のボックスとして表示されます。
    • カラースキーム:このウィジェットに対して明または暗のカラースキームのいずれかを選択します。
    • 「いいね!」する URL:訪問者が「いいね!」する URL を入力します。サイトの訪問者にライブサイトの現在のページで「いいね!」してもらいたい場合は、現在のページチェックボックスを選択します。
    • 送信ボタンを表示:「いいね!」または「おすすめ」に加えて「シェア」ボタンを表示する場合は、このチェックボックスを選択します。
    「Facebook:いいね!」ウィジェットの設定
    「Facebook:いいね!」ウィジェットの設定
  3. 「Facebook:フォロー」ウィジェットを設定するには、ウィジェットライブラリ/ソーシャルからこのウィジェットをドラッグして配置します。ウィジェットの右上隅にある青い矢印をクリックします。その後、以下のウィジェットを設定できます。

    • レイアウト:サイトでウィジェットを表示する方法を設定するには、「標準」、「ボタンの数」、または「ボックスの数」を選択します。
    • カラースキーム:ウィジェットに対して明または暗のテーマのいずれかを選択します。
    • プロフィール URL:サイトの訪問者がフォローすべき Facebook のプロフィール URL を指定します。
    「Facebook:フォロー」ウィジェットの設定
    「Facebook:フォロー」ウィジェットの設定
  4. Facebook:コメント」ウィジェットを設定するには、ウィジェットライブラリソーシャルからこのウィジェットをドラッグして配置します。ウィジェットの右上隅にある青い矢印をクリックします。 オプションパネルで、以下のオプションを設定できます。

    • モバイル UI を表示:このチェックボックスを選択すると、モバイル画面に適した、ウィジェットの別のレイアウトが表示されます。
    • カラースキーム:このウィジェットに対して明または暗のカラースキームのいずれかを選択します。
    • 並べ替え:並べ替えオプションを選択すると、コメントを日付(古い順または新しい順)またはソーシャルランキングに基づいて並べ替えることができます。
    • 投稿の数:サイトに表示する投稿数を指定します。
    • コメントする URL:サイト訪問者がコメントを投稿する URL を指定します。URL として現在の Adobe Muse ページを使用する場合は、現在のページチェックボックスを選択します。
    「Facebook:コメント」ウィジェットの設定
    「Facebook:コメント」ウィジェットの設定
  5. Google マップを設定するには、ウィジェットライブラリソーシャルから Google マップウィジェットをドラッグして配置します。「Google マップ」ウィジェットの右上隅にある青い矢印をクリックします。オプションパネルから、次の設定を行うことができます。

    • アドレス:住所を追加して、表示される地域を指定します。
    • マップの種類:ロードマップまたはサテライトを選択して、道路地図ビューまたは Google Earth サテライトビューのいずれかを選びます。マップの種類として、「ハイブリッド」または「地形」を選択することもできます。
    • ピン情報を展開:このチェックボックスを選択すると、ユーザーがマップ上のマーカーをクリックしたときに情報ウィンドウが表示されます。
    • ズームレベル:Google マップのズームレベルを設定します。
    「Google マップ」ウィジェットの設定
    「Google マップ」ウィジェットの設定
  6. Google +」ウィジェットを設定するには、デザインビューでこのウィジェットをドラッグして配置します。ウィジェットの右上隅にある青い矢印をクリックして、オプションパネルを開きます。その後、次のオプションを設定できます。

    • サイズ:ウィジェットのサイズ、つまりライブサイトでの表示方法を選択します。小、中、または標準サイズのいずれかを選択します。
    • 注釈:このウィジェットに関連付けられている注釈テキストを表示する位置を選択します。注釈をバブルとしてインラインで配置したり、注釈を付けないように選択したりできます。
    • URL:このウィジェットをクリックしたときの訪問者の移動先にする URL を指定します。このフィールドに移動先の URL を入力します。移動先を現在のページにする場合は、「現在のページ」チェックボックスを選択します。
    「Google+」ウィジェットの設定
    「Google+」ウィジェットの設定
  7. LinkedIn ウィジェットを設定するには、デザインビューでこのウィジェットをドラッグして配置します。ウィジェットの右上隅にある青い矢印をクリックして、オプションパネルを開きます。その後、次のオプションを設定できます。

    • シェアする URL:訪問者がウィジェットをクリックしたときの訪問者のリダイレクト先 URL を指定します。フィールドに URL を入力するか、「現在のページ」チェックボックスを選択します。
    • カウント:接続カウントを指定します。またはを選択して、表示プロパティを選択します。接続カウントを表示しないように、なしを選択することもできます。
    LinkedIn ウィジェットの設定
    LinkedIn ウィジェットの設定
  8. PayPal ウィジェットを使用してオンライン決済取引を設定します。ボタンをページに追加し、続いて指定した PayPal アカウントの電子メールアドレスに転送する関連料金を設定できます。ウィジェットの右上隅にある青い矢印をクリックして、以下の設定を行います。

    • 種類:このフィールドから、ボタンの種類のいずれかを選択します。例えば、「今すぐ購入」、「カートを見る」、「カートに追加」などを選択できます。
    • ボタン画像:ボタンの画像ファイルを追加します。「ファイルを追加」をクリックして、ローカルコンピュータで画像ファイルを参照します。このフィールドは、ボタンの種類が「購入をカスタム」、「寄付をカスタム」、「カートに追加をカスタム」、および「カートを見るをカスタム」の場合に有効です。
    • サイズ:ライブサイトに表示されるときのボタンのサイズ。小さいサイズまたは大きいサイズを選択できます。
    • 支払先の電子メール:受信者の電子メールアドレス。
    • 数量:このフィールドに数値で金額を指定します。
    • 通貨:取引を行う通貨。
    • アイテム名:指定できるアイテムのカスタム名。
    • アイテム番号:アイテムに付与する番号またはコード。
    • 税率:アイテムの税額。
    • 送料:アイテムの送料。
    Adobe Muse の PayPal ウィジェットを設定します。
    Adobe Muse の PayPal ウィジェットを設定します。
  9. Pinterest ウィジェットを設定するには、レイアウトでこのウィジェットをドラッグして配置します。ウィジェットの右上隅にある青い矢印をクリックして、オプションパネルを開きます。このパネルで、次のオプションを設定できます。

    • ボタンタイプ:サイトに表示するボタンのタイプを選択します。このドロップダウンフィールドから、ピンイットまたはフォローするを選択します。
    • Pinterest ユーザー名:このフィールドに Pinterest ユーザー名を指定します。このフィールドは、「ボタンタイプ」フィールドで「フォローする」を選択した場合にのみ有効になります。
    • ラベル:「ボタンタイプ」フィールドで「フォローする」を選択したときに表示されるラベル名または名前を指定します。
    Pinterest ウィジェットの設定
    Pinterest ウィジェットの設定
  10. Twitter:フォロー」ウィジェットを設定するには、レイアウトでこのウィジェットをドラッグして配置します。ウィジェットの右上隅にある青い矢印をクリックします。オプションパネルを使用して、以下のオプションを設定します。

    • フォロー @:このフィールドに Twitter ハンドルを指定します。デフォルトでは、値がウィジェットに表示されます。
    • サイズまたはのいずれかを選択して、好みのサイズのウィジェットを表示します。
    • ユーザー名を表示:ウィジェットで指定したユーザー名を表示する場合は、このチェックボックスを選択します。
    「Twitter:フォロー」ウィジェットの設定
    「Twitter:フォロー」ウィジェットの設定
  11. Twitter:ツイート」ウィジェットを設定するには、Adobe Muse ページでこのウィジェットをドラッグして配置します。ウィジェットの右上隅にある青い矢印をクリックします。オプションパネルから、以下のオプションを設定できます。

    • シェアする URL:訪問者がウィジェットをクリックしたときの訪問者のリダイレクト先 URL を指定します。リダイレクト先としてライブサイトの現在のページを使用するには、「現在のページ」チェックボックスを選択します。
    • サイズ:ウィジェットサイズとしてまたはのいずれかを選択します。
    • ツイートテキスト:このフィールドにカスタムツイートテキストを指定します。
    • おすすめ @:このフィールドに Twitter ハンドルまたはユーザー名を指定します。
    • カウントを表示:ツイートに関連する番号を表示する場合は、このチェックボックスを選択します。
    「Twitter:ツイート」ウィジェットの設定
    「Twitter:ツイート」ウィジェットの設定
  12. Vimeo ウィジェットを設定するには、ウィジェットライブラリソーシャルからこのウィジェットを追加します。ウィジェットの右上隅にある青い矢印をクリックします。オプションパネルで、次の設定を行うことができます。

    • ビデオ ID:ここにビデオファイルの ID を指定します。
    • ビデオコントロールカラー:このフィールドから 16 進数コードを入力するか、ビデオコントロールに必要な色を選択します。
    • ポートレイトを表示:ビデオの再生時に背景としてポートレイトを表示する場合は、このオプションを選択します。
    • タイトルを表示:ビデオのタイトルを表示する場合は、このオプションを選択します。
    • Byline を表示:ビデオに Byline を表示する場合は、このオプションを選択します。
    • 自動再生:ライブサイトでビデオを自動的に再生する必要がある場合は、このオプションを選択します。
    • ループ:ライブサイトでビデオをループ再生する場合は、このオプションを選択します。
    Vimeo ウィジェットの設定
    Vimeo ウィジェットの設定
  13. Youtube ウィジェットを設定するには、ウィジェットライブラリソーシャルからこのウィジェットを追加します。ウィジェットの右上隅にある青い矢印をクリックします。オプションパネルで、次の設定を行うことができます。

    • ビデオ ID:サイトに追加するビデオの ID を入力します。
    • テーマ:このウィジェットのテーマとして、「明」または「暗」のいずれかを選択します。
    • 進捗カラー:進捗状況バーの色として、白色または赤色のいずれかを選択します。
    • 開始時間:サイトでビデオを再生する必要がある開始時刻を指定します。
    • コントロールを表示:このオプションを選択すると、サイトで Youtube ビデオのコントロールオプションが表示されます。
    • フルスクリーンを許可:このチェックボックスを選択すると、このビデオをフルスクリーンモードで表示できます。
    • 情報を表示:ビデオの下にビデオに関する情報を表示する場合は、このオプションを選択します。
    • アノテーションを表示:ビデオにアノテーションまたはレイヤーテキストを表示する場合は、このオプションを選択します。
    • 自動再生:ライブサイトでビデオを自動再生する場合は、このオプションを選択します。
    • 関連するものを表示:関連する Youtube ビデオを表示する場合は、このオプションを選択します。
    • ループ:ビデオを連続してループ再生する場合は、このオプションを選択します。
    Youtube ウィジェットの設定
    Youtube ウィジェットの設定

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

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