HOME > BLOG > Web制作 > 楽天RMSでヘッダー・フッターへ幅100%デザインにする方法

楽天RMSでヘッダー・フッターへ幅100%デザインにする方法

rakuten

楽天RMSを使用したサイト制作、制約が多く実装には裏技や工夫が必要となり、かえって疲れますね。

今回は楽天サイト制作・カスタマイズ時に必要となった、
ヘッダー・フッターを幅100%デザイン楽天RMSでカテゴリページ・商品ページに実装する方法です。

楽天RMSで幅100%デザインができない理由

楽天RMSサイトは基本的にtable要素の入れ子構造で作られています。

table要素に対し、tableを入れ子して、さらにtableを入れ子して。。。とそんな感じで作られています。
古い。。これでじゃ、、レスポンシブデザインなんてできないじゃないか。。
と、正直あきらめかけたのですが、、一つ裏技がありました。

ヘッダーやフッターの上下でtable要素を終わらせてしまえばいいんです!

ヘッダー幅100%のHTML記述

「デザイン設定」→「ヘッダー・フッター・レフトナビ」→「ヘッダー」を編集します。

具体的にすること

headerの上部で「header上部のテーブルを終わらせて」

真ん中に headerを記述。

headerの下部で「header下部の記述されているテーブルにつなげる」

という作業です。

 

フッター幅100%のHTML記述

「デザイン設定」→「ヘッダー・フッター・レフトナビ」→「フッター」を編集します。

具体的にすること

footerの上部で「footer上部のテーブルを終わらせて」

真ん中に footerを記述。

footerの下部で「footer下部の記述されているテーブルにつなげる」

という作業です。

 

2018年10月13日  カテゴリー: Web制作 | tag: ,

この記事のトラックバック用URL

お問い合わせ窓口
  • お電話でのお問い合わせ

    tel0283-25-1618

    AM9 : 00〜PM18 : 00(土曜・日曜定休)

  • メールでのお問い合わせ

single.php