Adobe Muse でタブ付きパネルまたはアコーディオンパネルを使用して、関連するコンテンツのグループを表示してスタイル設定する方法について学習します。

注意:

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

タブ付きパネルウィジェットの追加

  1. ウィジェットライブラリパネルを開きます(ウィンドウ/ウィジェットライブラリを選択)。パネルを展開して、タブ付きパネルウィジェットを選択します。ウィジェットをウィジェットライブラリからデザインパネルまでドラッグします。

    タブ付きパネルウィジェットをページにドラッグすると、デフォルトのフォーマットで表示されます。
    タブ付きパネルウィジェットをページにドラッグすると、デフォルトのフォーマットで表示されます。

  2. 右側にある一番上のタブを 3 回クリックします。最初にクリックすると、タブ付きパネル全体が選択され、2 回目にクリックすると、タブコンテナが選択され、3 回目にクリックすると、右側にあるタブが選択されます。

    選択範囲インジケーターをチェックして、現在ウィジェットのどのサブ要素が選択されているか確認します。Delete キー(Mac)または Backspace キー(Windows)を押して、3 番目のタブを削除します。この変更を加えた後、残りのタブは 2 個のみです。ページ上の他の場所をクリックします。

  3. ウィジェットをもう一度クリックして、タブ付きパネル全体を選択します。ウィジェット全体のサイズを変更するため、ハンドルをドラッグして幅を 840、高さを 645 に設定します。ハンドルをドラッグする間、表示される計測値を参照できます。

    変形パネルをチェックして、W(幅)フィールドと H(高)フィールドの値を確認することもできます。

    幅フィールドと高さフィールドを確認して、サイズを変更したウィジェットの寸法をチェックします。
    幅フィールドと高さフィールドを確認して、サイズを変更したウィジェットの寸法をチェックします。

  4. 選択ツールを使用して、タブ付きパネルウィジェットをページ上の上部付近で、垂直方向に中央揃えで配置します。

  5. コントロールパネルの固定インターフェイスでの上部中央の位置をクリックして、タブ付きパネルウィジェットをピンで固定します。オブジェクトがスクロールしないように、所定の位置へピン固定する方法の詳細については、このリンクを参照してください。

  6. タブ付きパネルウィジェットを選択しながら、左のタブをクリックしてタブコンテナを選択します(上部のタブの両方を保持する要素)。選択ツールを使用して、高さが約 98 ピクセルになるまで中央のハンドルを下にドラッグします。

    スペースパネルで、以下の画像に示す値に設定します。

    • 左:220
    • 右:220
    • 下:2
    • 間隔の高さ:10
    間隔パネルで、タブコンテナの間隔値を設定します。
    間隔パネルで、タブコンテナの間隔値を設定します。

  7. これらの変更を加えた後、選択ツールを使用して、タブ付きパネルの上部がヘッダー長方形の下部と接触して、2 つのオブジェクト間に垂直方向の間隔がなくなるようにタブ付きパネルウィジェット全体をページの最上部までドラッグします。

    必要に応じて、ズームインして要素の整列状態を詳しく表示できます。完了したら、倍率を 100%に戻します。

タブ付きパネルウィジェットのスタイル設定

