Wix ヘルプ

Wix Studio Two エディタ:リンクまたは HTML コードを埋め込む

7分

この記事では、2026年11月にリリースされた新しい Wix Studio Two エディタについて説明します。Wix Studio エディタまたは Wix Studio Two エディタのどちらを使用しているか不明な場合は、こちらで詳細を確認してください。

コードスニペットや外部 URL を埋め込むと、他のプラットフォームのコンテンツを表示することができます。カウントダウンタイマーや天気ウィジェットといったカスタムコンポーネントを追加したり、別のサイトのコンテンツを表示したりすることで、訪問者が必要とする情報をすべて 1か所にまとめて表示することができます。


コードまたはサイトを埋め込む

iFrame 要素は、「要素を追加」パネルから追加することができます。ページにコードとサイトのどちらを埋め込むかを選択し、要素にコードまたは URL を貼り付けて、iFrame 内にコンテンツを表示します。

重要:

コードやリンクを埋め込む前には、必ずガイドラインをお読みください。

埋め込みを追加する方法:

  1. エディタに移動します。

  2. 左上の「要素を追加」アイコン  をクリックします。

  3. 「要素」を選択します。

  4. 「埋め込み」アイコン  をクリックします。

  5. 「埋め込みコード」または「サイトの埋め込み」要素をページにドラッグします。

  6. アクションバーで「設定」アイコン  をクリックします。

  7. 以下の該当する手順に従います:

「要素を追加」パネルの「埋め込み」カテゴリーに、「埋め込みコード」と「サイトを埋め込む」要素が表示されているスクリーンショット。

表示されるコンテンツのサイズを調整する

多くの場合、埋め込み要素には、以下の例のように配布元によって要素の幅や高さがピクセル単位で事前に設定されています。

1<iframe width="560" height="315" 
2       src="https://www.wix.com" 
3        frameborder="0">
4</iframe>

ただし、iFrame のコンテナサイズが 560 x 315 ピクセル未満の場合は、コンテンツがクロップされてしまう恐れがあります。コンテンツがクロップされないようにするには、以下のように単位を px から % に変更し、値を 100% に設定してください。

1<iframe width="100%" height="100%" 
2       src="https://www.wix.com" 
3        frameborder="0">
4</iframe>

ガイドライン

iFrame にコードやリンクを埋め込む前には、以下のガイドラインを読むことをおすすめします。

コード

  • 必ず埋め込むコードが最新であり、HTML5 と互換性があることを確認してください。多くのブラウザでは、古いバージョンの HTML で記述した場合、ページやスクリプトが正しく表示されなくなります。

  • HTML コードには、ページのコア要素が含まれていますが、通常デザインやその他の複雑な機能を制御するためのコードは別に格納されます。そのため、該当する要素が CSS ファイルや JS ファイルなどに記述されていて、HTML コードに含まれていない場合は、一部の要素が機能しなくなったり、正しく表示されなくなる恐れがあります。

リンク

  • target 属性の使用方法がわからない場合は、こちら を参照するか、コード作成者にお問い合わせください。

  • リンクには、HTTP ではなく HTTPS が含まれていることを確認してください。コードに HTTP が含まれている場合、ライブサイトには表示されません。


埋め込みに関する問題のトラブルシューティング

コードやリンクを埋め込む際に問題が発生した場合は、以下をクリックして問題の解決にお役立てください。
重要:
Wix で作成またはテストされていない外部コードに関するサポートは提供しておりません。以下の手順でコードスニペットの問題が解決しない場合は、配布元に直接お問い合わせください。