対象プラン： 有料プラン
注意：独自に記述したコードや外部サービスが提供するコードの内容および動作についてチャット窓口でのサポート対象外となる可能性があります。Studioコミュニティで過去の投稿を参考したり質問の投稿もご検討ください。
Studioでは、サイトや個々のページの<head>と <body>タグに独自のコードを追加できます。
コード追加欄の「
<head>内の末尾」に追加したコードは、HTML Documentの<head>に挿入され、HTML Document が構築される前に実行されます。「
<body>内の末尾」に追加したコードは、HTML Documentの<body>に挿入され、HTML Document の読み込みと解析が完了したタイミングで実行されます。
カスタムコードの仕様
</head>および</body>タグ直前に追加できるコードは、それぞれ最大10個までです。1つのコード欄には、最大30000文字まで入力できます。
<head>タグに追加できるタグ
<head>タグに追加できるタグは以下の5つのタグのみです。これ以外のタグを入力しても、設定には反映されません。
<link><meta><style><script><noscript>
動的な値（CMSプロパティ、URL変数）の利用
カスタムコードの入力欄をクリックします。
左枠に表示された[+]ボタンをクリックします。
表示された候補から、利用したい値を選択します。
カスタムコードを追加する
注意：追加したコードはデザインエディタやライブプレビューでは動作しません。動作確認は、公開サイトで行なってください。
カスタムコードを管理する
追加されたコードはリスト形式で表示されます。コードにラベル付けをしたり、リストの順番を入れ替えることが可能です。
カスタムコードのラベルを編集する
リスト表示されたコードにはラベルが付き、デフォルトでは「New Code 1」のように番号付きで表示されます。
ラベルを変更する場合は、ラベル名をダブルクリックし、表示されたテキストフィールドで編集します。
カスタムコードの順番を入れ替える
リストのコードはドラッグで順番の入れ替えが可能です。順番を変更すると、実行されるコードの順序も変わります。
カスタムコードを削除する
削除したいコードにカーソルを乗せます。
表示された [×] ボタンをクリックすると、そのコードが削除されます。
注意点とサンプルコード
外部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>