Embedボックスで外部コンテンツを簡単に埋め込む
STUDIOでは、HTML、CSS、そしてJavaScriptを用いたコードがページに埋め込むことができます。埋め込むには、Embedボックスという専用のボックスをページに配置します。
このボックスを使えば、Googleマップや外部サービスのフォームなどを表示することができます。
💡 STUDIOチャット窓口では、独自に記述したコードや外部サービスが提供するコードの内容および動作についてのサポートはできません。質問がある場合や関連情報を参照したい場合は、STUDIOコミュニティをご覧ください。
コードタイプ
Embedボックスには、iframeタイプとsandboxタイプがあり、追加するコードの内容によって自動的にタイプ変化します。
Iframeタイプ
<iframe> タグのみで構成されているコード
formrunで作成したフォームの埋め込みコード
HubSpot Formの埋め込みコード
sandboxタイプ
iframeタイプに該当しない、その他全てのコード
また、コード内ではCMSプロパティが追加できます。CMSプロパティをコード内で利用すると、iframeタイプからsandboxタイプへと変化します。
設定手順
エディタの左側にある追加パネルから、Embedボックスをページに配置します。
2. エディタの右側にある設定パネルを開き、埋め込みコード欄にコードを追加します。
3. 最後にサイトを更新し、公開サイトに反映させてください。
注意点とサンプルコード
応用的な利用時には、以下の注意点をあらかじめご覧ください。
スタイル（style）などの扱い
コードタイプ sandbox タイプで、スタイル（style）などを設定した場合、それらはEmbedボックス内でのみ適用されます。ページには、影響を与えません。DOMContentLoaded イベントの扱い
DOMContentLoaded イベントは、発火しません。<script> document.addEventListener('DOMContentLoaded', function() { console.log('発火しません'); }) </script>埋め込みコード内でのリンク設定
リンクを設定する際は、「target=”_blank”」「target=_top”」または「target="_parent"」を設定してください。設定がない場合、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>
embed script speakerdeck