💡 この機能は、有料プラン契約プロジェクトでご利用いただけます。
STUDIOサイトにカスタムコードを追加する方法
STUDIOでは、カスタムコード機能を利用すると、サイトや個々のページの <head> と <body> タグに独自のコードが追加できます。
コード追加欄の「<head> 内の末尾」に追加したコードは、HTML Document の <head> に挿入され、HTML Document が構築される前に実行されます。
「<body> 内の末尾」に追加したコードは、HTML Document の <body> に挿入され、HTML Document の読み込みと解析が完了したタイミングで実行されます。
なお、追加したコードはデザインエディタやライブプレビューでは動作しません。動作確認は、公開サイトで行なってください。
💡 独自に記述したコードや外部サービスが提供するコードの内容や動作については、STUDIOチャット窓口ではサポートできません。STUDIOコミュニティで質問の投稿や過去の投稿をご参考にしてください。
カスタムコードの制限
</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>