Adobe Muse でフルスクリーンとサムネールのスライドショーウィジェットを追加、設定、およびテストするには、この記事をお読みください。

注意:

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

Adobe Muse のスライドショーウィジェットは、画像のみを扱うインタラクティブなウィジェットです。タブ付きパネルウィジェットと同様に、ユーザーがサムネールコンテナをクリックすると、対応するスライド画像のバージョンがページ上の別の大きなコンテナに表示されます。

Adobe Muse は、以下の種類のスライドショーウィジェットをサポートしています。

  • 基本:このウィジェットは画像を追加できる大きなコンテナで構成され、その下にキャプションを追加できます。キャプション領域に、前へボタン、次へボタン、および現在のスライドの番号も表示されます。
  • 空白:これは基本スライドショーに似ています。ただし、このウィジェットのコンテナは空です。
  • フルスクリーン:このウィジェットは、ドラッグしてデザインカンバスに配置すると、フルスクリーンで表示されます。デフォルトでは、ページの左上隅の小さなコンテナに、前へボタン、次へボタン、および現在のスライドの番号が表示されます。
  • ライトボックス:このウィジェットでは、ページにアクティブに表示されているスライドショーやギャラリー要素を除いて、ページの残りの部分が薄暗くなります。ライトボックスは、スライドショーの中でよく使用されるウィジェットの 1 つです。ユーザーのフォーカスがアクティブなギャラリーにすぐに合わせられます。
  • サムネール:このウィジェットはコンポジションウィジェットに似ており、ギャラリー領域の左側にサムネールがあります。ユーザーがサムネールをクリックすると、対応する画像がギャラリー領域に表示されます。

次の記事では、複数のサムネール画像を上部に表示し、その下に 1 枚の大きな画像を表示する写真ギャラリーを構築します。オプションパネルを使用すると、写真ギャラリーの動作と表示方法を制御できます。さらに、コントロールパネルで設定を適用して、スライドショーの外観のスタイルを設定できます。

100% 幅のスライドショーの追加:Adobe Muse で、100% 幅のスライドショーをユーザーの Web サイトデザインに追加する方法を学びます。100% 幅のフルスクリーンスライドショーがウィジェットライブラリ内で利用可能です。
Danielle Beaumont

ページへのサムネールスライドショーウィジェットの追加

スライドショーも直接ページに追加できますが、この例では、タブ付きパネルウィジェットのコンテンツエリアの内部でサムネールスライドショーウィジェットを入れ子にします。スライドショーを直接追加するには、次の手順を実行します。

  1. Adobe Muse を開きます。スタートアップスクリーンから、次のいずれかを実行します。

    • 「新規作成」をクリックして、作成している新しいサイトにスライドショーウィジェットを追加します。
    • 「開く」をクリックして、ウィジェットを追加する既存の .muse ファイルを開きます。スライドショーウィジェットを追加するページをダブルクリックして開きます。
  2. ウィジェットライブラリパネルを開きます(ウィンドウ/ウィジェットライブラリを選択)。「スライドショー」セクションを展開します。このリストから、必要なウィジェットを選択します。例えば、リストからサムネールスライドショーウィジェットを選択して、デザインビューにウィジェットをドラッグします。

    Adobe Muse、ウィジェットライブラリのサムネールスライドショー
    サムネールスライドショーウィジェットをページにドラッグします。

    左側にサムネールコンテナ、スライド画像のコンテナ、画像の下にキャプションコンテナがあることがわかります。

    注意:

    ウィジェット内で生成されたデフォルトのコンテンツを削除するには、ウィジェットを右クリックして、「ウィジェットコンテンツを消去」を選択します。

  3. サムネールを削除するには、プレースホルダーコンテンツ(コンテンツエリアの内部にある画像フレームとテキストフレーム)を選択して、削除します。

オプションパネルからのサムネールスライドショーウィジェットの設定

