> 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/page-editor-faqs.md). # PageFlyページエディタ - よくある質問 ### 概要 この[よくある質問セクション](https://help.pagefly.io/manual/page-editor-faqs/)では、PageFlyページエディターの使用に関する一般的な質問に答えています。 ### よくある質問 #### PageFlyでスクロール時にShopifyの商品画像を固定表示させる方法は？ 以下の手順に従ってください： **ステップ1**: メインメディア要素を選択します。 ![](/files/4YYWH4TDXWQP2YOVt2Eu) **ステップ2**: スタイリングタブで、詳細設定/CSSコードセクションに注目してください。 ![](/files/Q2FRLRJQRkBhNc3qVRv0) **ステップ3**: このコードをCSSコードに貼り付けます。 ```css position: sticky; top: 0; z-index: 1; ``` **ステップ4**: ページを保存して公開します。 詳細については、こちらのビデオチュートリアルをご覧ください。 {% embed url="" %} #### PageFlyで要素のホバー状態とアクティブ/選択状態を設定する方法は？ **通常状態/マウスオーバー状態/アクティブ/選択状態** ボタンなどの要素をクリックし、スタイリングタブで「**Normal state**」をクリックしてドロップダウンを開きます。設定できる状態は3つあります：Normal state、Mouse over state、Active/Selected stateです。 ![](/files/n1b7QCNDji8fRTGr47gD) これらの状態を適用できる要素がいくつかあります。 * Button * Heading * Tabs * Accordion * Icon * … **設定方法** 例として「**Button**」要素を見てみましょう。 * **ステップ1**: 「**Button**」要素を選択します。スタイリングタブをクリックします。 * **ステップ2**: Mouse over state（またはSelected/Active state）を選択します。 * **ステップ3**: スタイリングタブのオプションを使用してボタンを設定します。 ![](/files/FZxlCWg4yyeSxNcCvNtR) #### PageFlyページでモバイルにおける横スクロールの問題を修正する方法は？ 以下の手順に従ってください： **ステップ1**: 問題が発生しているページを開きます。左下のサイドバーにある「**Add custom code**」アイコンをクリックします。 **ステップ2**: これらのコードのいずれかを追加します。 **ステップ3**: ページを保存して公開します。 詳細については、この記事をご覧ください：[Responsive Mobile Horizontal Scroll Issue](https://help.pagefly.io/manual/responsive-mobile-horizontal-scroll-issue/) もっと知りたいですか？以下のビデオチュートリアルをご覧ください。 {% embed url="" %} #### PageFlyページエディターでグラデーションカラーを追加する方法は？ 背景と要素の両方にグラデーションカラーを追加できます。そのためには、以下の手順に従ってください。 * **ステップ1**: グラデーションカラーのCSSコードを選びます。そのためには、[cssgradient.io](http://cssgradient.io)にアクセスしてください。 * **ステップ2**: 色を調整した後、「**Copy to Clipboard**」ボタンをクリックします。 * **ステップ3**: 背景にグラデーションカラーを追加する：コピーしたCSSコードをスタイリングタブのCSSコードセクションに貼り付けます。 ![](/files/yhluenBLmH3nOMgEuOrm) 要素にグラデーションカラーを追加する： * **ステップ1**: 追加したい要素をクリックします。 * **ステップ2**: 一般タブで、属性セクションまでスクロールします。 * **ステップ3**: 「**HTML class**」に「**gradient**」と入力します。 * **ステップ4**: 左下のツールバーで、「**Add custom code**」アイコンをクリックし、以下のコードを貼り付けます。 ```css .gradient { background: linear-gradient(90deg, green, rgba(121, 9, 65, 0.9128443613773635) 72%, rgba(0, 212, 255, 1) 99%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } ``` ![](/files/c2jhEsf0549cfciRhkuK) ### ヒントとベストプラクティス #### 保存済みセクション PageFlyを使用すると、ストアの様々なページに統合できる再利用可能なセクションを作成できます。 **ステップ1**: 保存したいセクションにカーソルを合わせ、「**Save section**」を選択します。 ![](/files/vz3f1Dr1IDzE5SR1Adu4) **ステップ2**: セクションを未公開として保存します。 ![](/files/geypGRrMTSeLXqC7tKxS) **ステップ3**: 左側のパネルに移動し、「**Sections**」をクリックし、名前を付けたセクションをクリックして、公開するのを忘れないでください。 ![](/files/yyWaKpa8qxxwRoVuLWU2) **ステップ4**: 再利用したいページのセクションの右上にある「**+**」アイコンをクリックし、「**Saved**」を選択します。 ![](/files/PFiePz0b5AdbOGrmnwPH) **ステップ5**: 好みのセクションを選択します。 #### セクションの名前変更/複製 セクション名を変更する方法は2つあります。 一般タブから変更する： 一般タブから「**Attributes**」セクションまでスクロールし、「**More settings**」をクリックします。 ![](/files/FHm1srJ26zVraNklIH9p) ページコンテンツから変更する： ページコンテンツで選択したセクションの三点リーダーアイコンにカーソルを合わせてクリックし、「**Rename**」を選択します。 ![](/files/wN8P9KZeqOZ6ChDEOwax) ### その他のリソース * ビデオチュートリアル：[How to Align Shopify product list on the PageFly page](https://www.youtube.com/watch?v%3DQ3I0Lzh3jKA%26list%3DPLJrJOSZ-86toKcoc3VZ02IAP_ET0vnR5K%26index%3D3) * ビデオチュートリアル：[How to Add PageFly Page & Sections to Shopify theme](https://www.youtube.com/watch?v%3D7tGxVbqmQ2E%26list%3DPLJrJOSZ-86toKcoc3VZ02IAP_ET0vnR5K%26index%3D8) * マニュアル：[How to Use PageFly Click Action](https://help.pagefly.io/manual/direct-to-a-link-a-section-a-pop-up-an-email-address-or-a-phone-number-by-click-action/) --- # 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/page-editor-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.