# アコーディオン ### アコーディオン要素について [アコーディオン要素](https://help.pagefly.io/manual/accordion-element/)を使用すると、ページ上で折りたたみ可能なコンテンツを作成でき、よりクリーンなユーザーエクスペリエンスを提供し、コンバージョン率を高める可能性を秘めています。[タブ](https://help.pagefly.io/manual/tabs-element)、[スライドショー](https://help.pagefly.io/manual/slideshow-element)要素、またはストア内のFAQを表示するためにアコーディオン要素を使用します。 詳細なステップに進む前に、以下のビデオをご覧ください。 {% embed url="" %} ### アコーディオン要素にアクセスする方法 * ステップ1：左側のツールバーの上から2番目にある「**要素**」アイコンをクリックします。次に、「**PageFly**」タブでアコーディオン要素を選択します。 * ステップ2：目的の要素をページエディターにドラッグアンドドロップして使用を開始します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-8a342ba4a6154838331d71f6ec8d25fad4ec3511%2FAD_4nXdisrhM2bxX5WQdPX95yiTm2JWVP1rn6x6iURLmwsg4vFaHoXeKF5M6otw6AO1I1VH8O9_cxn3jBO4AoPZofHxgz2HfO74rGRPWGpa3xKO4dOMNL4LhS64I2tx2tAb-In5p0n6DJ_J0pT7u5WTVkeywnUuvUcpwaYrnWBU5BaUjQ.gif?alt=media) アコーディオン要素には、ほとんどのニーズに対応するための3つのバリエーションがあり、時間を節約するためにさらに多くのバリエーションが定期的に追加されています。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdBFO0Dvch6-ay6QXHbVMycXGsVVPQo8U9MJo6iKH2fWZUWlSQmPuFz69Xqgq0BypPirdUkvKyFWodVCYXGVTvolbUJz9vqFrs6ng4w-HdrQ6EIxQV3hpEl9wpRnpP49yhgZ5CuI7SFM2dlJjjBkeywnUuvUcpwaYrnWBU5BaUjQ.png) バリエーションをレイアウトにドラッグして、設定方法を確認してください。 ### アコーディオン要素の設定方法 アコーディオン要素には、最適なコンバージョン率を得るためにコンテンツの外観を微調整するための多数のパラメーターが用意されています。 * ステップ1：左側のツールバーの上から2番目にある「**要素**」アイコンをクリックします。次に、「**PageFly**」タブでアコーディオン要素を選択します。 * ステップ2：必要なバリアントをページエディターにドラッグアンドドロップして使用を開始します。 レイアウト内の要素を選択して、そのパラメーターを確認します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-9ef34916faefb7cd495dc9b0c518caf31de22036%2FAD_4nXdHmgtBIfa6BS3NpSjd3RbiWVnqrNEXTciTLUZ2txXgFfkxr84l5rFrNxEznDUbdbob4Vm9UKIkX97e4KJRyZfGBDr0hoJVerCeR7aDghAiq1kQVybYI1HAjAokCxx2FrWUpbgz8eQJG9HGM53DLwkeywnUuvUcpwaYrnWBU5BaUjQ.png?alt=media) この記事では、アコーディオン要素の「全般」タブと「スタイル設定」タブのパラメーターについて説明します。 #### 全般設定 | Accordion items: アコーディオンの追加/削除/複製 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0a9210b4a851e3a0f2aa573d7a7af9c80893e9ab%2FAD_4nXcLONgE3wGl1mAPsg7mjczQ2z0xIRjeTWP3ximULAncHeweeVJ7U5MRpDppQ-Fd3Het9ow2MVvxpH13BpiVMA45LOW2f48wj0Z_SHxfSJbl7_gzW71H24Iv-5s5yjO2MAqcw6iHniCAkI4gjwcWkeywnUuvUcpwaYrnWBU5BaUjQ.gif?alt=media) | | Accordion icon: 好みに合わせた3つのアイコンスタイル | | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdzcXZRUlYOu26Z5ejNf8e_Io_zp5JXXFEMXQkPme0ITV8ya0uS0SW3vGiDtkZx3bsqbMqXuXQXhGqLGjs4Tu9iLxVOPw4B1nUefgzjNNya9H2aOxw5h9qNKTucjPFXVLPJbfnrQ9hOBMfIhkZekeywnUuvUcpwaYrnWBU5BaUjQ.png) | | Icon Size: アイコンのサイズを設定 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-cadc0b867bea143071a2bf67514f6c2779c8d48f%2FAD_4nXfzMKfPDb3ua-wecjvI6N9m5p7J_jMTRF40WIMtiJVe7-n4OPMN07E4TK46iEhyuzeqWILFZ53mvb8FO29cZatIaXjp2T7S9gu-7kXsh_MhSgRr2v4Vl2gT4Rh3JRPMMcItBPnyGFkR_2_hZrCIkeywnUuvUcpwaYrnWBU5BaUjQ.png?alt=media) | | Icon Position: 左または右を選択します。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0a1c9183829ebb0438dbbeea3909ae3325ca9756%2FAD_4nXddy7B44IoXKVHGmS_T7rkNlnhwySuzR2FZv8samwrc_Z62G5FZ8IyTAQZZeY7P66Ix60vXLkwwCmkkJfYDmqhQe8ge9sLOB9AEVm9vhUh2nYO9qaGyNuEV4ZSooIDexX_3shK11xmyOx_5XWMVWwkeywnUuvUcpwaYrnWBU5BaUjQ.png?alt=media) | | Allow Open Multiple: この機能はライブページでのみ機能します | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0b2ff5b12e61a510f2b563688572f8c63041d067%2FAD_4nXdtnGH3FLYDZMzNJM_7PTMs21ygYn-UjKqQCazovsjNfPIS3a7EuoKY4ACK_6aMzuNCb6Ha7FjRL3wCRFkepRB9Ir3az8aU1NHhNZ0ECANZX6Ylw_UYxS1RTzUniJrVtsMjeI_IRBt2zmu_X6BKkeywnUuvUcpwaYrnWBU5BaUjQ.png?alt=media) 許可されている場合、ライブビューでは複数のアコーディオンアイテムが表示されます: | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-fa006e653cf7e25d5144eed834b6458093e19d7c%2FAD_4nXenFmPMw6MFGAcjN4Hfg3ubkH3H0DuQPybefuiuNFCrvhGMlLCU-sVfISXktFA3aBoJvQgd042Du6j5u-yLkfHMYPqkATtkukaJJ1Jz-OIDhHHJC-WtktMdDLlXcFEa4dE-I4BjrrwIoWNnM-v8TwkeywnUuvUcpwaYrnWBU5BaUjQ.png?alt=media) | | Default Active Item: クリックせずにデフォルトで開くアコーディオンアイテムです。（この機能はライブページでのみ機能します） | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-aee31911124d93dc49e44a346d87a999753aa743%2FAD_4nXfAOA9-eu9vHoZdipB89jRLjUJv-j6feiolZNVLF9HUBvjpE1zDRwMlHabKtQVc73eYUxu20G7D6NpHiDsUhJJximonPcj_elKniEM0fCSEqCFHJYEBoLskVMwW7WQR1LfRvW1ZiSE9L3eJLvD-eAkeywnUuvUcpwaYrnWBU5BaUjQ.png?alt=media) | | Enable Scroll Top: ユーザーがアコーディオンヘッダーをクリックしたときに、ページがアコーディオンヘッダーの最上部に自動的にスクロールします。（この機能はライブページでのみ機能します） | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-7e0775e725ef0bcd2f3465ba26fa9e1f05fb610f%2FAD_4nXfYPnlGhSnNjFFvRa_ze4X7q8kRNl8F_JXAohxx1iV6C6XtxbhHk1SxVe_McPs6nkXCjGd_lGfhC8QWDCxPWDtexXzeTBzwFzUpKO2VExHf3mEjmVbb_jgWFxymVt-08yUtjCEDqPGpPLvZKCFiFQkeywnUuvUcpwaYrnWBU5BaUjQ.png?alt=media) | **属性、表示設定、アニメーション**のパラメーターに関する詳細については、[こちら](https://help.pagefly.io/manual/elements-general-settings/)をご覧ください。 #### スタイル設定 スタイル設定は以下を選択できます: * Accordion Header: ヘッダーのスタイル設定をカスタマイズします。 * Accordion Content: コンテンツのスタイル設定をカスタマイズします。 詳細については、[スタイル設定タブ](https://help.pagefly.io/manual/elements-style-settings/)をこちらでご確認ください。 ### アコーディオンヘッダーをカスタマイズする方法 アコーディオン要素はアコーディオンヘッダーとして機能し、各ヘッダーはコンテンツパネルの表示/非表示を制御するボタンとして機能します。 各アコーディオンヘッダーの上にあるツールバーを使用して、アコーディオンヘッダーごとに複製/削除/スタイルコピー/スタイル貼り付けを行うことができます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ddcc31c508b6a06832d0c0048072d95785e955b9%2FAD_4nXe9l4lmrg1XK1OvWPY3T7zzYv9qQD6RwGZ2K1sWvsaGLaeWJ30LxJY7UGmtpxNTvvdJd5AFcDIsqtHZoAs2fTVVzPx0arnOmZBksCPRhDHBLcxVyPIiWgOImCbMH8gxYeMAud_lEOinlkpAFmA6keywnUuvUcpwaYrnWBU5BaUjQ.png?alt=media) #### 全般設定 | Accordion items: アコーディオンの追加/削除/複製 | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0a9210b4a851e3a0f2aa573d7a7af9c80893e9ab%2FAD_4nXf4-a_prkfXJUzQ9J-kIyunzmO5DecEY93N4_0etuN4Mx4iU0X4-oxqdy1n1-5gUNaBwH7pECkEvmxfb6GBxwW0h9Ft0kXF5nwrG-JP4Ed_W-IYEJR3X-p41bk0mQMFZbhUdGsSG4rzlP7SD5DG1gkeywnUuvUcpwaYrnWBU5BaUjQ.gif?alt=media) | | Header text: アコーディオンヘッダー内のテキストのコンテンツとスタイルを設定します | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b06c3a113abfe159ffe2a931b17f08d2adaa90d1%2FAD_4nXepJn3TpSrZmcGPWfB1_Lzk0fxh_vH2IMplQO0Sr6NgW13A4EHyZwrPn3OfPOhdGi3QlP_fsBX7mk83Gq1IEoDz_i47I8WvjEHbFLu6VcUaIQHZVchC7evZY-3lGaXmjurmWyijTzFSXVa1LVqrkeywnUuvUcpwaYrnWBU5BaUjQ.png?alt=media) | | Anchor Text: ここにアンカーテキストを追加します。ライブビューでは、ページURLの後にアンカーテキストと共に「#」アイコンを追加することで、このアコーディオンヘッダー要素に正確にスクロールダウンできます。（この機能はライブページでのみ機能します） | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-28a3e6cc42390b2a010e17adf2d4683674900f03%2FAD_4nXe_JlB4IybJaZA1lcTELv4bjzzTxcu1BQiXJoPDVf9abFckj8LPEC51mN0YGo_pxkwAeZckz1uQpw15hUQav3lLlzDTdoNQ1ZayQBWJYqjOoVFHb4tJ0O7e3vqCjPFDUf13UEExPfaz8GOit8AykeywnUuvUcpwaYrnWBU5BaUjQ.png?alt=media) ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-0a895c74e03ffa9e9481b5b13b9843d6cdcfc79a%2FAD_4nXdA9BZ16Rshco_p4IvFVyZXhnZzebRTiCnMIM58qW8D5iW2V1g7KDn383IarN4NO5p1GKksiNweUX_9s1HOuL19ejCh69fGA4HHxBHckLU_zjMm2Bp19A6ih6NfHZYWsU-gkR43YL2NnrNLFuvlZQkeywnUuvUcpwaYrnWBU5BaUjQ.png?alt=media) | | Show Icon: アコーディオンヘッダーにアイコンを追加します | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-54541416ea3e38587d8dea70cc6f7d684b5dd3ff%2FAD_4nXdOcSeAksXH6A50zshCllLZbZkzDbsouzXlJC_aVTBNp0ebUYEF_oyhnx-cB4CtKrj9JmJ0J05N8gqmmIbIWqOh-fDpSVhsibZA6q8rISK0fla4r_X04T9vAOWZnDkYTcjxRnUYHu3ivuAnFXiRwwkeywnUuvUcpwaYrnWBU5BaUjQ.png?alt=media) | #### スタイル設定 アコーディオンヘッダーのスタイル設定では、以下のパラメーターに加えて、ヘッダーの状態を選択できます。これには、**標準状態**、**マウスオーバー状態**、および**アクティブ/選択状態**の3つのオプションがあります。 #### 含まれる要素の設定 アコーディオン要素は、見出し、段落、画像などの複数のコンテンツをグループ化できます。通常セクションのように、他の要素をドラッグアンドドロップすることでアコーディオンコンテンツを編集できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXeFAg8d1DCHL47qvphxrL0FzB82XtCiRJ9M0MTKMo8k2E8cQbCeTEJz4o9YtxKLXXI7FAGVKpn0yLcM340JbFRYOPu7KU7CGnRsxBwn3XtTrmk-Kw_ZXumD9itCroq7pfoPgDGeShxEPp8Rbyx9keywnUuvUcpwaYrnWBU5BaUjQ.png) これを踏まえて、アコーディオンコンテンツ内に他の要素をドラッグアンドロップできます。 ### よくある質問 **1. PageFlyアコーディオンとは何ですか？** アコーディオンは、縦に積み重ねられたアイテム（ラベルまたはサムネイル）のリストを持つグラフィカルな表示です。アイテムは「展開」または「折りたたみ」でき、複雑なコンテンツを表示できます。ガイドライン、利用規約、ポリシーなどの長い段落に最適です。 **2. アコーディオン要素内で何をカスタマイズできますか？** PageFlyエディターで利用可能な要素から、テキスト、画像、HTML、見出し要素などを追加できます。 ### 追加リソース * [ユースケース - アコーディオンを追加する](https://pagefly.io/pages/use-case-add-accordion)