IFRAMEで見積フォーム埋め込みを柔軟に設定する（詳しい方向け）

マイ見積では、IFRAMEによる見積フォーム埋め込みを許可しています。初期設定では幅800pxで埋め込みます。

この埋め込みサイズを、柔軟に設定したい場合のカスタマイズ方法です。
※ホームページ制作会社など詳しい方向けの情報です。知識の無い方はホームページ制作会社にご依頼ください。

1. 埋め込みiframeの外側に、divタグを設置します。
設定例:

<div class="embed-iframe">
  <iframe width="800" height="800" src="https://my-mitsu.jp/estimation/274" loading="lazy"></iframe>
</div>

マイ見積の編集画面で「リンク」＞「埋め込み」と進むと、

  <iframe width="800" height="800" src="https://my-mitsu.jp/estimation/274" loading="lazy"></iframe>

といったタグを取得できます。このタグ(iframe)の外側を、新たにdivタグで囲います。

2. スタイルシートで、幅や高さを画面サイズに応じて変わるように設定します。
設定例:

<style>
.embed-iframe {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

.embed-iframe iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>

スタイルシートで幅や高さを設定することで、柔軟な設定が可能になります。上の例では、レスポンシブ(画面サイズに応じてIFRAMEのサイズも変更する)デザインにしています。

※widthやheightの値は、ホームページのデザインに合わせて調整してください。