楽天RMSでヘッダー・フッターを画面いっぱいする裏ワザ

楽天

楽天RMSでヘッダー・フッターを画面いっぱいする裏ワザ

2018年10月01日 12:00 

楽天RMSでヘッダー・フッターを画面いっぱいする裏ワザ

こんにちは!社員Aです👩

あっという間に10月になってしまいました。

今年もあと3ヶ月だと思うと、何に対してかわかりませんが何故か焦ってしまいます。

平成最後だからでしょうか?(笑)



さて、今回は楽天RMSネタをお送りします。

楽天RMSのヘッダー・フッター・レフトナビで、ヘッダー・フッターを画面いっぱいに表示したいときに使える裏技を紹介します。

 

ヘッダー・フッターコンテンツ100%の表示例

最近は楽天でもヘッダー・フッターをフル画面(100%)で表示している店舗さんを多く見かけるようになりました。

今回はその一例をご紹介します。

ヘッダーを100%フル表示にしている例

ロゴやグローバルメニューは中央に寄せられていますが、ピンク色の帯の部分が画面の端まで表示されているのが分かるかと思います。

 

フッターを100%フル表示にしている例

同じ店舗さんですが、フッターのコンテンツは中央に寄せて背景だけを100%表示にしています。

 

ヘッダー・フッターの表示幅を100%にする方法

さて、ここからは実際に表示幅を100%にする方法を紹介していきます。

注意点ここから作業手順をご紹介しますが、カスタマイズするときは、必ずバックアップをとっておいてください。自己責任でお願いします。

 

RMSのヘッダー・フッター・レフトナビのヘッダーもしくはフッターに下記を入れるだけです。

<!– ☆★ここに表示したいヘッダー内容を入れる★☆ –>の部分に、ヘッダーの内容やiframeなどを挿入することで100%表示が実現できます。

iframeを入れる場合は、下記のようにwidthで100%を指定しておきます。

 

まとめ

楽天RMSはカスタマイズにかなり制限があるので、希望のデザインどおりに表示させるのが難しいと思われがちですが、上記の方法で流行りのフル表示が実装できますので、機会があればぜひ試してみてください。

 

【関連記事】

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。日本語力が乏しく…社内のみんなからも指摘をされるので、ブログの執筆を通じて語彙力強化していきたいです✨ 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物がすきな皆さま、小動物トークしましょう!