これで、タブ付きパネルウィジェットを追加しました。次のパートでは、スタイルを更新して 2 つのタブをデザインします。

  1. 左のタブを 3 回クリックして、左のタブを選択します。ステートパネルを開いて、通常ステートを選択します。塗りメニューを使用して、塗りのカラーを設定します。線幅を 0 に設定します。

  2. ステートパネルでロールオーバーステートを選択します。タブのロールオーバーステートの塗りのカラーを 571E00 に設定します。ロールオーバーステートの塗りのカラーを設定すると、マウスダウンステートも自動的に更新されるのがわかります。

    アクティブステートを選択している間、タブにも同じ塗りのカラーが適用されます。通常ステートが前のステップで選択した塗りのカラーで塗られ、他の 3 つのステートが 571E00 で塗られました。

  3. 左のタブをもう一度クリックして、ラベルを選択します。ラベルを選択すると、選択範囲インジケーターに「ラベル」という文字が表示されます。ステートパネルで通常ステートを選択してから、テキストパネルを使用して以下の画像に示された次の属性を設定します。

    • Web フォント:Kaushan Script(または希望する任意のスクリプトフォント)
    • フォントサイズ:26 カラー:#70909D(このカラーの名前は変更できます。「ブルーメニュー」など)
    • 行送り:120%
    • 整列:中央揃え
    テキストパネル内で設定を更新して、ラベルテキストのスタイルを設定します。
    テキストパネル内で設定を更新して、ラベルテキストのスタイルを設定します。

  4. ラベルを選択しながら、段落スタイルパネルの下部にある「新規スタイル」ボタンをクリックします。必要に応じてこのフォーマットを再適用するには、1 回クリックして、この新しい段落スタイルの名前を変更します。(「ヘッドタブ」など)

  5. ステートパネルを確認すると、通常ステートを選択しながらラベルに適用したフォーマットが、ロールオーバーとマウスダウンの両方のステートにも適用されているのがわかります。アクティブステートを選択しながら、「head-tabs」段落スタイルをもう一度クリックして、アクティブステートにフォーマットを適用します。これで、両方のタブのすべてのステートに対してスタイルが設定されました。

    通常ステートをもう一度選択します。

  6. テキストツールを使用して、すべてのタブでラベルテキストを選択し、適切なラベル名を入力します。

  7. 左のタブを選択してステートパネルを確認すると、各タブと各ラベルに最終のフォーマットが適用されているのがわかります。右のタブをクリックすると、各タブのテキストコンテンツを除いて、左右のステートの外観が同じであることがわかります。

    Adobe Muse のステートパネルで各タブのフォーマットを確認します。
    ステートパネルで各タブのフォーマットを確認します。

