対象プラン： Starterプラン以上
Studioサイトにカスタムコードを追加する方法
注意：独自に記述したコードや外部サービスが提供するコードの内容および動作についてチャット窓口でのサポート対象外となる可能性があります。Studioコミュニティで過去の投稿を参考したり質問の投稿もご検討ください。
Studioでは、カスタムコード機能を利用すると、サイトや個々のページの <head> と <body> タグに独自のコードが追加できます。
コード追加欄の「<head> 内の末尾」に追加したコードは、HTML Document の <head> に挿入され、HTML Document が構築される前に実行されます。
「<body> 内の末尾」に追加したコードは、HTML Document の <body> に挿入され、HTML Document の読み込みと解析が完了したタイミングで実行されます。
なお、追加したコードはデザインエディタやライブプレビューでは動作しません。動作確認は、公開サイトで行なってください。
カスタムコードの制限
</head>および</body>タグ直前に追加できるコードは、それぞれ最大10個で、1つのコードは最大 30,000 文字まで記入可能です。<head>タグには、以下の5つのタグが追加できます。その他のタグは入力しても、設定に反映されません。<link><meta><style><script><noscript>
手順
コードの追加
エディタ左側のページパネルから設定します。サイトの <head> タグ、<body> タグの設定はサイト設定から行い、ページ単位の設定はページ設定で行います。
コードを追加し終えたら、サイトを更新して公開サイトに反映させてください。
コードの編集・削除
追加されたコードはリスト形式で表示され、クリックするとコードとラベルの編集が可能です。
リスト内のコードはドラッグで順番が入れ替えられます。また、コードにカーソルを乗せると表示される「×」ボタンをクリックするとコードの削除が可能です。
注意点とサンプルコード
外部Appsとのコンフリクト
外部Apps で連携したサービスのコードをカスタムコードにも設定すると、問題が発生するケースがあります。外部Apps連携とカスタムコード間でのコンフリクトに注意して設定してください。
プランダウングレード後のカスタムコード
Freeプランにダウングレードし、切り替わった後でも、設定したカスタムコードは内部的に保持されます。その状態のままコードは削除できますが、編集や有効化はできません。アップグレードをご検討ください。
DOMContentLoaded イベントの扱い
DOMContentLoaded イベントは、期待するタイミングで発火しません。
<head>にコードを書いた場合、DOMContentLoaded イベントは発火しますが、HTML documentの読み込みと解析が未完了のタイミングで発火します。<script>
window.addEventListener('DOMContentLoaded', (event) => {
console.log(document.getElementById("abc")); // null: Design Editor で id を設定していても、みつからないため
});
</script><body>にコードを書いた場合、DOMContentLoaded イベントは発火しません。<script>
window.addEventListener('DOMContentLoaded', (event) => {
console.log('発火しません');
});
</script>解決方法：HTML document の読み込みと解析が完了した後に実行したいコードは、カスタムコード
<body>内に直接記述してください。<script>
console.log(document.getElementById("abc"));
</script>
変数宣言によるエラー
変数の再宣言により
Uncaught SyntaxError: Identifier 'foo' has already been declaredのようなエラーが出る場合があります。<script>
// ページ遷移で、戻ってきた時、同じ変数を宣言することになるのでエラーになる
const foo = "foo";
</script>解決方法としては、
type="module"を使用するか、<script type="module">
const foo = "foo";
</script>ブロックスコープ
{}を使用してください。<script>
{
const foo = "foo";
}
</script>