Embed（埋め込み）ボックス

Studioでは、Embed（埋め込み）ボックスを使って、ページ上にHTML・CSS・JavaScriptを含むコードの埋め込みが可能です。Googleマップなどの外部ツールやコンテンツをページ内で表示できます。

注意：独自に記述したコードや、外部サービスが提供するコードの内容および動作については、チャット窓口でのサポート対象外となる可能性があります。

Studioコミュニティで過去の投稿を参考したり質問の投稿もご検討ください。

Embed（埋め込み）ボックスを追加する

埋め込みコード編集ウィンドウは、左ペインにコードエディタ、右ペインにプレビューを表示します。

機能	操作
元に戻す	`Cmd+Z` / `Ctrl+Z`
やり直し	`Cmd+Shift+Z` / `Ctrl+Shift+Z`
行の折り返し	[折り返し]トグルをON
変数の挿入	エディタにフォーカス中、カーソル位置に表示される＋ボタンをクリックしてから、CMSプロパティを選択

右ペインでは、コードの実行結果をプレビューできます。

CMSプロパティやURL変数などの動的な値をコード内で利用できます。

Embedボックスは、追加したコードの内容に応じて、iframeタイプかsandboxタイプのいずれかのコードタイプに自動的に変化します。

次のようなコードを追加した場合はiframeタイプになります。

注意：HubSpotフォームIDをCMSプロパティで埋め込んでいる場合は、自動的に「sandbox」タイプとして扱われます。

sandboxタイプではセキュリティ制限により、一部機能に制約が発生する場合があります。

次のようなコードを追加した場合はsandboxタイプになります。

応用的な利用時には、以下の注意点をあらかじめご覧ください。

スタイル（style）などの扱い
コードタイプがsandboxタイプの場合、styleなどで設定したスタイルはEmbedボックス内のみに適用されます。ページ全体には影響しません。
DOMContentLoaded イベントの扱い
DOMContentLoadedを前提とした処理は動作しないため、別のイベントや処理方法を検討してください。
```
<script> document.addEventListener('DOMContentLoaded', function() { console.log('発火しません'); }) </script>
```
埋め込みコード内でのリンク設定
埋め込みコード内でリンクを設定する場合は、遷移先を明確にするため、次のいずれかのtarget属性を設定してください。
- target=”_blank”
- target="_parent"
- target="_top"
target属性を設定しない場合、Embedボックス内での遷移となり、ページ全体の遷移にはなりません。
```
<a href="<https://studio.design/ja>">studio LP</a> <a href="<https://studio.design/ja>" target="_blank">studio LP _blank</a> <a href="<https://studio.design/ja>" target="_top">studio LP _top</a> <a href="<https://studio.design/ja>" target="_parent">studio LP _parent</a>
```