# リンク、セクション、ポップアップへの誘導 ### 概要 この記事では、[クリックアクション](https://help.pagefly.io/manual/direct-to-a-link-a-section-a-pop-up-an-email-address-or-a-phone-number-by-click-action/)を使って、リンク、セクション、Eメールアドレス、電話番号へ誘導する方法を学びます。この要素を使用すると、顧客はページを離れることなく、他のリンクやセクションに素早くアクセスしたり、Eメールを送信したり、電話をかけたりできます。 PageFlyでページを無料でカスタマイズするには[こちら。](https://apps.shopify.com/pagefly?utm_campaign%3Dapp-listing%26utm_source%3Dmanual%26utm_medium%3Darticle%26utm_content%3Dclick-action) ### 必要事項 * **クリック可能要素の特定**: クリック可能にして特定の動作に誘導したいページ上の要素（ボタン、アイコン、ブロックなど）を特定します。 * **移動先のURLまたはセクション**: 外部リンクのURLを準備するか、スクロールしたいページ内のセクションを特定します。 ### PageFlyクリックアクションの使用方法 このビデオチュートリアルでは、クリックアクションの設定についてより視覚的に説明しています。 {% embed url="" %} #### ステップ1：クリック可能要素の特定 クリックアクションを適用したい要素を特定します。これらには、ボタン、アイコン、ブロックなどが含まれます。[パンくずリスト](https://help.pagefly.io/manual/page-editor-breadcrumb/)を確認して、正しい要素が選択されていることを確認してください。 #### ステップ2：要素にアクションを割り当てる 各要素には5つのアクションを割り当てることができます。ただし、要素が画像の場合は、追加のアクション「Open lightbox」があります。以下に各アクションタイプの詳細な手順を示します。 **1. 別のリンクへ誘導する** * **ステップ1:** 要素を選択した後、Generalタブ > Action > Click Action に移動し、ドロップダウンメニューから「Go to URL」を選択します。 ![](/files/pTwnN5ywaMUJM3kGWNYl) * **ステップ2**: 「Select URL」をクリック > ボックスにURLを貼り付け、必要に応じて「Open in new tab」を有効にします。 ![](/files/xEzYjcz3mmAFJg7S6iQ7) または、ストア内のコレクション、商品、ページ、ブログ記事にリンクしたい場合は、ドロップダウンメニューから選択し、リンクしたい特定のものを選択します。 以下の例では、「**Link to Products**」を選択し、希望の商品を選択し、「**Select**」をクリックすることで、選択した要素を商品にリンクできます。すると、URLがそれに応じて更新されます。 ![](/files/rIVUVcNbkiBluEI29enu) * **ステップ3**: リンクを適用するために「Select」をヒットします。 ![](/files/caGToom36P3wajGB4gzS) **2. ポップアップコンテンツを開く** このクリックアクションは、Youtube動画や他のストアコンテンツ（コレクション、商品、ブログ記事など）のポップアップコンテンツウィンドウを開くのに役立ちます。 * **ステップ1**: 要素を選択し、Generalタブ > Action > Click Action に移動し、ドロップダウンメニューから「Open Pop-up」を選択します。 * **ステップ2**: ポップアップの幅と高さをカスタマイズします（任意）。 * **ステップ3**: ドロップダウンメニューでポップアップコンテンツを選択します（Youtube VideoまたはStore Contentなど）。その後、URLを挿入し、それぞれのコンテンツの設定を変更します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdu1YUmnzG8us88MuI8CPeE69s5ibiOVhRG94THc5IgTqUnrUrbmTw7bheGnB0vu-0bd5XGr-Jfb71qfu42ZOYZQbqZZQMjdUIEpl7KKv6Y_Bit9Q6a3ZBWpNPCbKYIpEx_TqBZYO-0x4et-4fTG2oLuu36) **3. ページ内の内部セクションへ誘導する** {% hint style="info" %} **注意**: Scroll to section はセクションにのみ適用され、Flex block (Gen 2 Editorの場合) や Row and Column (Legacy editorの場合) には適用されません。この機能を設定するために、ページの任意のセクションを選択できます。 {% endhint %} **ステップ1**: セクションに名前を付ける 要素をページ内の内部セクションに誘導したい場合、まずセクションに名前を付ける必要があります。 ページエディタ内のすべてのセクションは自動的に「Section」という名前が付けられます。そのため、正しいセクションを選択するには、各セクションの名前を変更して明確に分類することが推奨されます（[このビデオ](https://youtu.be/vRHQirArZXY)を参照）。 セクションの名前は、[ATTRIBUTES](https://help.pagefly.io/manual/elements-general-settings/)設定を使用して変更できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXeIT06EgAf5_ziG7Y5dE2DzE37T_7gpK_y7NsZAIBl5YRl-Julrp5UgBT1Bp9KfBYZ29QdsbQNzBauhMoTljqFXoIwLaA_WNJkftrEFYpib66ASRjT0bDAZyelN3KDJDmujL_tkoDLX_KutSKWZOJXDrOVd) **ステップ2**: ページ内の内部セクションへ誘導する 1. 要素を選択し、Generalタブ > Action > Click Action に移動し、ドロップダウンメニューから「Scroll to section」を選択します。 2. Scroll to section ドロップダウンボックスでセクションを選択します。 3. (任意) 「Top Offset」を設定します：ブラウザの画面上端と移動先のセクションの間の間隔です。![](/files/siaKlbjfmLf7bswU7jE9) このビデオは、要素を既存ページの特定のセクションにリンクする方法をよりよく示しています。 {% embed url="" %} {% hint style="info" %} **Top Offsetに関する注意**: ブラウザの画面上端と移動先のセクションの間の間隔です。 {% endhint %} これは、ページ上でのTop Offsetの動作です。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXc476XaRSELgttT2_gP6ngPkPuRReVH3LUhEG50mGjKLNsoirHFMg8jxQNhIsmBSuwxtVEet45LpjdYW1B3Byd67CUKFU-UzN6kTVB6iuI5S5y0LMKC0ztsZJrWEhZfdajghbcMkHTG5UoiGWI0YAkeyHmhg-IJ6w-XcZKNT6NOQGw-1.gif) **4. Eメールアドレスにリンクする** * **ステップ1**: 要素を選択し、Generalタブ > Action > Click Action に移動し、ドロップダウンメニューから「Send Email」を選択します。その後、「Compose Email」を選択します。 ![](/files/ZDsx6mV4sl6LR98tylaK) * **ステップ2**: Eメールの詳細（Eメールアドレス、件名、内容を含む）を挿入します。 * **ステップ3**: 変更を適用するために「Done」をクリックします。 ![](/files/wMqIOb0QaW5HYNJnRlpy) **5. 電話番号にリンクする** * **ステップ1**: 要素を選択し、Generalタブ > Action > Click Action に移動し、ドロップダウンメニューから「Call Number」を選択します。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdyouuJ1AxJB1rEQ9TP4J-cetbhSq3gEqBsZk3586UnpXvRGoF-hEePOiuX6BcDbYjCNKGedgCxj5jpKeyLrUu7UURYnf-XUH14AegOhhSG8G3v5aZnrvcEvIaDET9E2YeMLkDLcPucZ7FvSvL-8usDs_M) * **ステップ2**: ボックスに電話番号を入力します。 ![](/files/U6V8pJ5gczi9b7LObSUu) **6. ライトボックスを開く（画像要素のみ）** 特に画像要素用にカスタマイズされた画像クリックアクションには、ライトボックスというもう1つの選択肢があります。このアクションにより、ユーザーは画像をクリックして、元の画像から全サイズの画像ポップアップを見ることができます。 * ステップ1: 画像要素を選択し、Generalタブ > Action > Click Action に移動し、「Open lightbox」を選択します。 ![](/files/Hw2Yzn8TUPmf2kf8utMO) * ステップ2: Save & Publishをクリックします。その後、ライブページで結果を確認します。 ![](/files/2JfBrCjhoaKTfZVpNYsI) ### ユースケース 1. **サービス業**: 顧客とのやり取りを効率化するために、予約スケジュール、問い合わせフォーム、リソースダウンロードへの迅速なアクセスを提供します。 2. **イベントウェブサイト**: 出席者が簡単にイベントに登録したり、アジェンダを探索したり、問い合わせのために主催者に連絡したりできるようにします。 3. **PDFファイルのアップロード**: ボタンにPDFファイルをアップロードして、顧客がダウンロードできるようにすることができます。詳細は[この記事](https://help.pagefly.io/manual/upload-files-to-my-page/%23make-file-downloadable-via-a-button)を参照してください。 ### よくある質問 1. **クリック可能要素に追加のインタラクティブ機能を追加することは可能ですか？** はい、ホバー効果、アニメーション、ツールチップを組み込むことで、クリック可能要素のインタラクティブ性を向上させ、ユーザーに追加のコンテキストや視覚的な合図を提供できます。 2. **クリック可能要素の外観をカスタマイズできますか？** はい、ボタン、アイコン、ブロックの外観をウェブサイトのデザインに合わせてカスタマイズできます。 ### 追加リソース * [画像とテキストを含むセクションの作成方法](https://help.pagefly.io/manual/create-a-section-with-image-and-text/) * [PageFlyページにファイルをアップロードしてコンテンツパフォーマンスを向上させる](https://help.pagefly.io/manual/upload-files-to-my-page/%23make-file-downloadable-via-a-button) * [PageFlyでセクションに名前を付ける方法](https://youtu.be/vRHQirArZXY) --- # Agent Instructions: 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: ``` GET https://help.pagefly.io/pagefly-help-center-japanese/pjito/main-use-case/direct-to-a-link-a-section-a-pop-up-an-email-address-or-a-phone-number-by-click-action.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.