ウィジェットに関連付けられたオプションパネルを使用して、スライドショーウィジェットの設定を構成できます。自動再生、トランジション効果、タッチデバイスのスワイプなどを有効にする方法については、以下を参照してください。

  1. ウィジェットを選択し、青色の矢印アイコンをクリックしてオプションパネルにアクセスします。この例では、「次へ」および「前へ」の矢印ボタンは必要ありません。そのため、「前へ」と「次へ」のオプションのチェックボックスを選択解除して、これらのボタンを無効にします。チェックボックスをオフにすると、ボタンが隠れることがわかります。

    「キャプション」オプションと「カウンター」オプションのチェックボックスを選択解除して、サムネールトリガーボタンと大きなターゲットコンテナのみが残るようにします。オプションを一通り確認して、以下にリストされている設定に一致するように更新します。

    • 新規スライド:フレームサイズに合わせる
    • 新規サムネール:フレームサイズに合わせる
    • 効果:フェード
    • トランジション速度: 0.5 秒
    • 自動再生:無効
    • 次の時間経過後に再開:有効
    • 1 回再生:無効
    • シャッフル:無効
    • スワイプを有効にする:有効
    • ライトボックス:有効
    • 画面全体:有効
    • 自動ライトボックス:無効
    • フリーフォームサムネール:有効
    • 最初:無効
    • 前へ:有効
    • 次へ:有効
    • 最後:無効
    • キャプション:有効
    • カウンター:有効
    • 閉じるボタン:無効
    • サムネール:有効
    • 編集中にライトボックスのパーツを表示:有効
    • 編集をすべてに適用:有効
    スライドショーオプションパネル
    オプションパネル内でサムネールスライドショーウィジェットの設定を更新します。

  2. ウィジェットごとに異なるオプションを利用でき、一部のオプションは他のオプションよりも複雑です。時間を割いて「メニュー」オプションを見直し、利用可能な設定を確認します。ここに、簡単な概要を示します。

    画像を追加:フォルダーアイコンをクリックし、表示する画像を参照して選択します。

    新規スライド:ターゲットコンテナ内で大きな写真コンテンツを表示する方法を定義します。

    • コンテンツの縦横比を保持して合わせる: 写真画像ファイルは、そのサイズがターゲットコンテナに一致しない場合でも、元のサイズで維持されます。画像が収まらない場合、コンテナの一部が空白になる場合があります。
    • フレームサイズに合わせる:写真画像ファイルのサイズが、ターゲットコンテナの縦横比に合わせて変更されます。一部の写真画像が切り抜かれる場合があります。

    新規サムネール:小さなサムネール写真コンテンツが、トリガーコンテナ内に表示される方法を定義します。

    • コンテンツの縦横比を保持して合わせる: 写真画像ファイルは、そのサイズがターゲットコンテナに一致しない場合でも、元のサイズで維持されます。画像が収まらない場合、コンテナの一部が空白になる場合があります。
    • フレームサイズに合わせる:写真画像ファイルのサイズが、ターゲットコンテナの縦横比に合わせて変更されます。一部の写真画像が切り抜かれる場合があります。

    トランジション:ターゲットコンテナのコンテンツが別のターゲットコンテナで置換されるプロセスにある際に使用されるアニメーションです。これらの機能は、タッチスクリーンでも有効になっているので、モバイルデバイスのサイトを作成する場合でも、訪問者はスクリーンをスワイプして、次のコンテンツ項目が表示されるトランジション再生を確認できます。

    • フェード: 既存のコンテナの不透明度が減少するにつれて、新規コンテナの不透明度が増加します。
    • 水平方向:新規コンテナが側面から水平方向にスライドインして、既存のコンテナが消去されます。
    • 垂直方向:新規コンテナが側面から垂直方向にスライドインして、既存のコンテナが消去されます。

    トランジション速度:アニメーションの再生にかかる秒数です。

    自動再生:この設定を有効にすると、インタラクティブな体験(訪問者が各トリガーをクリックして、対応するターゲットを順番に表示する)ではなく、スライドショーが自動的に再生されます。各画像が次の画像に移行するまでに表示される秒数を設定します。

    シャッフル:この設定を有効にすると、サムネールを順番にサイクル表示するのではなく、画像がランダムな順序で表示されます。

    ライトボックス: このオプションを有効にすると、ターゲットコンテナのコンテンツが表示されるとき、スライドショーの残りのページがオーバーレイに隠れて薄暗くなります。  ライトボックスウィンドウを閉じると、ページ全体がもう一度表示されます。

    スワイプを有効にする: このオプションを有効にし、サイトにタブレットまたは電話用のレイアウトを含めて、モバイルデバイス上で Web コンテンツを表示する場合、ウィジェットのインタラクティブなパーツがタッチスクリーンのジェスチャーをサポートします。

    「パーツ」セクション:

    • 最初:このオプションを有効にすると、「最初」のナビゲーションボタンが表示されます。
    • 前へ:このオプションを有効にすると、「前へ」のナビゲーションボタンが表示されます。
    • 次へ:このオプションを有効にすると、「次へ」のナビゲーションボタンが表示されます。
    • 最後:このオプションを有効にすると、「最後」のナビゲーションボタンが表示されます。
    • キャプション:このオプションを有効にすると、写真ギャラリーのキャプションが表示されます。
    • カウンター:このオプションを有効にすると、写真ギャラリーのカウンターが表示されます。
    • 閉じるボタン:このオプションを有効にすると、閉じるボタンが表示されます。

    サムネール:このオプションを有効にすると、サムネールトリガーボタンが表示されます。

    「編集」セクション:

    • 編集中にライトボックスのパーツを表示:「ライトボックス」オプションが有効になっている場合、デフォルトではページ内で対応するトリガーが選択されている場合のみ、各ターゲット領域が表示されます。レイアウトを編集する際、作業中にターゲットを表示するためには、このオプションを有効にするのが便利です。ブラウザー内でページをプレビューまたは表示する場合、この設定はスライドショーの表示に影響を与えません。「ライトボックス」オプションが有効になっていない場合、このオプションは淡色表示になります。 

    ライトボックススライドショーウィジェットを選択した場合にのみ、「編集中にライトボックスのパーツを表示」オプションが有効になることに注意してください。

    • 編集をすべてに適用:ウィジェットの素早い編集を容易にするため、デフォルトでこのオプションが有効になっています。トリガーごとに異なる外観を設定する必要がない場合は、ある要素に加えた変更が自動的に他の要素に適用されるように、このオプションを有効にします。

    利用可能な設定を確認したら、ページ内のオプションメニュー以外の場所をクリックして閉じます。

    注意:

    フルスクリーンスライドショーでは、「ライトボックス」と「フルスクリーン」のオプションは無効です。

    フルスクリーン以外のどのスライドショーウィジェットでも「フルスクリーン」オプションを有効にすることはできません。

