楽天GOLD 外枠とか横幅ってどこで変えるの？
オリジナルHTMLを作ってiframeで張り付けたはいいが…
ヤフーショッピングは管理画面から全体の横幅を変える機能もあったし、デフォルトでつけられているidやclassを操れば大枠を変更したりリキッドデザインにすることができたけど…
楽天はどこでやるんじゃい。
解：
楽天RMSサイトはtable要素の入れ子でできています。ので、そのままではいじれません。うん、知ってたけどほんと楽天てうんこ。
解決策：
ヘッダーやフッターの、入力欄の上下でtable要素を終わらせる記述をプラスする。
こうすることで楽天が設置しているテーブルを途中でぶった切り、間に自由な空間を生み出せる。自由な空間のうしろに、もとあったテーブルを回復させる記述も忘れずに。
●ヘッダーコンテンツ
<!-- テーブル終わらせ記述 -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- /テーブル終わらせ記述 --><iframe frameborder="0" src="https://www.rakuten.ne.jp/gold/*****/header.html" width="100%" height="123" scrolling="no"></iframe>
<!-- *テーブル回復記述 -->
<table width="100%" cellspacing="20" cellpadding="0" border="0"><tr>
<td align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="4"><!-- /*テーブル回復記述-->
●フッターコンテンツ
<!-- テーブル終わらせ記述 -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- /テーブル終わらせ記述 --><iframe frameborder="0" src="https://www.rakuten.ne.jp/gold/cell-apt/footer-rak.html" width="100%" height="893" scrolling="no"></iframe>
<!-- *テーブル回復記述 -->
<table width="100%" cellspacing="20" cellpadding="0" border="0">
<tr>
<td align="center"><table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="4"><!-- /*テーブル回復記述 -->
こうしておきつつ、間にdivを追加してオリジナルclassなど追加もできる。
しかし次なる疑問
ヤフートリプル・楽天GOLD でオリジナルデザインってどうやるの？
ざっくり流れ
①これらのHTMLファイルとCSS、JSファイル、画像などをローカルに用意する
index.html ：トップページ
header.html ：ヘッダー部分のhtml
footer.html ：フッター部分のhtml
sidenavi.html：サイドナビ部分のhtml
②ヤフートリプル、楽天GOLDの各サーバーにUPする
③ヤフートリプルは
ストア構築＞ストアデザイン＞ストアデザインメニューから、
・ヘッダー
・フッター
・サイドナビ
の「フリースペース」にiframeを書いて各htmlページを反映させる。
横幅など外枠をいじりたい場合は⇒
③楽天GOLDは
デザイン設定＞テンプレート設定＞ヘッダー・フッター・レフトナビから、
テンプレートを新規登録する。
・ヘッダーコンテンツ
・レフトナビゲーション
・フッターコンテンツ
の各入力欄にiframeを書いて各htmlページを反映させる。
横幅など外枠をいじりたい場合は⇒ (楽天めんどいぞ)
【ヤフーショッピング】トリプルで作ったhtmlをiframeで設定したらリンクが効かなくなった
症状：
トリプルでヘッダー、フッター、サイドナビのHTMLを作成し、iframeで
ストア構築＞ストアデザイン＞ストアデザインメニュー＞ から
<iframe width="100%" height="800" sandbox="allow-same-origin" scrolling="no" frameborder="0" src="https://shopping.geocities.jp/****/footer.html"></iframe>
などと貼り付けたところ、HTML内のリンクがクリックしても反応しなくなった。
解決：
sandbox="allow-same-origin" を削除したら解決！
【ヤフーショッピング】トリプルで作ったhtmlをiframeで設定したらfontawesomeが表示されない
症状：
トリプルでヘッダー、フッター、サイドナビのHTMLを作成し、iframeで
ストア構築＞ストアデザイン＞ストアデザインメニュー＞ から
<iframe width="100%" height="800" sandbox="allow-same-origin" scrolling="no" frameborder="0" src="https://shopping.geocities.jp/****/footer.html"></iframe>
などと貼り付けたところ、HTML内で使っているfontawesomeのフォントが表示されない。
fontawesomeはこのタグをheadに貼り付けている。
<script src="https://kit.fontawesome.com/954a0df174.js" crossorigin="anonymous"></script>
解決：
sandbox="allow-same-origin" を削除したら解決！
