インラインフレームの活用　iframe

2026年8月25日

iframe　とは

iframe　インラインフレームを使うと、そこに貼り付けられているページの内容、（ここではセール用バナー）をgoldサーバー内で変更するだけで、各所に設定したフレームの内容を一度に変更できます。
つまり、いろいろなサイトに設定したものでも、一箇所の変更で、一気に変更できるということです。
各ブログや商品ページに設定しておくと便利です。

<style>
.time-sale-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 40%;
  height: 0;
  overflow: hidden;
}

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

<div class="time-sale-wrapper">
  <iframe src="https://www.rakuten.ne.jp/gold/pet-kazoku/salebaner/time-sale.html" scrolling="no" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>こちらはインラインフレームです</iframe>
</div>

実際の設定例

ちなみに上に設置したバナーは、インラインフレームを使って設置しています。通常のバナーと同じ様に見えますが、実は中身だけ別のサーバーから持ってきています。

レスポンシブにしてありますので、classの名前を変えれば、大きさも自由自在です。

中身のバナーそのもののページは、楽天のGOLDページに置いてあります。
コードは以下のとおりです。

<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>今だけ！タイムセール</title>
</head>

<body>
    <a href="https://item.rakuten.co.jp/pet-kazoku/c/0000005562/" target="_blank"><img src="https://www.rakuten.ne.jp/gold/pet-kazoku/salebaner/t-sale-c.jpg" width="100%" height="auto"></a>
</body>
</html>