楽天RMS トップ・下層ページのヘッダー・フッターを横幅100%(フルスクリーン)で表示させるカスタマイズ

楽天RMS R-Cabinet(キャビネット)で差し替えた画像が変わらない(反映されない)時の対処法

楽天ショップでPCのトップページだけでなく下層ページでも横幅が100%(フルスクリーン)になっているサイトを見かけませんか?

横幅が100%(フルスクリーン)だとデザインの幅も広がりますし訪れたお客さんに固定幅よりすっきりとした印象を与えやすくなります。

ただし通常だと楽天Goldのトップページだけ横幅が100%(フルスクリーン)で下層ページに入ると楽天RMSから出力されたソースが反映されることになるので本来であれば固定幅になってしまいます。

そこでトップページ・下層ページともに楽天Goldを使わずに横幅が100%(フルスクリーン)で構築する方法を紹介したいと思います。

楽天ショップの横幅が100%(フルスクリーン)とは?

楽天でたまに見る下記のようなサイトを見かけませんか?

横幅が100%(フルスクリーン)

ショップ名が珍しいので目がそちらに行きがちですがヘッダーに注目です。

楽天では基本的にテーブルレイアウトという記述で表示されており楽天RMSの管理画面から操作する場合、特別なことをしない限りヘッダーやフッターは横幅100%にはなりません。

しかし、あるソースを入れることで横幅100%にすることができるんです。

楽天Goldでトップは作ったものの下層ページに入るとヘッダーの両端が切れていてデザイン的に「いまいちだなぁ~!」という印象を与えることを防ぐことができます。

トップページはキレイに作ったのに下層ページに入るとヘッダー・フッターの両端が切れてしまってかっこ悪いと悩んでいる方はぜひ参考にしてみてくださいね。

楽天RMS内のヘッダー・フッター・レフトナビにソースを入れる

ソースを入れる箇所は楽天RMS > デザイン設定 > PCデザイン設定 > ヘッダー・フッター・レフトナビになります。

ヘッダー・フッター・レフトナビのテンプレートの編集の中のヘッダーコンテンツとフッターコンテンツの入力エリアに下記ソースを入れることによって横幅100%にすることができます。

HTML
</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ソフトですばやく更新することができますよ。

くらパパ

クライアントがhtmlなどに慣れていないならRMS内で構築、慣れているならiframeを組み込んで構築がおすすめ!

コメントを残す