> 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/pjitosekushonno/sections/make-a-sticky-section.md). # PageFlyでコードを使わずにスティッキーセクションを作成する方法 ### 固定セクションについて この記事では、カスタムCSSコードを使用せずに[固定セクション](https://help.pagefly.io/manual/make-a-sticky-section/)を作成する方法を学びます。 {% hint style="warning" %} **注**: * この機能は、テーマ開発者によるテーマの作成方法によっては、一部のShopifyテーマで動作しない場合があります。 * この機能はセクションにのみ適用されます。ボタンを固定する必要がある場合は、サポートチームにお問い合わせください（このドキュメントはボタンを固定する場合には適用されません）。 {% endhint %} 概要：固定セクションは、顧客がストアをスクロールしても重要なコンテンツが見えるようにするのに役立ちます。特定のセクションを「固定」にすることで、それらがその場に固定されたままになり、顧客はトップに戻るためにスクロールすることなく、重要な情報に簡単にアクセスできます。 固定セクションは、行動喚起や、ユーザーがストアフロントを探索する際に目立つように表示しておきたいあらゆるコンテンツに特に役立ちます。 このマニュアルの残りを読むか、PageFlyで固定セクション機能を設定する方法のチュートリアルビデオを見ることができます。 {% embed url="" %} ### PageFly固定セクションへのアクセス方法 #### ページエディターから ページエディターで、以下の手順に従って固定セクション設定にアクセスします。 * ステップ1：固定したいセクションをクリックします。 * ステップ2：**General**タブに移動し、「**Enable Sticky Top**」までスクロールして「**Yes**」を選択します。 ![](/files/cg6sFrzAbnX0gLBNNQTT) {% hint style="info" %} **注**: この機能はライブページでのみ機能し、テーマの競合により動作しない場合があります。 {% endhint %} * ステップ3：メニューバーの「公開」ボタンからページを公開し、ライブページで結果を確認します。 ![](/files/mZf1Lui4HpwyPYbOEL9x) ### PageFly固定セクションの設定方法 **Enable Sticky Top**機能をオンにすると、調整できる2つの詳細設定があります。 **Top Offset**: ビューポートの上端と固定セクションの間隔を調整します。 ![](/files/JLCbG4px1QsK0SwjWUt9) **Apply elevation**（**More settings**ボタン内）：セクションのスタックレベルで、スタックレベルが大きい方が低い方の前面に表示されます。 ![](/files/u5oQr358fCsRDEg9TBLc) ### 一般的なケース #### 1. セクションが固定されない 上記の手順をすべて実行したにもかかわらず、固定セクションがまだ機能しない。その理由がわからない？ 「このセクションを固定に設定しましたが、ライブビューで動作しません。」： ![](/files/F9kCWFKStuSrZq4DyClo) 理由は、このセクションを含むコンテナセクションにテーマからの「overflow:hidden;」というコードが含まれているためです。このコードは固定コードを上書きし、固定セクションが動作しないようにします。これを修正するには、以下の手順に従ってください。 * ステップ1：ライブページで、固定セクションを右クリックし、「検証」を開きます。 ![](/files/KhtNoMI9uFwZOcRWFvBj) * ステップ2：固定セクションから、このセクションを含むコンテナセクションを一つずつ確認します。 ![](/files/mJFXruyJOlMlBLv4LNaH) * ステップ3：セクションの「Styles」タブに「**overflow:hidden**;」というコードが表示されるまで確認します。 ![](/files/VPYWgocNdg2xsmg0uXqn) * ステップ4：このセクションの**Class Name**をコピーします。PageFlyページエディターに戻り、**Custom Code Editor**を開きます。 ![](/files/PltJDXQp884S6XMVqslA) * ステップ5：このコードを追加します：.classname {overflow: visible !important;} このケースでは、セクションのClass Nameは「pagefly-container」なので、[追加する必要のあるコード](https://gist.githubusercontent.com/Sally165/53dbedfaa73cb488aa31ba1a8bbf2f44/raw/54eb05cb0500747a48536358a951f86ecba2ac75/Sticky%20section)は次のようになります。 ![](/files/V7huiYIeZZcLImC0NBm6) * ステップ6：ページを公開し、ライブビューを確認します。 ![](/files/OIeihZ7Ioj8b9dtTpNCq) 上記の解決策を試しても固定セクションがまだ機能しない場合は、24時間年中無休のアプリ内ライブチャットでお問い合わせください。直接お手伝いさせていただきます。 #### 2. 商品の「カートに追加」ボタンを固定にする 「カートに追加」ボタンを画面上部に固定するには、まずページ上のセクションに「カートに追加」ボタン要素を追加します。次に、そのセクションに対して「Sticky Top」設定をオンにします。これにより、「カートに追加」ボタンは、訪問者がページをスクロールダウンする際にビューポートの上部に表示され続けます。以下のビデオでは、そのプロセス全体が示されています。 {% embed url="" %} ### よくある質問 **1. 「Enable Sticky Top」が表示されないのはなぜですか？** Enable Sticky Top設定はセクション要素にのみ適用されます。この設定にアクセスするには、ページエディターの以下の領域のいずれかを使用してセクションをクリックします。 * Page Outline * Canvas * Breadcrumbs ![](/files/0mdIZkqlqgxpCzxDs4Ts) **2. ボタンが上部に固定されている間に、背景を透明にすることはできますか？** はい、可能です！ボタン要素をセクションにドラッグアンドドロップし、そのセクションを透明かつ固定にします。[このガイド](#h.fxl71515r4l8)に従ってください。 ### 追加リソース * [PageFlyページで全幅セクションを作成する5つのステップ](https://help.pagefly.io/manual/create-a-full-width-section/) --- # 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/pjitosekushonno/sections/make-a-sticky-section.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.