メインコンテンツにスキップ
Embedボックスを追加する

StudioのEmbedボックス機能を使って、外部サービスのコンテンツをウェブページに埋め込む方法をご紹介します。この記事では、設定手順および注意すべき点を分かりやすく説明しています。

Saika avatar
対応者:Saika
1か月以上前に更新

Embedボックスで外部コンテンツを簡単に埋め込む

Studioでは、HTML、CSS、そしてJavaScriptを用いたコードがページに埋め込むことができます。埋め込むには、Embedボックスという専用のボックスをページに配置します。

このボックスを使えば、Googleマップや外部サービスのフォームなどを表示することができます。

注意:独自に記述したコードや外部サービスが提供するコードの内容および動作についてチャット窓口でのサポート対象外となる可能性があります。Studioコミュニティで過去の投稿を参考したり質問の投稿もご検討ください。

コードタイプ

Embedボックスには、iframeタイプsandboxタイプがあり、追加するコードの内容によって自動的にタイプ変化します。

Iframeタイプ

  • <iframe> タグのみで構成されているコード

  • formrunで作成したフォームの埋め込みコード

  • HubSpot Formの埋め込みコード

sandboxタイプ

  • iframeタイプに該当しない、その他全てのコード

また、コード内ではCMSプロパティが追加できます。CMSプロパティをコード内で利用すると、iframeタイプからsandboxタイプへと変化します。

スクリーンショット:カスタムコードのタイプを確認する様子。

設定手順

  1. エディタの左側にある追加パネルから、Embedボックスをページに配置します。

スクリーンショット: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

こちらの回答で解決しましたか?