Adobe Muse でのアコーディオンパネルとタブ付きパネルの使用

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

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

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

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

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

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

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

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

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

• 左：220
• 右：220
• 下：2
• 間隔の高さ：10
  

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

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

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

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

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

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

• Web フォント：Kaushan Script（または希望する任意のスクリプトフォント）
• フォントサイズ：26 カラー：#70909D（このカラーの名前は変更できます。「ブルーメニュー」など）
• 行送り：120％
• 整列：中央揃え
  

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

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

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

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

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

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

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

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

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

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

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

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

• フォント：Droid Serif
• フォントサイズ：14
• カラー：#222222
• 整列：左揃え
• 行送り：120％
  

テキストを選択しながら、段落スタイルパネルの下部にある「新規スタイル」ボタンをクリックします。新規段落スタイルをダブルクリックして、名前を変更します。（「本文」など）これで、同じフォーマットを他のテキストコンテンツに再適用するのが簡単になります。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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