この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
楽天ショップでPCのトップページだけでなく下層ページでも横幅が100％（フルスクリーン）になっているサイトを見かけませんか？
横幅が100％（フルスクリーン）だとデザインの幅も広がりますし訪れたお客さんに固定幅よりすっきりとした印象を与えやすくなります。
ただし通常だと楽天Goldのトップページだけ横幅が100％（フルスクリーン）で下層ページに入ると楽天RMSから出力されたソースが反映されることになるので本来であれば固定幅になってしまいます。
そこでトップページ・下層ページともに楽天Goldを使わずに横幅が100％（フルスクリーン）で構築する方法を紹介したいと思います。
楽天ショップの横幅が100％（フルスクリーン）とは？
楽天でたまに見る下記のようなサイトを見かけませんか？
ショップ名が珍しいので目がそちらに行きがちですがヘッダーに注目です。
楽天では基本的にテーブルレイアウトという記述で表示されており楽天RMSの管理画面から操作する場合、特別なことをしない限りヘッダーやフッターは横幅100％にはなりません。
しかし、あるソースを入れることで横幅100％にすることができるんです。
楽天Goldでトップは作ったものの下層ページに入るとヘッダーの両端が切れていてデザイン的に「いまいちだなぁ～！」という印象を与えることを防ぐことができます。
トップページはキレイに作ったのに下層ページに入るとヘッダー・フッターの両端が切れてしまってかっこ悪いと悩んでいる方はぜひ参考にしてみてくださいね。
楽天RMS内のヘッダー・フッター・レフトナビにソースを入れる
ソースを入れる箇所は楽天RMS > デザイン設定 > PCデザイン設定 > ヘッダー・フッター・レフトナビになります。
ヘッダー・フッター・レフトナビのテンプレートの編集の中のヘッダーコンテンツとフッターコンテンツの入力エリアに下記ソースを入れることによって横幅100％にすることができます。
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
【コンテンツを入れる箇所】
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<table width="800" cellspacing="0" cellpadding="0" border="0">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<table width="800" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="4">【コンテンツを入れる箇所】というところにヘッダーやフッターの要素を入れてくださいね。
楽天RMS トップ・下層ページのヘッダー・フッターを横幅100％(フルスクリーン）で表示させるカスタマイズまとめ
この記事は楽天RMS トップ・下層ページのヘッダー・フッターを横幅100％(フルスクリーン）で表示させるカスタマイズについて書きました。
この方法で構築するメリットはFTPソフトを使って楽天Goldを更新せずとも楽天RMS内だけで編集や更新することができます。
さらに楽天Goldを契約していてFTPソフトの使い方に慣れている人ならiframeをヘッダーとフッターに入れて読み込ませることでFTPソフトですばやく更新することができますよ。
くらパパ