サムネールスライドショーウィジェットの要素のサイズ変更と整列

  1. スライドショーウィジェットをクリックして選択します。選択ツールを使用してハンドルをドラッグし、サムネールスライドショーウィジェット全体のサイズが約 790 ピクセル(幅)x 490 ピクセル(高)になるように変更します。変形パネルまたはコントロールパネルの変換フィールドを見て寸法を確認できます。

  2. スライドショーを選択しながら、サムネールコンテナをもう一度クリックして、3 つのサムネールを保持するコンテナを選択します。側面の変形ハンドルを使用して幅を広げてから、選択ツールを使用してサムネールを大きなスライド画像コンテナの上で、垂直方向に中央揃えになるまでドラッグします。

    5 枚のサムネールがあるコンテナ
    サムネールトリガーコンテナを選択して、大きなターゲットコンテナの上に再配置します。

    要素をドラッグすると、青色のスマートガイドが一時的に表示されるので、サムネールコンテナがスライド画像コンテナの中央に整列されるタイミングがわかります。

    写真ギャラリーにグラフィックを追加しながら、対応するサムネールとスライドコンテナを自動的に生成するには、これらの手順に従います。

  3. 青色の矢印ボタンをクリックすると、オプションメニューが開きます。「画像を追加」という文字の横に表示されるフォルダーアイコンをクリックして、ファイルを保存したフォルダーに移動します。

  4. 必要な画像ファイルを選択します。「開く」をクリックして、読み込みダイアログボックスを閉じます。

    読み込みダイアログボックス
    gallery サブフォルダーに含まれる 5 つの画像ファイルのセットを選択します。

    複数の画像ファイルを選択すると、サムネールスライドショーウィジェットが読み込まれます。この方策を使用すると、複数の画像ファイルを選択して、スライド画像コンテナに含まれる大きな各新規画像ファイルに対応するサムネールコンテナボタンが生成されます。

    新規画像が既存のサムネールボタンに追加されます。

  5. スライドショーを最初に追加したときにデフォルトで表示されるサムネール画像をダブルクリックして選択します。Delete キー(Mac)または Backspace キー(Windows)を押して、新規サムネールのみが残るまで、各サムネールを選択して削除します。

    スライドショーのサムネールと画像
    デフォルトの白黒の各サムネールを選択してドリルダウンし、Backspace キーまたは Delete キーを押して 1 つずつ削除します。

    サムネールのセット全体を削除しないように注意します。サムネールのセット全体を削除した場合は、編集/取り消しを選択して最後の操作を取り消してから、Backspace キーまたは Delete キーを押す前に、必ず各サムネールをクリックします(選択範囲インジケーターに「サムネール」という文字が表示されます)。

  6. 5 つのサムネール画像のセットを保持するコンテナを選択します。残りのサムネールがスライド画像コンテナの上で、中央に配置されるように変形ハンドルを使用してサイズを変更します。

    スライドショーのサムネールと画像
    サムネールコンテナのサイズをスライド画像の中央に合わせて変更します。

