> For the complete documentation index, see [llms.txt](https://help.pagefly.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pagefly.io/pagefly-help-center-japanese/faqtotoraburushtingu/faqs/elements-faqs.md). # 要素 - よくある質問 ### 概要 **要約**: このドキュメントは、ユーザーからの問い合わせに基づき収集された、PageFly要素に関するよくある質問（FAQ）の編集版です。 これらの質問は、要素の様々な機能面に焦点を当てており、PageFlyについてさらに深く知りたい方々にとって包括的なリソースとなることを意図しています。 この記事で紹介されるFAQには、レガシーエディターとGen 2エディターという2種類の回答が含まれます。それぞれの違いは以下の通りです。 * **Legacy Editor**: 行と列の構造を持つエディター。 * **Gen 2 Editor** : 行と列の構造を持たないエディター。要素をPageFlyページ上に直接追加でき、フレックスブロックによりさらに柔軟なカスタムレイアウトが可能です。 {% hint style="warning" %} **重要**: Gen 2 Layoutは、従量課金制（[slot plans](https://help.pagefly.io/manual/pricing-plans/)）でのみ利用可能になります。 {% endhint %} ### よくある質問 #### 1. PageFlyのアコーディオン要素を使用して折りたたみ可能な行を追加する方法は？ PageFlyで折りたたみ可能な行を追加するには、アコーディオン要素を使用できます。 ![](/files/inste0UJFeDgbR8T00zQ) この要素の設定方法について詳しく知りたい場合は、[こちら](https://help.pagefly.io/manual/accordion-element/)のガイドをご確認ください。 #### 2. PageFlyでテキストと画像を含むページレイアウトを追加する方法は？ **Gen 2 Editor** フレックスセクションを作成し、背景画像とテキストオーバーレイを追加できます。 * **ステップ 1**: **要素 > PageFlyタブ > レイアウト**を選択します。 * **ステップ 2**: **空白のセクション**を選択し、キャンバス上にドラッグ＆ドロップします。 * **ステップ 3**: **スタイリング**タブで背景画像を選択します。 * **ステップ 4**: 背景画像に合わせてフレックスセクションの高さを調整します。 ![](/files/hJXm8LNMeaJT4jOPMxJE) * **ステップ 5**: **要素 > PageFlyタブ > 見出し**を選択します。 * **ステップ 6**: 希望の見出しバリアントを選択し、キャンバス上にドラッグ＆ドロップします。 ![](/files/GMkjHZUr01ShTJPouVoj) または、セクションテンプレートを使用すると、より迅速かつ便利に編集できます。 * **ステップ 1**: ページコンテンツで「**セクションを追加**」をクリック > 「**テンプレート**」を選択します。 * **ステップ 2**: 希望のテンプレートを選択し、「**選択**」をクリックします。 詳細については、[こちら](https://help.pagefly.io/manual/create-a-section-with-image-and-text/)のガイドをご確認ください。 **Legacy Editor** 1カラムセクションを作成し、背景画像とテキストオーバーレイを追加できます。 * **ステップ 1**: **要素 > PageFlyタブ > レイアウト**を選択します。 * **ステップ 2**: 1カラムレイアウトを選択し、キャンバス上にドラッグ＆ドロップします。 ![](/files/oEnb04BvPoIlmUS7mjCm) * **ステップ 3**: スタイリングタブで背景画像を選択します。 ![](/files/oWlJMyTWblh3XZofOueV) * **ステップ 4**: 背景画像に合わせてパディングを調整します。 * **ステップ 5**: **要素 > PageFlyタブ > 見出し**を選択します。 * **ステップ 6**: 希望の見出しバリアントを選択し、キャンバス上にドラッグ＆ドロップします。 ![](/files/pOOeTumTGtFOFL4onitZ) または、セクションテンプレートを使用すると、より迅速かつ便利に編集できます。 * **ステップ 1**: ページコンテンツで「**セクションを追加**」をクリック > 「**テンプレート**」を選択します。 * **ステップ 2**: 希望のテンプレートを選択し、「**選択**」をクリックします。 ![](/files/itAsTsYbtF1IVUJUTdOU) #### 3. PageFlyでShopifyの商品バリアントを使用してバリアントを追加する方法は？ PageFlyで商品バリアントを追加するには、Product variant要素を使用できます。 ![](/files/mjAhNTdWQpsGZaGa5bKK) この要素の設定方法について詳しく知りたい場合は、[こちら](https://help.pagefly.io/manual/shopify-elements-product-variant/)のガイドをご確認ください。 #### 4. PageFlyページにShopifyのカートに追加ボタンを追加する方法は？ PageFlyにカートに追加ボタンを追加するには、Product add to cart要素を単に利用できます。 この要素の設定方法について詳しく知りたい場合は、[こちら](https://help.pagefly.io/manual/shopify-elements-product-add-to-cart/)のガイドをご確認ください。 #### 5. PageFlyページにコンテンツリストアイテムを追加する方法は？ PageFlyにコンテンツリストアイテムを追加するには、**Content List**要素を使用できます。コンテンツリストのアイテム数に制限はありません。 #### 6. Shopify要素を強化するためにサードパーティ製アプリを使用できますか？ はい、Shopify App Storeからサードパーティ製アプリを統合して、ストアの機能性やデザイン要素を強化できます。これらはThird party elementsセクションで見つけることができます。 さらに、Shopify OS 2.0テーマで利用可能なShopify App Block Elementをサードパーティ連携に強く推奨します。この機能により、サードパーティ製アプリをPageFlyページに簡単に追加でき、より柔軟性、簡単なアップデート、そして向上したユーザー体験を提供します。1ページにつき1つまでという制限がありますが、App Blockはストアの能力を高めるための価値あるツールです。設定の詳細については、[App Blockの記事](https://help.pagefly.io/manual/how-to-use-shopify-app-block-element-with-pagefly-section/)を参照してください。 PageFlyでサードパーティ製アプリを使用するためのガイドは[こちら](https://help.pagefly.io/manual/what-apps-does-pagefly-integrate-with/)をご確認ください。 #### 7. 固定ボタン/セクションを追加する方法は？ 固定セクションは、顧客がストアをスクロールする際に重要なコンテンツを見える状態に保つのに役立ちます。以下で、PageFlyのSticky Section機能の設定方法のチュートリアルをご覧いただけます。 詳細については、PageFlyウェブサイトの[Sticky section](https://help.pagefly.io/manual/make-a-sticky-section/)をご覧ください。 #### 8. 商品価格の横に割引率(%)を表示できますか？ カスタムコードを使用しないと表示できません。ただし、Product badgeをオンにすることでProduct mediaに表示できます。 詳細については、[Product media](https://help.pagefly.io/manual/shopify-elements-product-media/)の記事にアクセスしてください。 --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://help.pagefly.io/pagefly-help-center-japanese/faqtotoraburushtingu/faqs/elements-faqs.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.