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

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>

Yahooショッピング用の制限について

yahooようにはこちら


<div style="position: relative; width: 100%; padding-bottom: 40%; height: 0; overflow: hidden;">
  <iframe src="https://shopping.geocities.jp/pet-kazoku/salebanery/croton-sale.html" scrolling="no" frameborder="0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>こちらはインラインフレームです</iframe>
</div>

Yahoo!ショッピングのストアエディター（フリースペースやヘッダー・看板エリア等）では、直接 <style> タグや <link> タグを記述するとシステム側で自動削除・無効化される仕様になっています。

そのため、スタイルを直接タグ内に埋め込む インラインスタイル（style属性） に書き換える必要があります。

<style> のインライン化: クラス指定を削除し、親要素の <div> と <iframe> それぞれに style="..." を割り当てました。

枠線の除去: 古いブラウザやエディターの仕様に合わせて border: 0; に加え frameborder="0" も念のため付与しています。

高さの比率調整: padding-bottom: 40%; でバナーの縦横比（横100 : 縦40）を保持しています。バナー下部に余白が出る、または見切れる場合は、このパーセンテージ数値を調整してください。

変換後のHTMLコード

Yahoo!ショッピングのストアエディターでは、通常のHTMLコメントアウト構文である <!-- メモ --> を記述して反映・保存すると、システムの自動サニタイズ（クレンジング処理）によって削除されてしまう仕様になっています。

そのため、エディター内で作業メモを残したい場合は、「非表示属性を持つタグを使う」 または 「CSSで非表示にするタグを使う」 方法で代用します。

Yahoo!ショッピングのストアエディターでは、通常のHTMLコメントアウト構文である `<!-- メモ -->` を記述して反映・保存すると、**システムの自動サニタイズ（クレンジング処理）によって削除されてしまう**仕様になっています。

そのため、エディター内で作業メモを残したい場合は、**「非表示属性を持つタグを使う」** または **「CSSで非表示にするタグを使う」** 方法で代用します。

---

### 代替案1：`display:none` を使ったコメント用タグ（推奨）

画面上には一切表示されず、管理画面のHTMLコード内でのみ確認できるタグです。

```html
<span style="display:none;">メモ</span>

```

※ ブロック単位の区切りメモとして使いたい場合は `div` にしても問題ありません。

```html
<div style="display:none;">ここからタイムセール枠</div>