• 文字サイズ
解決済

iframeで読み込んだページ切れてしまう

  • 相談者:非公開
  • 2019/03/14 19:07
買い物かご近くにiframeで「お茶うけにおすすめ」としてスイーツを表示させようと
していますが、ボックスの右側が切れてしまいます。
何が原因でしょうか。

https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/

iframe内のソースは以下の通りです。

<html>
<head>
<base target="_top">

<style type="text/css">
<!--
.box26 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #76421B;
border-radius: 8px;
width:380px;
}
.box26 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 20px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #F9F5EC;
color: #76421B;
font-weight: bold;
}
.box26 p {
margin: 0;
padding: 0;
}

-->
</style>


</head>
<body style="margin:0px;padding:0px;">

<div class="box26">
<span class="box-title">お茶うけにおすすめ</span>
<p><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/"><img src="https//www.rakuten.ne.jp/gold/SHOP-URL/images/parts/doraosusume.jpg"></a></p>
<br>
<p><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/"><img src="https//www.rakuten.ne.jp/gold/SHOP-URL/images/parts/youkanosusume.jpg"></a></p>
<br>
<p><a href="https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/"><img src="https//www.rakuten.ne.jp/gold/SHOP-URL/images/parts/kasuteraosusume.jpg"></a></p>
</div>

</body>
</html>

宜しくお願い致します。
キーワード:iframehtmlcsss
投稿内容について報告する




  • 返信者:非公開
  • 2019/03/15 10:47
ECマスターズの田中です。

いただいたiframe周りの構造を見たところ、
横幅350pxの画像に対し、
それを囲む<div class="box26………(省略)………
  • 返信者:非公開(質問者)
  • 2019/03/22 19:36
お世話になっております。

ご連絡が遅くなり申し訳ございません。

解決方法を試したところ、無事に解決しました。
ありがとうございました。………(省略)………