アコーディオン
アコーディオンは、ユーザーが要求したときにのみ特定のコンテンツを表示し、すっきりとしたレイアウトを作成するのに最適な方法です。
アコーディオンの使い方
Section titled “アコーディオンの使い方”左側のコンテンツ サイドバーの カテゴリ 「アコーディオン」 をクリックすると、アコーディオンを追加できます。
セクションテンプレートをウェブサイト上の好きな位置にドラッグ＆ドロップするか、クリックして最後に選択した要素の後ろに貼り付けるだけです。アコーディオンを追加すると、次のようになります。
ご覧のとおり、アコーディオンは常にトリガーとコンテンツ部分で構成されます。
- これがトリガーです。見出しをはじめとする要素は、ウェブページ、ファイル、その他の要素（今回の場合はコンテンツ）への参照リンクとして使用できます。トリガーをダブルクリックして左側のパネルで設定を変更することで、トリガーをカスタマイズできます。
- これはアコーディオンのコンテンツです。コンテンツはテキスト要素、画像、表など、何でも構いません。
- この例では、コンテナ要素を使用し、コンテンツを表示するためにテキスト要素 (4.) を追加しました。
次の画像に示すように、親コンテナ要素には、画像、ビデオ、見出しなど、あらゆるものを追加できます。ここでは、テキスト要素の上に画像要素を追加しました。
トリガーがクリックされた後にこのアコーディオンのコンテンツを表示するには、アニメーションが必要です。これはセクションテンプレートなので、コンテナ要素には既にアニメーションが追加されています。ただし、これらの設定を使用してアニメーションを変更できます。例えば、どのように開くか、どのくらいの速度で開くか、最初の項目を最初に開くか閉じるかなどです。アニメーションが設定された要素は、下部のパンくずリストで要素名の前に星アイコンが表示されます。
アコーディオンをニーズに合わせてカスタマイズしたら、上部バーの目のアイコンをクリックしてプレビューモードを有効にできます。これにより、アコーディオンの動作をテストできます。
画像アコーディオン
Section titled “画像アコーディオン”既に述べたように、トリガーとして様々な要素を使用できます。見出しの代わりに画像要素を使用することもできます。その場合、 「画像タブ」 は便利なセクションテンプレートです。
画像アコーディオンを Web サイトに追加すると、次のように表示されます。
- この例では、画像要素がトリガーとなります。プレースホルダー画像は、新しい画像をアップロードするか、 ファイル から画像を選択することで変更できます。
- プレースホルダーテキストを変更することで、画像の上にテキストを追加できます。
- 「リンク」 では、トリガーを他のページ、外部ソース、特定の要素など、任意のものにリンクできます。このアコーディオン、そしてアコーディオン全般では、 「次の要素」 オプションが最も便利です。そのため、すでに選択されています。このオプションを選択すると、トリガーはエディター内の後続の要素またはコンテナにリンクされます。今回の場合は、コンテンツボックスです。
トリガーとコンテンツボックスをさらに作成するには、トリガーを選択して[CTRL]+[D]（macOSの場合は[CMD]+[D]）を押して複製するか、要素の上にマウスオーバーして小さなコピーアイコンをクリックします。アコーディオンアイテムをコピーする際は、トリガーとそれに対応するコンテンツが互いに重なり合っていることを確認してください。重なり合っていないと、 「次の要素」 リンクメカニズムが意図したとおりに機能しません。要素にマウスオーバーしてラベルを確認することで、トリガー1の次にコンテンツ1、といった具合に簡単に確認できます。