カスタムコードエディターを使用してページをカスタマイズする方法
Last updated
Was this helpful?
Japanese 🇯🇵
Last updated
Was this helpful?
この記事では、カスタムコードエディターとその使用方法について説明します。
カスタムコードエディターを使用すると、カスタムCSSコードとJavascriptコードをページに挿入できます。要素をカスタマイズしたり、ページに新しい効果を作成したりしたい場合は、カスタムコードエディターを使用してカスタムコードを挿入し、ページデザインをレベルアップさせ、ストアのコンバージョン率を高めることができます。
カスタムコードを追加することで、スティッキーセクションが機能しない、ページの上部に空白が生じるなどのページ上の問題を回避することも可能です。
注: カスタムコードに関する質問がある場合は、ライブチャットでお問い合わせください。
これはHTML、CSS、Javascriptなどのウェブデザイン言語の知識が必要な高度な機能です。この機能を理解していない場合は、ページに深刻な損害を与える可能性があるため、使用しないでください。
PageFlyカスタムコードエディターにアクセスするには、左側のツールバーの8番目のアイコンに移動します。それをクリックしてカスタムコードエディターにアクセスします。
ページ上のテキストコンテンツとスタイルを変更するためにカスタムコードを簡単に追加する方法を学びましょう。
ステップ1: Custom CSSおよびCustom Javascriptボックスを表示します。以下の例では、エラーを修正するためのコードを追加します: ページをモバイルで表示した際に、ページ右側に不要な余白が発生することがあります（左から右にスライドします）。
ステップ2: ページの任意の場所をクリックすると、エディターのコードが自動的に保存されます。
コードを追加または削除すると、保存処理が自動的に実行されます。
重要:
CUSTOM CSSコード: 便宜上、
CUSTOM JAVASCRIPTコード: 便宜上、<script>タグは既に追加されているため、この領域に配置する必要はありません。
カスタムコードエディターはJavaScript/CSSコードのみをサポートしており、HTMLコードを追加することはできません。
PageFlyのスティッキーセクションが機能しない問題をこの機能で修正できます。こちらのガイドをご確認ください: こちら。
また、この機能を使用して、Shopifyの無料テーマ（DebutやNarrativeなど）をPageFlyと統合する際に発生するページ上部の空白（ヘッダーと最初のセクションの間のスペース）を削除することもできます。この記事で詳細を確認できます。
商品ページでユーザーが商品プレビューセクションに素早くスクロールできるボタンを追加して、ユーザーエクスペリエンスとナビゲーションを向上させたい場合は、カスタムコードエディターで実現できます。方法は以下の通りです。
ボタンにIDを追加します。例: pf-custom-scroll
このカスタムコードをCustom Javascriptに追加します。
window.onload = function () {
document.querySelector("#pf-custom-scroll").addEventListener("click", () => {
var pfDefault = document.querySelector('[data-pf-type="ProductPreview"]');
pfDefault.scrollIntoView();
});
};スムーズなスクロールのためのCSSコードを追加します。
html {
scroll-behavior: smooth;
}注: scroll-behavior: smooth はSafariではサポートされていません。
背景画像全体を表示するには、以下の手順に従います。
画像の幅と高さを確認します。
この計算式を計算します: (高さ/幅) * 100。（例の結果は45）
以下のCSSを追加します。
height: 45vw;1. コーディングの知識がなくてもカスタムコードを使用できますか？
この高度な機能には、HTML、CSS、Javascriptなどのウェブデザイン言語の知識が必要です。コーディングの知識がない場合は、ご自身での使用は控えてください。テクニカルサポートチームの支援を受けるために、お問い合わせください。
2. 使用できるカスタムコードの種類に制限や制約はありますか？
PageFlyはCSS、Liquid、JavaScriptを使用したカスタムコードをサポートしています。高度な機能を追加する必要がある場合は、これらのウェブデザイン言語の知識が不可欠です。直接的なHTMLコードの挿入はサポートされておらず、サーバーサイド言語は使用できません。コーディングに慣れていない場合は、ご自身でのカスタムコードの変更は避けるのが最善です。代わりに、テクニカルサポートチームにお問い合わせください。