レスポンシブスライドショーウィジェットの使用

デフォルトでは、スライドショーはレスポンシブ、つまり可変です。Adobe Muse Web サイトで、レスポンシブスライドショーウィジェットを使用するには、次のいずれかを実行します。

  • 新しいサイトを作成する場合は、新しいサイトを開き、ウィジェットライブラリパネルからスライドショーウィジェットをドラッグして配置します。ウィジェットはデフォルトでレスポンシブになっていることに注意してください。
  • 既存の .muse ファイルがある場合は、最新バージョンの Adobe Muse を使用して、このファイルを開きます。ウィジェットを選択します。ウィジェットをレスポンシブにするには、ウィジェットの要素を選択し、コンテキストメニューの「サイズ変更」ドロップダウンリストから「レスポンシブな幅と高さ」オプションまたは「レスポンシブな幅」オプションを選択します。
「サイズ変更」オプションを選択してスライドショーウィジェットをレスポンシブにする
「サイズ変更」オプションを選択してスライドショーウィジェットをレスポンシブにする

レスポンシブサイトにスライドショーウィジェットを追加する場合は、すべてのブレークポイントを通じてウィジェットの位置とサイズを確認してください。スライドショーウィジェットの個々の要素のコンテンツとサイズを変更することができます。また、様々なブレークポイントにわたって、「前へ」ボタン、「次へ」ボタン、キャプションなどの個々の要素のレスポンシブ設定を有効にすることもできます。

サムネールスライドショーウィジェットの表示方法のテスト

スライドショー要素を再配置して、プレースホルダーのサムネール画像を削除した後、スライドショーをテストしてその表示を確認することができます。

  1. 最初に、上部でサムネールボタンをクリックすることで、デザインビューで写真ギャラリーをテストし、下の大きなコンテナで対応する各スライド画像が表示されることを確認します。

  2. プレビューをクリックして、ブラウザーにどのようにギャラリーが表示されるかを確認します。スライドショーを操作して、対応するサムネールをクリックしたとき、どのように大きな画像が表示されるか確認します。

    サムネールとスライドショーのテスト
    タブ付きパネルウィジェットのコンテンツエリアコンテナの内部で、ギャラリーを中央に配置します。

  3. ファイル/ブラウザーでページをプレビューを選択して、デフォルトのブラウザーに表示される about ページを確認します。

    ブラウザーのサイズを変更し、スライドショーウィジェットをさまざまな画面サイズでプレビューします。デフォルトでは、スライドショーウィジェットはレスポンシブです。つまり、画面サイズに合わせてサイズが変更され調整されます。

    また、デザインビューでスクラバーを使用してウィジェットをプレビューすることもできます。任意の時点でウィジェットを変更または再配置する場合は、ブレークポイントを追加してウィジェットを再整列します。

  4. タブ付きパネルウィジェットの機能をテストします。タブをクリックして、コンテンツエリアコンテナ内で表示される、対応するコンテンツを確認します。次に、サムネールボタンをクリックすることで、「Gallery」タブ内でスライドショーをテストし、対応する大きなスライド画像が表示されるか確認します。

