楽天商品ページ内ヘッダの横幅を画面いっぱいにする方法

Question

お世話になっております。
楽天商品ページ内の共通ヘッダをGOLDで作成し、そこにリンクを貼ったiframeを「ヘッダー・フッター・レフトナビ」に入れて表示させています。
そのヘッダの横幅を以下のショップさんのように100%表示になるようにしたいのですが、どのようにすればできますでしょうか？
https://item.rakuten.co.jp/cavatina/police-020
(トップページ～お問い合わせの赤い部分や大きい画像スライダーのような形で、iframeコンテンツを横幅いっぱいに表示したいです)

自社のものですとgoldにアップロードしたHTML(header.html)を直接開けば画面いっぱいに表示されるのですが、商品ページ内では両端が特定の場所で切れたようになってしまいます。

ご回答をよろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

＞ヘッダの横幅を以下のショップさんのように100%表示になるようにしたいのですが、どのようにすればできますでしょうか？

方法のご案内の前にご注意いただきたいのですが、
下記方法は、楽天が予め用意したレイアウトをわざと崩す方法になりますので、
楽天の仕様変更や、再修正時のミスなどにより
ページ全体のレイアウトが崩れる危険がございます。
必ず、危険性をご理解いただき、
導入後は、いつでも正常な状態に戻せるよう
メモ帳などでバックアップをお取りいただきますよう
お願いいたします。

楽天市場のページは、
タグで作成した表の中に、さらに表を作り、さらに表を……
という形で、表の入れ子で構成されております。

ヘッダーは、その中にある表の１つのセルとして扱われているため、
ヘッダーの中に含まれるタグの横幅を100%と指定した場合、
セルの横幅以上に拡がることはありません。
（無理矢理拡げることも可能ですが、そうすると
　ページ全体のレイアウトも拡がってしまいます）

ページ全体のレイアウトに影響を与えずに
の横幅を画面いっぱいに拡げる方法の一つとして、
いただいた商品ページでは、表の外に出すという方法を採っております。

いただいた商品ページにて、
ヘッダーに記載されたタグの前方に

= この下の行から ====================









= この上の行まで ====================

タグの後方に

= この下の行から ====================









= この上の行まで ====================

このようなタグが記載されております。

つまり、前方のタグで、楽天が本来設置している表を強制的に閉じてしまい、
直後にタグを画面横幅いっぱいに拡げて表示させ、
後方のタグで、楽天が本来設置している表と同じ構造を再現しております。

BVLさんのショップでも、同じタグをの前方・後方に記載することで
画面いっぱいに表示されるを設置することができますが、
最初に申し上げたとおり、表示が崩れる危険性が高いため、
十分ご理解・ご注意いただいた上で、
実装していただきますようお願いいたします。

Answer

丁寧にご説明いただき誠にありがとうございます。
危険性も含めましてよく理解できました。
一旦検討いたしまして、利用する場合は注意深く行いたいと思います。