この記事には、アコーディオン要素および使用する方法についてご紹介します。
アコーディオン要素について
アコーディオン要素は、ページ上に折りたたみ可能なコンテンツを作成するために使用される要素です。そのため、より清潔なユーザー エクスペリエンスを提供し、コンバージョン率を高めることができます。アコーディオン要素はタブ、スライドショー要素のコンテンツとして使用できるし、ストアのよくある質問を表示するためにも使用できます。
こちらでPageFlyを無料でインストールできます。
このビデオ・チュートリアルをご覧ください
アコーディオン要素のアクセス方法
ステップ1：プラスアイコンをクリックして要素を追加します。
ステップ2：ドロップダウンメニューでアコーディオン要素をクリックします。
ステップ3：対象の要素をページエディタにドラッグ＆ドロップして使用します。
アコーディオン要素ではほとんどの要求を満たすような多くのバリエーションが提供されていますが、お客様の時間が節約できるように、さらに新規のバリエーションを追加していきます。
バリエーションをレイアウントにドラッグしてどのように構成されるか確認できます。
アコーディオン要素の構成
アコーディオン要素には、アピアランスを微調整して最高のコンバージョン率を取得できる多くのパラメータがあります。
レイアウントにある要素を選択して含まれる要素のパラメータを確認します。
この記事には、アコーディオン要素の一般タブとスタイリング タブのパラメータをご紹介します。
一般タブの構成
| コンテンツ | |
| アコーディオンアイテム：アコーディオンを追加したり、削除したり、複製したりします。 |  |
| アコーディオンアイコン：3つのアイコンスタイルから選択できます。 |  |
| 複数オープンを有効にする：この機能はライブページのみで機能します。 | 複数オープンを有効するボタンをオンまたはオフにします。
|
| デフォルト有効アイテム：クリックしなくてもデフォルトで開かれるアコーディオンアイテムを設定します。。
（この機能はライブページのみで機能します。） |
 |
| スクロールトップを有効にする：ユーザがクリックすると、ページが自動的にアコーディオンヘッダーのトップにスクロールされます。
（この機能はライブページのみで機能します。） |
 |
属性パラメータ、可視性パラメータ、アニメーションパラメータに関する詳細情報はこちらをご覧ください。
スタイリングタブの構成
以下の中に選択してスタイルを設定できます。
- アコーディオンヘッダー
- アコーディオンコンテンツ
スタイリングタブの詳細情報については、こちらをご参照ください。
アコーディオンヘッダー
アコーディオン要素はアコーディオンヘッダーとして機能します。アコーディオンヘッダー要素はコンテンツパネルの可視性を制御するボタンとしての役割を果たします。
選択したアコーディオンヘッダーの直上にあるツールバーで複製したり、削除したり、スタイルをコピーしたり、スタイルを貼り付けたりすることができます。
一般タブの構成
| コンテンツ | |
| アコーディオンアイテム：アコーディオンを追加したり、移動したり、削除したり、複製したりします。 |  |
| アコーディオン設定 | |
| ヘッダーのテキスト：アコーディオンヘッダー内のテキストにコンテンツを追加し、スタイルを設定します。 |  |
| アンカーのテキスト：アンカーテキストを追加します。ライブビューで、ページURLの後ろに「＃」がついたアンカーテキストを追加して当該のアコーディオンヘッダーにスクロールダウンします。
（この機能はライブページのみで機能します。） |
 |
| アイコンの表示：アコーディオンヘッダーのアイコンを追加します。 |  |
スタイリングタブの構成
アコーディオンヘッダーのスタイリングは、以下のパラメータ以外、通常時、マウスオーバー時、活性・選択時からヘッダーのステータスを選択して設定できます。
スタイリングタブの詳細情報については、こちらをご参照ください。
含まれる要素の設定
アコーディオン要素は見出し、段落、画像など複数のコンテンツのグループです。他の要素をドラッグ＆ドロップすることでアコーディオンコンテンツを普通のセクションとして編集できます。
アコーディオンコンテンツ内にあれば、どの要素でもドラッグ＆ドロップすることができます。