スライドショーウィジェットを使用したスライドショープレゼンテーションの作成

スライドショーウィジェットは、ページに追加できるもう 1 つのサイト機能です。写真の大きいバージョンを見せるために、訪問者にサムネールのクリックを要求するスライドショーを設定したり、ページがロードされると自動的に再生されるスライドショーを作成したりすることができます。自動再生スライドショーは、一連の写真を表示して、説得力のあるコンテンツをサイトに追加する優れた方法です。スライドをアニメーション化する方法を指定するトランジションのタイプを設定することにより、スライドショーの再生方法を制御することができます。

次のサブセクションでは、サイトのホームページに自動再生スライドショーを追加します。

プランビューでホームサムネールをダブルクリックし、編集のためにデザインビューで開きます。

スライドショーウィジェットの自動再生の設定

画像セットを繰り返し表示するプレゼンテーションを作成するには、次の手順に従います。

  1. ウィジェットライブラリで、スライドショーをクリックします。

  2. 基本ウィジェットを選択し、ページ上にドラッグします。

  3. デフォルトでは、基本スライドショーウィジェットには、ダークグレーの長方形(画像プレースフォルダー)が 1 つ、プレースホルダーキャプション、画像数(1 - 1)、2 つの矢印ボタン(次へ/前へ)があり、訪問者はこれらをクリックして画像セットをナビゲートすることができます。

  4. 青矢印をクリックして、オプションメニューにアクセスします。次のオプションを確認し、設定します。

    • 効果:フェード
    • 自動再生:遅い
    • 新規スライド:フレームサイズに合わせる
    • 新規サムネール:フレームサイズに合わせる
    • ライトボックス:選択解除
    • パーツ:すべてのオプションを選択解除して、キャプション、カウンター、次へ/前へボタンを表示しない

    注意:

    このスライドショーは、訪問者の操作を介さずにページが読み込まれるときに、自動的に再生されます。訪問者のマウスクリックによって制御するスライドショーを作成するには、「自動再生」を「なし」に設定し、オプションメニューの「パーツ」セクションの「次へ」と「前へ」のチェックマークを選択したままにしておきます。

  5. オプションメニューから離れた位置をクリックし、メニューを閉じます。これらの変更を行った後、ダークグレーの長方形のみが表示されていることがわかります。オプションメニューの設定を変更して、いつでもウィジェットの設定を変更できます。

  6. 画像フレーム(ダークグレーの長方形)をダブルクリックして選択し、サイドハンドルをドラッグしてスライドショーをページの幅全体に拡張します。

    スライドショーの画像フレーム
    スライドショーの画像フレームのサイドハンドルをドラッグして、ページのサイズに合わせます。

  7. 上と下の矢印を使用して画像フレームの高さを拡張し、ホームページ全体のサイズに広げます。下で、フッターの上に表示されているジグザクのタイル画像のすぐ上で停止するまで画像フレームを伸ばします。このときに、ナビゲーションバーの右側にある茶色のドリップ画像がダークグレーのプレースホルダーによって覆われていてもかまいません。

  8. 青矢印をクリックして、もう一度オプションメニューにアクセスします。このとき、テキスト「画像を追加」の横にある、一番上のフォルダーアイコンをクリックします。

  9. 読み込みダイアログボックスで、アセットフォルダーに移動し、アセットを開きます。「選択」をクリックして、画像をスライドショーに追加します。

  10. プレビュー」をクリックして、スライドショーの再生を確認します。これは遅い自動再生速度に設定されていますが、すばやく画像を切り替えたい場合は、オプションメニューで設定を変更できます。最後の写真が表示された後、スライドショーが一巡して元に戻り、セット内の最初の画像の再生が開始されることがわかります。自動再生を有効にすると、スライドショーは無限にループします。