タブ付きパネルウィジェットのコンテンツエリアへのテキストフレームの追加

  1. ここで、異なるラベルが付けられた 2 つのタブを交互にクリックしてみましょう。両方のタブのプレースホルダーテキストが異なっているため、一方のコンテナが表示され、もう一方のコンテナが非表示であることがわかります。

  2. ウィジェットの右のタブをクリックします。右のタブを選択すると、対応するコンテンツエリアがタブの下に表示されます。これは、ページを編集する際や、ライブの Web サイトで編集する際に、デザインビューで発生するビヘイビアーと同じです。タブ付きパネルウィジェットが非常に役立つ理由は、単一のページにさらに多くのコンテンツを効率的に表示できることにあります。

  3. タブのコンテンツエリアを選択します。コンテンツエリアが選択されている場合は、選択範囲インジケーターに「コンテンツエリア」という文字が表示されます。プレースホルダー画像ファイルを選択し、Delete キー(Mac)または Backspace キー(Windows)を押して削除します。

  4. テキストツールを使用して、既存のプレースホルダーテキストのヘッダーを選択します。太字のヘッダーテキスト「Mauris sit amet」を選択して削除します。

  5. 一時的に Adobe Muse からデスクトップに切り替えます。サンプルファイルフォルダーを開いて、「text-about-ourstory.txt」という名前のファイルを探します。ファイルをダブルクリックして、テキストエディターで開きます。ページの最初の部分(「 ... crafted through years of baking for friends and family」という行まで)をコピーします。

  6. Muse に戻ります。テキストツールを使用して、既存のプレースホルダーテキストを選択します。テキストフレームにコピーしたテキストコンテンツをペーストします。余分な改行を 1 つ残して、テキストフレームの上部に戻ります。

  7. テキストフレームを選択しながら、テキストパネルを使用して次の設定を選択し、テキストをフォーマットします。例えば、次の設定を選択できます。

    • フォント:Droid Serif
    • フォントサイズ:14
    • カラー:#222222
    • 整列:左揃え
    • 行送り:120%
  8. テキストを選択しながら、段落スタイルパネルの下部にある「新規スタイル」ボタンをクリックします。新規段落スタイルをダブルクリックして、名前を変更します。(「本文」など)これで、同じフォーマットを他のテキストコンテンツに再適用するのが簡単になります。

  9. スウォッチパネルで、カラー値 #222222 をダブルクリックして、名前を変更します。(「katieblack」など)

  10. コントロールパネルで、テキストフィールドの線のカラーを #222222(katieblack)に設定して、線幅を 5 ピクセルに設定します。

  11. 塗りメニューを使用して、テキストフィールドの塗りのカラーをライトベージュ(#F8F3E2)に設定します。「画像」セクションの横にあるフォルダーをクリックして、サンプルファイルフォルダー内にある bg-texture.png という名前のファイルを参照して選択します。サイズ調整メニューを「並べて表示」に設定します。

  12. スペースパネルで右と左の間隔を設定します。例えば、左の間隔を 24 に、右の間隔を 15 に設定できます。

    間隔の値を設定して、ペーストしたテキストコピーの周囲にビジュアル空間を作成します。
    間隔の値を設定して、ペーストしたテキストコピーの周囲にビジュアル空間を作成します。

  13. 次に、各タブに対応する各コンテンツエリアコンテナにコンテンツを追加します。

    選択ツールを使用して、テキストフィールドのサイズを変更します。コンテナの左側にドラッグしてから、ハンドルを使用して利用可能なコンテンツエリア空間(およそ幅 390 ピクセル x 高さ 381 ピクセル)の約半分まで幅を拡張します。

タブ付きパネルでのテキストフレームの複製

次に、既存のテキストフレームを複製して、コンテンツエリアの右側を塗りつぶすための 2 番目のテキストフレームを作成します。

  1. 選択ツールを使用して、テキストフレームを選択します。Option キー(Mac)または Alt キー(Windows)を押しながら、テキストフレームの複製コピーをコンテンツエリアの右側にドラッグします(以下の画像を参照)。

    表示される整列ガイドを使用して、右のテキストフレームを左のテキストフレームに水平方向に整列します。

    既存のテキストフレームを複製して、右側に 2 番目の段組を作成します。
    既存のテキストフレームを複製して、右側に 2 番目の段組を作成します。

  2. 一時的に Muse から、タブ付きパネルのコンテンツを含んでいるテキスト編集プログラムに切り替えます。複製タブにペーストするコンテンツをコピーします。

  3. Muse に戻ります。複製した右テキストフレームの既存テキストをすべて削除します。クリップボードからコピーした新規テキストコンテンツをペーストします。

  4. 必要に応じて、選択ツールを使用して、両方のテキストフレームをコンテンツエリア内の希望の場所で整列し、中央に配置します。

  5. テキストフレームを選択しながら、Esc キーを 1 回押して複製したタブのコンテンツエリアを選択します。線幅を 0 に設定して、塗りのカラーを「なし」に設定します。

これでテキストフレームのコピーはほぼ終了です。最後のパートでは、左のテキストフレームのテキスト内部で回り込む小さな画像を追加します。

アコーディオンパネルの使用

アコーディオンパネルウィジェットは、画面上のより小さな領域に多数のコンテンツを表示する場合に便利です。折りたたみと展開のビヘイビアーにより、ビジターがラベルパネルをクリックすると、それに対応するコンテンツ領域が表示されます。デスクトップサイトに加えて、アコーディオンパネルウィジェットはモバイルレイアウトでコンテンツを表示する場合にもよく使用されます。

このセクションでは、サイトの個々のページにコンテンツを追加する方法について学びます。ここでは、アコーディオンウィジェットという別のタイプのウィジェットを使用します。パネルウィジェット(アコーディオンウィジェットとタブ付きパネルウィジェットの両方)は、画面の小さな領域内にページ上のコンテンツをさらに表示できるため役に立ちます。

  1. デザインビューでプロジェクトを開き、プロジェクトの編集を開始します。

  2. ファイル配置を選択します。読み込みダイアログボックスで、アセットが格納されているフォルダーに移動し、必要な画像を選択します。「選択」をクリックし、ページの一番上を 1 回クリックして、画像をヘッダーテキストとして元のサイズでページ上に配置します。このヘッダーの下にアコーディオンウィジェットを追加します。

Web ページへのアコーディオンの追加

  1. ウィジェットライブラリを開きます。(ウィンドウウィジェットライブラリを選択して開きます。また、既に開いている場合には、トップタブをクリックすると、ドッキングしているパネルセットの中でウィジェットライブラリをアクティブにすることができます)。

  2. 「パネル」をクリックして、パネルウィジェットのリストを展開します。アコーディオンウィジェットを選択します。アコーディオンウィジェットをページ上にドラッグし、ウィジェットをページコンテンツ領域の左上側に配置します。

    アコーディオンウィジェットをドラッグして Adobe Muse ページに配置します。
    アコーディオンウィジェットをドラッグしてページに配置します。

  3. 選択ツールを使用して、ウィジェットの様々なコンポーネントを選択します。ウィジェット全体を選択すると、コントロールパネルの左上にある選択範囲インジケーターには、「ウィジェット」と表示されます。もう一度クリックすると、選択範囲インジケーターが更新されて、選択したものがコンテナであるか、テキストフレームであるかを示すようすがわかります。選択範囲インジケーターは、ウィジェットのどの部分が現在選択されているかを示します。

    ウィジェットのエレメントの選択を解除するには、Esc キーをクリックして選択範囲を 1 レベル取り消すか、Esc キーを何度も押して、入れ子エレメントを出るまで取り消します。または、ウィジェット外の、ページの他の部分をクリックして離れます。

    デフォルトでは、アコーディオンウィジェットにはパネルが 2 つあります。上部パネルには、プレースホルダータブ名 Lorem 1 が表示され、下部パネルには、プレースホルダータブ名 Ipsum 2 が表示されます。

  4. 丸い青矢印アイコンをクリックし、ウィジェットオプションダイアログボックスを開きます。「編集をすべてに適用」オプションがオンになっていることを確認します。このオプションにより、アコーディオンで 1 つのタブ名に対して行うどのような変更も、すべてのタブに適用されます。

    アコーディオンウィジェットのオプションパネルで「編集をすべてに適用」チェックボックスが選択されていることを確認します。
    アコーディオンウィジェットのオプションパネルで「編集をすべてに適用」チェックボックスが選択されていることを確認します。

  5. 選択ツールを使用し、ウィジェットを 1 回クリックして選択し、右側のハンドルを右へドラッグして、以下の画像に示すように 2 つの列を十分カバーする程度にウィジェットの幅を拡張します。

    ウィジェットのハンドルをドラッグし、ウィジェットを拡張して 2 列にします。
    ウィジェットを選択した状態で、右側のハンドルをドラッグして 2 つの列をカバーするまで拡張します。

  6. ウィジェットの一番下(Ipsum 2 の下)にあるプラス(+)記号をクリックして、3 番目のパネルを追加します。3 番目のパネルに、Ipsum 3 というプレースホルダーが表示されます。

次のセクションでは、テキストコンテンツをアコーディオンウィジェットのパネル内に配置して入力します。最初に、アコーディオンウィジェットの最初のパネルの上に表示されている一番上のタブ名を更新します。

アコーディオンパネルへのテキストの追加

  1. 選択ツールを使用して、現在 Lorem 1 という名前のトップタブのテキストフレームを選択します。Lorem 1 を 1 回クリックしてウィジェット全体を選択し、トップタブに対応するコンテナを展開します。それから Lorem 1 のテキストをクリックして、テキストフレームを選択します。テキストフレームを選択すると、選択範囲インジケーターには「テキストフレーム」と表示されます。

  2. 編集のためにプレースホルダーテキスト Lorem 1 をダブルクリックし、テキストを入力します。

  3. 最初のタブの下にあるライトグレーの大きなコンテナを選択します。テキストツールを使用して、テキストフレームを大きい方のコンテナにドラッグして開きます。

  4. 新しいテキストフレーム内に、ヘッダーテキストを入力します。

背景画像を使ったアコーディオンのトップタブの塗り

  1. ヘッダーを表示しているアコーディオンウィジェットのトップタブを選択します。

  2. 丸い青矢印ボタンをクリックすると、オプションメニューが開きます。「編集をすべてに適用」オプションの選択を解除します。オプションメニューから離れた位置をクリックし、メニューを閉じます。

  3. 選択範囲インジケーターに「テキストフレーム」と表示されるまで、トップタブを 2 回クリックします。トップタブのテキストフレームを選択した状態で、コントロールパネルの「塗り」リンクをクリックし、塗りメニューを開きます。カラーピッカーをクリックして、背景の塗りのカラーを、デフォルトのダークグレーカラーではなく、なしに設定します。

  4. 画像セクションのフォルダーアイコンをクリックし、読み込みダイアログボックスを開きます。アセットフォルダーに移動し、追加する画像を選択します。

  5. スペースパネルを開きます。「パディング:」の「L」(左)セクションの上向き矢印を押し続けて、ヘッダーの前のスペースを増やし、テキストがタブの背景画像の中心に位置するようにします。

    アコーディオンの間隔の構成Adobe Muse のウィジェット
    スペースパネルを使用して、左のパディングを増やし、テキストをアコーディオンの中央に配置します。

アコーディオンウィジェットの最初のタブが完成しました。

最初のタブを編集する際に「編集をすべてに適用」設定を無効にした場合、変更は他のタブには反映されません。アコーディオンパネルで他のタブのスタイルを個別に設定する必要があります。

アコーディオンウィジェットの回転

デフォルトでは、アコーディオンパネルウィジェットはラベルパネルを一番上に、その下にコンテンツ領域を、縦方向に表示するよう設定されています。

デフォルトで、Adobe Muse のアコーディオンウィジェットは縦に表示されます。
アコーディオンパネルウィジェットをページに追加すると、縦に表示されます。

アコーディオンウィジェットを使用して水平方向のスライダーを作成するには、次の手順を実行します。

  1. デザインビューで、ウィジェットライブラリを開き、パネルセクションを展開します。

  2. 「パネル」セクションから「アコーディオン」オプションを選択し、ページにドラッグします。

  3. 選択ツールを使用して、1 回クリックしてウィジェット全体を選択します。コントロールパネルの左上隅にある選択範囲インジケーターに、「アコーディオン」と表示されます。

  4. Shift キーを押したまま回転させると、回転を抑えて 45°刻みで動かすことができます。ウィジェットが回転するにつれて、ツールヒントには、現在の回転角度が表示されます。

    アコーディオンの回転方法に従って、-90° または +90° 回転させます。
    アコーディオンの回転方法に従って、-90° または +90° 回転させます。

  5. ウィジェットの回転を終了したら、「プレビュー」リンクをクリックするか、ブラウザーでページをプレビューし、アコーディオンによって期待どおりにパネルの展開、折りたたみができることを確認します。ラベルコンテナは、クリックすると対応するコンテンツ領域が開くようになっているかを確認します。

    残るは、ラベルとコンテンツ領域コンテナにコンテンツを入れ、横向きに表示するのでなく、「表を上に」する方向に表示するだけです。

    コンテンツ領域内にテキストコンテンツを表示するには、次の手順に従います。これまでの説明と同じ方法を使用して、コンテンツ領域コンテナ内のテキストフィールドを回転させます。

     

  6. コンテンツ領域内のデフォルトテキストを 2 回クリックします。1 回目のクリックでアコーディオンウィジェット全体が選択され、2 回目のクリックでコンテンツ領域コンテナが選択されます。コンテンツ領域が選択されている間に、選択ツールを使用し、サイズ変更ハンドルをクリックしてドラッグすることでコンテンツ領域のサイズを拡張します。

  7. コンテンツ領域がまだ選択されている間に、もう一度コンテンツ領域内のテキストフレームを選択します。テキストフレームのいずれかの角の近くにカーソルを置くと、やがて回転カーソルが表示されます。テキストフレームを回転させ、外側のウィジェットと同じく 90° になるまで Shift キーを押したままにします。

    コンテンツ領域にテキストを表示するには、既存のプレースホルダーのテキストコンテンツを回転させます。
    コンテンツ領域にテキストを表示するには、既存のプレースホルダーのテキストコンテンツを回転させます。

  8. テキストフレームを回転させた後、選択ツールを使用してコンテンツ領域内の位置を変更します。テキストツールを使用して、プレースホルダーテキストを実際に表示するテキストに置き換え、コントロールパネルとテキストパネルの書式設定オプションを使用して、テキストのスタイルを指定します(または、段落スタイルを適用して表示を更新します)。

  9. 必要に応じて、画像を配置し、長方形を描き、あるいは、HTML を埋め込んで、コンテンツ領域コンテナに入れていきます。このコンテンツを回転させる必要はありません。コンテンツは回転済みのコンテナ内で自動的に縦に配置されます。

ラベルコンテナのテキストの更新

ラベルコンテナ内のテキストを更新する方法はいくつかあります。

ラベルが短く、そのまま「横向き」にする場合(書棚の本を模す場合など)、テキストツールを使用して既存のプレースホルダーテキストを選択し、所定のラベルを入力します(以下の画像を参照)。

アコーディオンウィジェット用のテキストツールを使用して、ラベルテキストを編集します。
アコーディオンウィジェット用のテキストツールを使用して、ラベルテキストを編集します。

テキストラベルを使用しない場合は、単純にラベルコンテナ内の既存のプレースホルダーを削除します。それから、コントロールパネルや塗りパネル(ステートパネルの並び)の書式設定オプションを使用して、各ラベルに異なるカラーを適用します(以下の画像を参照)。ラベルコンテナの外観を個別に更新するには、青い矢印ボタンをクリックしてオプションメニューにアクセスし、「編集をすべてに適用」オプションを無効にします。

塗りメニューとテキストの書式設定オプションを使用して、ラベルコンテナと対応するテキストコンテンツを塗り分けます。
塗りメニューとテキストの書式設定オプションを使用して、ラベルコンテナと対応するテキストコンテンツを塗り分けます。

もう 1 つの方法は、画像編集プログラムを使用して画像を作成し、ラベルパネルに挿入する方法です。ページ上に画像を配置し、カットし、テキストツールを使用してラベルテキストを選択した上で、その画像をラベルコンテナに貼り付けます。必要に応じて、縦書きのテキストを画像に含めることができます(以下の画像を参照)。

縦書きテキストを持つ画像をラベルコンテナに挿入します。
縦書きテキストを持つ画像をラベルコンテナに挿入します。

アコーディオンパネルへのアンカーリンクの追加

アコーディオンパネルにアンカーリンクを追加することによって、アコーディオンウィジェットにページエレメントをリンクできます。以下で、アコーディオンウィジェットにアンカーリンクを追加する方法について説明します。

  1. アンカーリンクを追加するアコーディオンウィジェットを選択します。アンカーリンクを追加するタブをクリックします。

  2. アンカーツールをクリックして、プレースガンのアンカーリンクを読み込みます。

    ツールパネルからアンカーツールを選択します。
    ツールパネルからアンカーツールを選択します。

  3. アコーディオンウィジェットにアンカーリンクを配置します。

    アンカーの名前を変更するポップアップが表示されます。アンカーの適切な名前を入力して、「OK」をクリックします。

    アコーディオンウィジェットにアンカーリンクを配置
    アコーディオンウィジェットにアンカーリンクを配置

    Web サイトの任意のページから任意のページエレメントにこのアンカーをリンクできるようになりました。

  4. このアンカーにページエレメントをリンクするには、リンクするページエレメントを選択します。上部のハイパーリンクドロップダウンから、作成したアンカーを選択します。

    ライブサイトで、ページエレメントをクリックすると、アンカーリンクを配置した「アコーディオン」タブがページに表示されます。

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

リーガルノーティス   |   プライバシーポリシー