楽天
楽天RMSでヘッダー・フッターを画面いっぱいする裏ワザ
2018年10月01日 12:00
こんにちは！社員Aです👩
あっという間に10月になってしまいました。
今年もあと3ヶ月だと思うと、何に対してかわかりませんが何故か焦ってしまいます。
平成最後だからでしょうか？（笑）
さて、今回は楽天RMSネタをお送りします。
楽天RMSのヘッダー・フッター・レフトナビで、ヘッダー・フッターを画面いっぱいに表示したいときに使える裏技を紹介します。
ヘッダー・フッターコンテンツ100%の表示例
最近は楽天でもヘッダー・フッターをフル画面（100%）で表示している店舗さんを多く見かけるようになりました。
今回はその一例をご紹介します。
ヘッダーを100%フル表示にしている例
ロゴやグローバルメニューは中央に寄せられていますが、ピンク色の帯の部分が画面の端まで表示されているのが分かるかと思います。
フッターを100%フル表示にしている例
同じ店舗さんですが、フッターのコンテンツは中央に寄せて背景だけを100%表示にしています。
ヘッダー・フッターの表示幅を100%にする方法
さて、ここからは実際に表示幅を100%にする方法を紹介していきます。
RMSのヘッダー・フッター・レフトナビのヘッダーもしくはフッターに下記を入れるだけです。
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- ☆★ここに表示したいヘッダー内容を入れる★☆ -->
<table width="100%" cellspacing="20" cellpadding="0" border="0">
<tr>
<td align="center">
<table width="800" cellspacing="0" cellpadding="5" 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">
<！– ☆★ここに表示したいヘッダー内容を入れる★☆ –>の部分に、ヘッダーの内容やiframeなどを挿入することで100%表示が実現できます。
iframeを入れる場合は、下記のようにwidthで100%を指定しておきます。
<iframe src="#" frameborder="0" scroll="no" width="100%"></iframe>
まとめ
楽天RMSはカスタマイズにかなり制限があるので、希望のデザインどおりに表示させるのが難しいと思われがちですが、上記の方法で流行りのフル表示が実装できますので、機会があればぜひ試してみてください。
【関連記事】
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