この時点で、スライドショーは終了です。ただし、ナビゲーションバーの右側のドリップの位置を修正したい場合は、さらに次の手順を行う必要があります。

  1. プランビューで、A-マスターサムネールをダブルクリックして、ページをデザインビューで開きます。

  2. 選択ツールを使用して、ナビゲーショングラフィックの右上部分の茶色のドリップを選択します。

  3. ドリップ画像を右クリックし、表示されるコンテキストメニューで配置最前面へを選択します。

  4. 「A-マスター」タブの X をクリックして閉じます。基本ウィジェットを追加したページを開きます。「プレビュー」をクリックすると、ドリップ画像が自動再生スライドショーの上に表示されていることがわかります。スライドショーをレビューした後、デザインビューに戻ります。

    注意:

    ナビゲーションバーは A-マスターページで作成されているため、ナビゲーション(および他の共通のエレメント)を制御するために変更するには、デザインビューで A-マスターページを開いて編集する必要があります。マスターページのエレメントは編集しているページ上で確認できますが、他のサイトページでヘッダーおよびフッターコンテンツを編集することはできません。

フルスクリーンスライドショーウィジェットの追加

フルスクリーンスライドショーウィジェットにより、フルスクリーンで再生するスライドショーを設定できます。訪問者がフルスクリーンスライドショーをクリックすると、コンピューターまたはデバイスの画面のブラウザーウィンドウ全体に合わせてコンテンツが拡大し、サイトの他のコンテンツは一時的に見えなくなります。必要に応じて、スライドショーを自動再生するよう設定し、ページを読み込むと画像の切り替えが始まるようにできます。訪問者は、Esc キーを押して、スライドショーを終了することができます。

フルスクリーンスライドショーウィジェットをサイトに追加するには、次の手順に従います。

  1. Adobe Muse を起動します。ページをダブルクリックし、ページをデザインビューで開きます。

  2. ウィンドウ/ウィジェットライブラリを選択してウィジェットライブラリにアクセスするか、パネルセットの「ウィジェットライブラリ」タブをクリックしてアクティブにします。

  3. ウィジェットのリストで「スライドショー」セクションを展開します。「スライドショー」セクションから「フルスクリーン」という名前のウィジェットを選択します。

    ウィジェットライブラリ
    ウィジェットライブラリでフルスクリーンスライドショーウィジェットを探して選択します。

フルスクリーンスライドショーウィジェットの設定

フルスクリーンスライドショーウィジェットは、Adobe Muse の他のウィジェットとは動作が異なります。少し時間をとってどう動くか確認します。

  1. フルスクリーンスライドショーウィジェットをウィジェットライブラリからページにドラッグします。

    ブラウザーウィンドウ全体の高さと幅の両方に適合するように、デフォルトコンテンツが拡大することに注意してください。

    フルスクリーンスライドショーウィジェット
    フルスクリーンスライドショーウィジェットは、ブラウザーウィンドウに合わせて、サイトの可視領域をカバーするよう広がります。

    デフォルトでは、フルスクリーンスライドショーウィジェットを追加すると、右上隅に前へボタン、次へボタン、カウンターフィールドが表示されます。

  2. 青い矢印をクリックして、オプションパネルの設定を確認します。

    スライドショーオプションパネル
    オプションパネルには、フルスクリーンスライドショーウィジェットに適用されたデフォルト設定が表示されます。

    「フレームサイズに合わせる」オプションは、新規スライド(大きな画像)と新規サムネール画像に自動的に適用され、フルスクリーン表示を容易にします。

  3. 適用するトランジションの種類を選択します。トランジションメニューを使用して、「フェード」、「水平」、「垂直」から選択します。デフォルトでは、「トランジション速度」は 0.5 秒に設定されていますが、必要に応じて速度は調整できます。

    「自動再生」が有効になっている場合は、ページが読み込まれるとすぐにスライドショーの再生が始まり、設定した秒数に基づいて、コンテンツが切り替わります。デフォルトでは、「自動再生」が有効になっていると、各画像が 3.5 秒表示されます。

    フルスクリーンスライドショーウィジェットを構成する場合、ナビゲーション用の前へボタンと次へボタンを有効にするのが一般的です。そうすると、サムネールはデフォルトで非表示になります。ただし、メインのスライドショー画像の上にサムネールを表示したい場合は「サムネール」オプションを有効にできます。

    サムネールが非表示の場合、「次へ」と「前へ」が有効になっていることを確認してください。「カウンター」は任意です。訪問者がセット内のどの画像が今表示されているかを理解するのに役立ちます。

  4. 次へボタン、前へボタン、カウンターインターフェイスをページの特定の部分に表示したい場合、選択ツールを使用して所定の位置に移動し、コントロールを固定します。サムネールをページ上の同じ位置に残しておきたい場合は、同様に、サムネールセットの位置を決めて固定します。次へボタン、前へボタン、カウンターインターフェイスをページの特定の部分に表示したい場合、選択ツールを使用して所定の位置に移動し、コントロールを固定します。サムネールをページ上の同じ位置に残しておきたい場合は、同様に、サムネールセットの位置を決めて固定します。

    レスポンシブサイトにこのウィジェットを追加すると、異なるブレークポイントにわたって固定およびサイズ変更の設定を変更できます。

