# HTML/Liquid
### HTML/Liquid要素について
概要: [HTML Liquid要素](https://help.pagefly.io/manual/html-liquid-element/)を使用すると、PageFlyエディターにHTMLコードを追加できます。HTMLコードは、外部から取得した、またはご自身で記述したコードを使用して、ライブページにカスタムコンテンツを表示するのに役立ちます。
詳細については、こちらのビデオチュートリアルをご覧ください。
{% embed url="" %}
### HTML/Liquid要素にアクセスする方法
* **ステップ1**: 左側のツールバーの上から2番目にある「**要素**」アイコンをクリックします。次に、「**PageFly**」タブでHTML/Liquid要素を選択します。
* **ステップ2**: 要素をページエディターにドラッグアンドドロップしてから、使い始めます。
### HTML/Liquid要素を設定する方法
#### 一般設定
**ステップ1**: HTML Liquid要素をレイアウトにドラッグし、選択してパラメーターを表示します。
**ステップ2**: 「Open code editor」をクリックして、HTMLコードを追加できるコードエディターを開きます。
「**Open code editor**」ボタンをクリックすると、コードエディターモデルが開きます。
* カスタムコードを使用しない場合は、「**Cancel**」ボタンをクリックします。この操作を行うと、追加したカスタムコードは保存されません。
* 入力したカスタムコードを保存するには、「**Done**」ボタンをクリックすると、ページエディターに適用されます。
#### スタイリング設定
スタイリングタブを使用して、必要なスタイリングオプションを調整できます。[スタイリングタブ](https://help.pagefly.io/manual/elements-style-settings/)に関する詳細はこちらをご覧ください。
### ユースケース
* 3rdパーティアプリ: PageFlyと連携していない3rdパーティアプリからの埋め込みコードを追加するために、この要素を使用できます。
* 動的なチェックアウトボタンを追加: この要素を使用してページに「**Buy Now**」ボタンを追加できます。詳細については[こちら](https://help.pagefly.io/manual/button-element/%233-2-how-to-create-a-dynamic-checkout-button)をご覧ください。
### ヒントとベストプラクティス
特定の要件に必要なカスタムコードのみを含めるようにしてください。不要なコードや外部ライブラリを含めると、ウェブサイトのパフォーマンスが低下する可能性があるため、避けてください。
### よくある質問
**1. ショップにHTMLコードを使用する必要があるのはなぜですか？**
HTMLコードは、外部から取得した、またはご自身で記述したコードを使用して、ライブページにカスタムコンテンツを表示するのに役立ちます。
**2. HTML編集をはるかに簡単にするために知っておくべき最も人気のあるHTMLタグは何ですか？**
見出し:
##
段落:
DivおよびSpan:
テーブル:
* 項目1.
* 項目2.
---
# 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/pagefly-elements/basic/html-liquid-element.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.