[C]楽天RMSで楽天Goldを利用せずにヘッダーやフッターを横幅100%で表示させる方法

ABOUTこの記事をかいた人

大阪生まれ大阪育ちの生粋な関西人。30代でフロントエンジニアやってます。WEB系やサッカー・ゲームの話題・美味しくて安い居酒屋やハシゴ酒が大好き。気軽にフォローをポチッと押してね♪

スポンサードリンク

ヘッダーやフッターの横幅100%とは

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

NewImage

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

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

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

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

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

ヘッダー・フッター・レフトナビにソースを入れる

ソースを入れる箇所は楽天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で楽天Goldを利用せずにヘッダーやフッターを横幅100%にする方法となります。

ヘッダー・フッターはPCのトップページやカテゴリ・商品詳細ページと共通で表示されるものになります。

ここにiframeを入れて読み込ませることによって更新なども楽になりますよ。

クラウド
楽天ショップのカスタマイズの参考にしてみてくださいね。








FIFA19完全攻略ガイド


FIFA19に関するさまざまな情報を日々更新中!
FIFA19について知りたくなったらここをチェック!



FIFA18完全攻略ガイド


FIFA18に関するさまざまな情報を日々更新中!
FIFA18について知りたくなったらここをチェック!


コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

大阪生まれ大阪育ちの生粋な関西人。30代でフロントエンジニアやってます。WEB系やサッカー・ゲームの話題・美味しくて安い居酒屋やハシゴ酒が大好き。気軽にフォローをポチッと押してね♪