フルスクリーンスライドショーへの画像の追加

次に、フルスクリーンスライドショーウィジェットに画像を追加します。次の手順に従います。

  1. ファイル/配置を選択します。

  2. 表示される読み込みウィンドウで、Shift キーを押しながら、コンピューター上のいくつか連続する画像ファイルをクリックして選択します。また、アセットのフォルダーから並んでいない画像ファイルを選択する場合は、Command(Mac)キーまたは Control(Windows)キーを押しながら選択します。

  3. 「開く」をクリックすると、選択したファイルがプレースガンに読み込まれます。

    注意:

    選択した画像のサイズや縦横比が異なっていても、「フレームサイズに合わせる」オプションにより、ページのサイズにぴったりと収まるようにサイズが変更されます。

  4. スライドショーを 1 回クリックすると、選択した画像ファイルが追加されます。スライドショーのデフォルト画像は、新しい画像を追加するとすぐに、自動的に削除されます。

  5. ファイル/ブラウザーでページをプレビューを選択します。ブラウザーウィンドウのサイズを変更し、ブラウザーウィンドウに合わせてスライドショーコンテンツのスケールと切り抜きがどう行われるかに注意してください。次へボタンや前へボタンをクリックして、一連の画像をめくります。また、自動再生が有効ならば、画像が再生されるままにします。

  6. ブラウザーウィンドウを閉じて、Adobe Muse に戻ります。

スライドショーウィジェットでのフリーフォームサムネールの構成

「フリーフォームサムネール」オプションにより、スライドショーでサムネールをどう表示するかを完全に制御できます。サムネールを行または行のセットに並べるのではなく、各サムネールを任意の場所に置くことができます。

  1. デザインビューで、ウィジェットライブラリを開き、「スライドショー」セクションを展開します。任意のスライドショーウィジェットをページにドラッグします。

  2. ページ全体が選択されている状態で、サムネール画像をダブルクリックして選択します。コントロールパネルの左上隅にある選択範囲インジケーターで、どのエレメントが選択されているかを確認できます。

    サムネールコンテナ
    選択されている間は、バウンディングボックスがサムネールコンテナを囲みます。

    デフォルトでは、スライドショーウィジェットの中に表示されるサムネールは、「サムネールコンテナ」という名前のコンテナの中に保管されます。外部コンテナのサイズをどう変更するかに従って、この外部コンテナにより、サムネールが直線状、すなわち行に並ぶようにします。「フリーフォームサムネール」オプションを有効にするまでは、サムネール画像のセットは、サムネールが有効になっているすべてのスライドショー用にある 1 つのサムネールコンテナ内で入れ子になります。

フリーフォームサムネールの表示設定

