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

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

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

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

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

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

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

ヘッダー幅100%のHTML記述

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

具体的にすること

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

真ん中に　headerを記述。

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

という作業です。

 <!-- 閉じタグ ヘッダースタート -->
        </td>
        </tr>
        </table>
    
    </td>
    </tr>
</table>
<!-- /閉じタグ -->

<!--ここに header を記述する-->
 
<!-- *戻しタグ -->
<table width="100%" cellspacing="20" cellpadding="0" border="0">
    <tr>
    <td align="center">
    
    <table width="100" cellspacing="0" cellpadding="0" border="0">
        <tr>
        <td>
        
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr>
            <td colspan="4">
            <!-- /*戻しタグ ヘッダーエンド-->

フッター幅100%のHTML記述

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

具体的にすること

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

真ん中に　footerを記述。

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

という作業です。

                <!-- 閉じタグ フッターコンテンツ スタート -->
                </td>
                </tr>
            </table>
        
            </td>
            </tr>
        </table>
      
        </td>
        </tr>
    </table>
    <!-- /閉じタグ -->

 
<!-- ここにfooterを記述 -->
 
<!-- *戻しタグ -->
<table width="100%" cellspacing="20" cellpadding="0" border="0">
    <tr><td align="center">
            
        <table width="100%" cellspacing="0" cellpadding="0" border="0">
            <tr><td colspan="4">
            <!-- /*戻しタグ フッターコンテンツ エンド -->

2018年10月13日　 カテゴリー: 未分類 | tag: 楽天GOLD, 楽天RMS