EC運営ヒント

楽天RMS内で、ヘッダーとフッターの幅を100%で表示する方法

更新日:

[`evernote` not found]
LINEで送る

どうも!きたむです!

今回は楽天RMSで、共通で使用しているヘッダーとフッターの裏技についてです。
楽天RMS内でヘッダーとフッターを入れるフィールドがありますが、
通常ここにソースを入れるとページの幅がコンテンツと同じ幅になる仕様になっています。

つまり、サイト内のコンテンツの幅が仮に「950px」であれば、ヘッダーとフッターも自動的に950pxに固定されてしまいます。
ですが、デザインによってはヘッダーやフッターは幅いっぱいまで表示させたいという時もあります。(最近はそういうデザインの方が主流になっている)

そんなときにすごく簡単にヘッダーとフッターを100%表示させる方法をご紹介します。
本当に簡単にできちゃいます!

ヘッダー例:

フッター例:

 

ヘッダーの表示幅を100%にする

下記のソースの「ヘッダーのソースを記入」の部分にヘッダーのhtmlを記述する。
楽天RMSにログインをし、「1-2デザイン設定>1PC デザイン設定>ヘッダー・フッター・レフトナビ」からテンプレートの新規作成かテンプレートの編集で「ヘッダーコンテンツ」に上記で作成したhtmlを挿入する。

楽天RMSし、

</div>


</div>


</div>



===================================

ヘッダーのソースを記入

===================================



<div id=”wrap2″>


<div id=”Top”>


<div id=”TopStoreBanner3″>

 

フッターの表示幅を100%にする

下記のソースの「フッターのソースを記入」の部分にフッターのhtmlを記述する。
楽天RMSにログインをし、「1-2デザイン設定>1PC デザイン設定>ヘッダー・フッター・レフトナビ」からテンプレートの新規作成かテンプレートの編集で「フッターコンテンツ」に上記で作成したhtmlを挿入する。

</div>


</div>


</div>



===================================

フッターのソースを記入

===================================



<div id=”wrap2″>


<div id=”Bottom”>


<div id=”BtmFreeSpace1″>

 
これで完成です。
簡単に実装ができてしまいます!
幅が固定か100%表示かという違いですが、この違いだけでも印象はかなり異なります。
中にはトップページだけ100%にしている店舗もありますが、やはり遷移先でヘッダーやフッターの表示が変わってしまうのも、違和感ありますよね。。。
今回説明した通り簡単に実装できますので、ぜひ試してみてください。

関連ニュース

[`evernote` not found]
LINEで送る

-EC運営ヒント

Copyright© EC grow | EC関連のニュースメディアサイト , 2017 All Rights Reserved.