サムネールをランダムに、整列していない状態で表示する方がよければ、外部コンテナを削除して、サムネール画像をそれぞれ、ページ上の所定の位置に置くことができます。次の手順に従います。

  1. スライドショーウィジェットが選択されている間に、青い矢印をクリックしてオプションメニューにアクセスします。

  2. 「フリーフォームサムネール」オプションの横のチェックボックスをオンにします。すぐに、デザインビュー内のサムネールコンテナを囲むバウンディングボックスが消えて、選択範囲インジケーターには「スライドショー」と表示されます。

    サムネールコンテナのオプションパネル
    「フリーフォームサムネール」オプションを有効にすると、サムネールを囲むコンテナが削除されます。

  3. ページ上でオプションメニュー以外の任意の箇所をクリックすると、オプションメニューが閉じます。

    これでサムネールの外部コンテナを削除したので、それぞれのサムネール画像をページデザインに合わせて再配置できます。

  4. 選択ツールを使用して、サムネールを 1 つ選択します。選択している間、選択範囲インジケーターには「サムネール」と表示されます。選択したサムネールを所定の位置に移動します。この手順を繰り返して、すべてのサムネールを再配置します。ブラウザーをスクロールしたりサイズを変更したりしても、各サムネールの位置はそのままにする場合は、各サムネールをピンで固定します。

    注意:

    サムネールコンテナのサイズを変更して、いろいろなサイズのコンテナにする場合は、オプションメニューの「編集をすべてに適用」オプションを無効にしてから、選択ツールを使用して個々のサムネールの隅をドラッグして所定のサイズに変更します。

    レスポンシブサイトでは、サムネールの固定オプションの再整列、サイズ変更、および設定を行うこともできます。

  5. ファイル/ブラウザーでページをプレビューを選択します。スライドショーのサムネールがページ上で分散されます。サムネールをクリックすると、対応する画像がスライドショーに表示されます。

  6. ブラウザーを閉じて Adobe Muse に戻ります。

スライドショーウィジェットのライトボックス表示オプションの設定

コンテンツがライトボックスに表示されると、ページの他の部分は薄暗くなり、モーダルウィンドウがフォーカスを確保し、コンテンツが強調されます。訪問者は、サムネール、次へボタン、前へボタンをクリックして、ライトボックスを操作します。ライトボックスを終了して、通常のサイトビューに戻すには、訪問者は閉じるボタンをクリックするか、Esc キーを押します。

Adobe Muse 内のスライドショーウィジェットすべてにライトボックスオプションがあります。また、「スライドショー」セクション内のウィジェットの 1 つは、事前の構成でライトボックスビヘイビアーを使用するようになっています。ライトボックススライドショーウィジェットは、デフォルトで「ライトボックス」オプションが有効になっています。

ライトボックスに画像を表示するスライドショーを作成するには、次の手順に従います。

  1. デザインビューで、ウィジェットライブラリの「スライドショー」セクションを展開します。任意のスライドショーウィジェットをページにドラッグします。

  2. オプションメニューで、「レイアウト」セクションから「ライトボックス」オプションを探し、オンになっていることを確認します。

    「ライトボックス」オプション
    「ライトボックス」オプションの横のチェックボックスがまだオンになっていなければ、オンにします。

  3. オプションメニューがまだ開いている間に、必要に応じて、それ以外の変更を行い、ウィジェットを設定します。例えば、前へボタン、次へボタン、キャプション、カウンターを表示したり、非表示にしたりできます。ライトボックス表示では、閉じるボタンを有効にしておくことをお勧めします。「閉じるボタン」オプションの横にあるチェックボックスをオンにします。

    閉じるボタン
    (X が付いた)閉じるボタンは、スライドショーの右上隅に表示されます。

    選択ツールを使用すると、必要に応じて、閉じるボタンを別の位置に移動できます。訪問者がライトボックス表示を終了して、モーダルウィンドウを閉じる場合は、閉じるボタンをクリックするか、Esc キーを押します。

    注意:

    ライトボックスウィンドウを囲む境界線の幅を変更する場合は、ライトボックススライドショーウィジェットを選択し、スペースパネルの「パディング」設定を更新します。

  4. ファイル/ブラウザーでページをプレビューを選択して、スライドショーウィジェットをテストします。任意のサムネール画像をクリックして、ライトボックス効果を呼び出し、モーダルウィンドウに対応するスライド画像が表示され、ページの他の部分は薄暗くなることを確認します。

  5. 次へボタンや前へボタンをクリックすると、スライドショー内の画像が切り替わります。

  6. スライドショーのテストの後、閉じるボタンをクリックしてライトボックスビューを終了します。ライトボックスが閉じ、ページコンテンツの他の部分が表示されます。

  7. ブラウザーを閉じて Adobe Muse に戻ります。

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

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