Wix Studio エディタ：アコーディオンを追加・カスタマイズする | サポートセンター

Wix Studio エディタ：アコーディオンを追加・カスタマイズする

読了時間：5分

アコーディオン要素を使用すると、小さなスペースに多くのコンテンツを表示することができます。訪問者がアイテムを開閉できるようにすることで、画面をスクロールすることなく、すばやく必要な情報を見つけてもらうことができます。

この記事では、以下の項目について説明します：

プリセットのアコーディオン要素から、好みのデザインのものを追加します。アコーディオン内の各アイテムは、必要な要素や情報に変更することができます。

アコーディオン要素に表示されるアイテムを管理します。アイテムの名前を変更したり、さらにアイテムを追加したり、アイテムの表示順序を変更したりすることができます。

ヒント：

訪問者がページを読み込んだ際に表示されるアコーディオンの外観を設定します。すべてのアイテムが開くようにしたり、閉じてシンプルな外観にしたりすることができます。また、訪問者が同時に複数のアイテムを開くことができるかを選択することもできます。

アコーディオン要素を選択します。
「設定」アイコンをクリックします。
「デフォルトの状態を選択」下でオプションを選択します：
- すべてのアイテムを閉じる：訪問者には、すべてのアイテムが閉じた状態で表示されます。
- 最初のアイテムを開く：訪問者には、最初のアイテム以外は閉じた状態で表示されます。
- すべてのアイテムを開く：訪問者には、すべてのアイテムが開いた状態で表示されます。
「複数の開いているアイテムを許可する」トグルをクリックします：
- 有効：訪問者は、アコーディオンのアイテムを複数開くことができます。
- 無効：訪問者は、一度に 1つのアイテムのみ開くことができます。
（オプション）訪問者がクリックしてアイテムを開く際のトランジションエフェクトを追加します。

注意：

上記で「すべてのアイテムを開く」を選択した場合は、「複数の開いているアイテムを許可する」トグルは表示されません。

アコーディオンは、サイトページと調和するよう、アイテムのタイトル、各アイテムの内容が表示されるコンテナ、またはタイトルとコンテナが表示されるアコーディオン自体のデザインをカスタマイズすることができます。

ドロップダウンからデザインしたい部分を選択します：
- タイトル：アイテムのタイトル。訪問者がタイトルにマウスオーバーした際、見た目が変化するよう、タイトルをデザインすることができます。
- コンテナ：各アイテムの内容が表示されるコンテナ。
- アコーディオンアイテム：タイトルとコンテナが表示されるアコーディオン自体。
利用可能なオプションを使用して、背景の塗りつぶし、フォント、枠線、角などをデザインします。

必要に応じて、アコーディオン要素のレイアウトを調整します。アイテムを開閉するためのアイコンとその位置を変更したり、タイトルの余白を調整したりすることができます。

ヒント：

個々のアイテムに CSS グリッドを適用すると、ピクセル単位で正確なレイアウトを作成することができます。

アコーディオン要素を選択します。
「レイアウト」アイコンをクリックします。
アコーディオン要素のレイアウトを調整します：
- アイコンを選択：アイテムを開閉するためのアイコンを、「矢印」または「プラス」から選択します。
- アイコンの位置：アイテムを開閉するためのアイコンを、左または右のどちらに表示するかを選択します。
- タイトルの余白：スライダーをドラッグして、タイトルの周囲に横方向と縦方向の余白を追加します。

この記事では下記を説明します：