# カスタムコードエディタを使用してページをカスタマイズする方法

### 概要

この記事では、[カスタムコードエディター](https://help.pagefly.io/manual/custom-code-editor/)とその使用方法について説明します。

カスタムコードエディターを使用すると、カスタムCSSコードとJavascriptコードをページに挿入できます。要素をカスタマイズしたり、ページに新しい効果を作成したりしたい場合は、カスタムコードエディターを使用してカスタムコードを挿入し、ページデザインをレベルアップさせ、ストアのコンバージョン率を高めることができます。

カスタムコードを追加することで、スティッキーセクションが機能しない、ページの上部に空白が生じるなどのページ上の問題を回避することも可能です。

注: カスタムコードに関する質問がある場合は、ライブチャットでお問い合わせください。

### 要件

これは[HTML](https://help.pagefly.io/manual/html-liquid-element/)、CSS、Javascriptなどのウェブデザイン言語の知識が必要な高度な機能です。この機能を理解していない場合は、ページに深刻な損害を与える可能性があるため、使用しないでください。

### PageFlyカスタムコードエディターへのアクセス方法

PageFlyカスタムコードエディターにアクセスするには、左側のツールバーの8番目のアイコンに移動します。それをクリックしてカスタムコードエディターにアクセスします。

![](/files/Lnqbf9SBSnwmoHynxag1)

### PageFlyカスタムコードエディターの操作方法

ページ上のテキストコンテンツとスタイルを変更するためにカスタムコードを簡単に追加する方法を学びましょう。

{% embed url="<https://youtu.be/qu30vaq9ryM>" %}

* ステップ1: Custom CSSおよびCustom Javascriptボックスを表示します。以下の例では、エラーを修正するためのコードを追加します: ページをモバイルで表示した際に、ページ右側に不要な余白が発生することがあります（左から右にスライドします）。
* ステップ2: ページの任意の場所をクリックすると、エディターのコードが自動的に保存されます。

![](/files/APQ1HurlOxeUhUU8fnE3)

* コードを追加または削除すると、保存処理が自動的に実行されます。

{% hint style="warning" %}
**重要**:

* CUSTOM CSSコード: 便宜上、
* CUSTOM JAVASCRIPTコード: 便宜上、\<script>タグは既に追加されているため、この領域に配置する必要はありません。
* カスタムコードエディターはJavaScript/CSSコードのみをサポートしており、HTMLコードを追加することはできません。
  {% endhint %}

### 使用例

#### スティッキーセクションが機能しない問題を修正する

PageFlyのスティッキーセクションが機能しない問題をこの機能で修正できます。こちらのガイドをご確認ください: [こちら](https://help.pagefly.io/manual/make-a-sticky-section/)。

#### ページ上部の空白を削除する

また、この機能を使用して、Shopifyの無料テーマ（DebutやNarrativeなど）をPageFlyと統合する際に発生するページ上部の空白（ヘッダーと最初のセクションの間のスペース）を削除することもできます。[この記事](https://help.pagefly.io/manual/remove-blank-space-on-top-of-the-page/)で詳細を確認できます。

#### デフォルトの商品プレビューまでスクロールする

商品ページでユーザーが商品プレビューセクションに素早くスクロールできるボタンを追加して、ユーザーエクスペリエンスとナビゲーションを向上させたい場合は、カスタムコードエディターで実現できます。方法は以下の通りです。

1. ボタンにIDを追加します。例: pf-custom-scroll
2. このカスタムコードをCustom Javascriptに追加します。

```javascript
window.onload = function () {
  document.querySelector("#pf-custom-scroll").addEventListener("click", () => {
    var pfDefault = document.querySelector('[data-pf-type="ProductPreview"]');

    pfDefault.scrollIntoView();
  });
};
```

3. スムーズなスクロールのためのCSSコードを追加します。

```css
html {
  scroll-behavior: smooth;
}
```

{% hint style="warning" %}
**注**: `scroll-behavior: smooth` はSafariではサポートされていません。
{% endhint %}

#### 背景画像を全体表示にする

背景画像全体を表示するには、以下の手順に従います。

1. 画像の幅と高さを確認します。
2. この計算式を計算します: (高さ/幅) \* 100。（例の結果は45）
3. 以下のCSSを追加します。

```css
height: 45vw;
```

### よくある質問

**1. コーディングの知識がなくてもカスタムコードを使用できますか？**

この高度な機能には、HTML、CSS、Javascriptなどのウェブデザイン言語の知識が必要です。コーディングの知識がない場合は、ご自身での使用は控えてください。テクニカルサポートチームの支援を受けるために、お問い合わせください。

**2. 使用できるカスタムコードの種類に制限や制約はありますか？**

PageFlyはCSS、Liquid、JavaScriptを使用したカスタムコードをサポートしています。高度な機能を追加する必要がある場合は、これらのウェブデザイン言語の知識が不可欠です。直接的なHTMLコードの挿入はサポートされておらず、サーバーサイド言語は使用できません。コーディングに慣れていない場合は、ご自身でのカスタムコードの変更は避けるのが最善です。代わりに、テクニカルサポートチームにお問い合わせください。


---

# 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/optimization/custom-code-editor.md?ask=<question>
```

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.