【機能詳細】ページ編集（LP編集）／デザインパーツ　iframeパーツ

「iframe」パーツは、GoogleマップやGoogleカレンダーなど、外部サービスで提供されているiframeパーツをサイト内に表示する際に使用します。

外部サイトのiframeの埋め込みと、iframeを表示させるサイズを決める機能がついています。

※iframe内のソースコードはサポート外となります。

※サイトドメインとiframeの参照ドメインのどちらかがSSL化（https://）されていない場合は、うまく表示されません。ご注意ください。

完成イメージ

※Googleカレンダーをiframeに登録した場合を表示

項目の説明

①iframeタグ入力欄

②iframe幅の入力欄

③iframe高さの入力欄

④スマートフォン対応の設定

下記から選択できます。
※埋め込むiframeによっては、スマートフォン対応できないものもありますので、ご注意ください

・スマートフォン対応する
・スマートフォン対応する（幅のみ）
・スマートフォン対応しない

⑤取り込みボタン

ここをクリックすると、入力した内容が反映されます。

表示されない場合

余白で設定する場合
カスタムCSSに「if_custom」「 pc-h800 sp-h900」の記述がある場合
CSSで設定する場合
scriptタグの場合
iframeの呼び出し先が「http」となっている場合

＜余白で設定する場合＞

一部のお客様にはレスポンシブで表示できるようにカスタムCSSが設定されている影響でプレビュー・公開ページで表示されないことがあります。その場合は、iframeのカスタマイズにて上余白（任意のサイズ）を設定することで表示されます。

また、編集画面で設定できる余白の上限は500となっているため、上下合わせて1000以上設定したい場合はCSSでの対応が必要となります。設定されたい場合はサポートまでお問合せください。

＜カスタムCSSに「if_custom」「iframe_custom」の記述がある場合＞

カスタムCSSに「if_custom」や「iframe_custom」の記述がある場合は、予めCSSが設定してありますので、iframeのカスタマイズにて、追加するclass名に下記のように記述してください。

例1）if_custom pc-h800 sp-h900
例2）iframe_custom pc-h800 sp-h900
（pc-hとsp-hの後の数字は、PCとスマートフォンでの高さを指定でき、任意の数字を設定可能です。）

＜CSSで設定する場合＞

ページのCSSに下記を記載し、設定したいifameパーツのカスタマイズ（パレットアイコン）の追加するclass名に「custom-iframe002」を追加します。

※下記CSSはサンプルであり、お客様のサイトに正しく反映されるかについては検証しておりません。
またCSSの詳細についてはサポート対象外となるため、CSSが動作しないといったお問い合わせについてはご遠慮下さい。

例：数値は、aspect-ratio: 16/9;　の16が横、9が縦を表していますので適宜変更してください。

.theme-fo-base {
  .component.iframe {
  &.custom-iframe002 {
    aspect-ratio: 16/9;
    height: auto;
  }
  }
}

＜scriptタグの場合＞

iframeパーツでは、scriptタグを設定することができません。scriptタグの場合はJavaScript埋め込みパーツをご利用ください。

■JavaScript埋め込みパーツの詳細についてはこちら
＞【機能詳細】ページ編集（LP編集）／デザインパーツ　JavaScript埋め込みパーツ

＜iframeの呼び出し先が「http」となっている場合＞

一般的な公開サイトは「https」と暗号化されたURLのため、iframeの呼び出し先が「http」となっていて暗号化されていないURLの場合は、ブラウザの仕様で暗号化されたページ内に非暗号化のページを読み込むことを禁止しているため、iframe内が表示されません。
そのため、iframe内のURLを「https」に変更してください。
※該当のページが暗号化に対応していない場合はSSL証明書の設定が必要となりますので、リンク先のサーバーで設定してください。

（例）
表示されない：呼び出し先が暗号化されていないURL

表示される：呼び出し先が暗号化されているURL

設置する方法（動画）

画像をクリックして拡大表示することができます
※動画は旧契約画面になります

新契約と旧契約の画面比較

旧契約	新契約
その他パーツ	埋め込み
その他パーツ	サイトカスタム

新契約のデザインバリエーション

新旧で違いはありません

このセクションの記事

目次

完成イメージ