楽天のデザイン設定をリキッドレイアウトにする

2016.02.15
2016.03.31

RMS
楽天

楽天のデザインって結構賛否両論で、

『あのごちゃごちゃ感がいい！』

『ページ長すぎて万里の長城渡り切ってもカゴが見えてこない！』

などなど。人によって好みが分かれますよね。

特にAmazon慣れしている人と、楽天慣れしている人が合い慣れない印象を受けます(笑)

実は楽天の場合、そんなページになってしまうのも致し方ないと言うのが現状です。
というのも、

デザイン設定(横幅とか編集できる箇所)が結構カチカチに決まっていて、反映の余地が無い。
当たり前ですが出店者の多くは、本業の方(販売者でwebデザイナーとかではないという意味)が多い。
ECコンサルタント(出店者をサポートしてくれる楽天の担当者)もデザイナーorクリエイターでは無い。

等色々な要因があると思います。

なので決まったデザインで決まった所を決まった範囲でしか変更が出来ないのでどのサイトも似通ったページになってしまうんですね。

もちろんメリットもあります。
RMSのUIはともかく『カチカチに決まってる事で、ページ作成を知らない人でもどこまで編集すればいいかのゴールが見える』という事でしょう！
UIは別だよ！(笑)

デメリットとしては『理想のページが作りづらい！』

ほんこれ。

なので、せめて横幅の概念を無くして自由に作ろう！が今回のコンセプトです。

デザイン設定をカスタマイズ

投稿時点での情報です。アップデートにより異なる場合があります。

なんで横幅100％が出来ないの？

楽天は以前の記事でも紹介しましたが、ミルフィーユもびっくりするくらい<table />の入れ子がすごいです。

そんな<table />に横幅800pxの設定が入っているので、リキッドレイアウトが出来ない仕様となっております。

『じゃぁ、<table />切ればいいじゃん。』

と言う事で切りましょう！

リキッドにする仕組み

上記でも説明した通り、単純に横幅800pxに指定された<table />の外に出れば普通に横幅100％の領域になります。

なので、デザイン設定の始まりを『閉じタグ』からスタートして、最後に『table戻しタグ』でスタートすればフリーダム領域の完成です！

参考例として、下記ページのような横幅が固定されないワイドなデザインページの作成が可能になります。

楽天参考ページ

ヘッダー・フッター・レフトナビ

ヘッダー

合計3個のテーブルが入れ子になっているのでそれらを全部ちぎって最後に復帰させます。

[html]
<!– 閉じタグ –>
</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="0" border="0"><tr><td>
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td colspan="4">
<!– /*戻しタグ –>
[/html]

レフトナビ

こちらも合計3個のテーブルが入れ子になっているのでそれらを全部ちぎって最後に復帰させます。

[html]
<!– 閉じタグ –>
</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="0" border="0"><tr><td>
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr valign="top"><td>
<!– /*戻しタグ –>
[/html]

フッター

こちらも合計3個のテーブルが入れ子になっているのでそれらを全部ちぎって最後に復帰させます。

[html]
<!– 閉じタグ –>
</td></tr></table>
</td></tr></table>
</td></tr></table>
<!– /閉じタグ –>

★ここの内容がリキッドレイアウトになります。

共通説明文(大)

2カラムの最下層にあるので、ちぎる回数も膨大です。
こういうカスタマイズは楽天のアップデートでコロッと使えなくなる危険性が高いので、余りおススメしません。
が、僕は使ってます(笑)

[html]
<!– 閉じタグ –>
</td></tr></table>
</td></tr></table>
</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="0" border="0"><tr><td>
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr valign="top"><td width="100%" align="center">
<table cellspacing="0" cellpadding="0" border="0"><tr><td>
<table width="100%" cellspacing="2" cellpadding="0" border="0"><tr><td class="exT_sdtext">
<!– /*戻しタグ –>
[/html]

さらにカスタマイズも可能

間に<div />を挟む

例えばヘッダーの戻しタグの間に固有のidを振った<div>を挟み込んで、フッターでその</div>で閉じると言う風にすると、外部スタイルでさらにオリジナルのアレンジも可能です。

ヘッダーのデザイン

[html]
<!– 閉じタグ –>
</td></tr></table>
</td></tr></table>
</td></tr></table>
<!– /閉じタグ –>

★リキッドになったヘッダースペース。

<!– *戻しタグ –>
<div id="original-id"><!–独自のdivタグ–>
<table width="100%" cellspacing="20" cellpadding="0" border="0"><tr><td align="center">
<table width="800" cellspacing="0" cellpadding="0" border="0"><tr><td>
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr><td colspan="4">
<!– /*戻しタグ –>
[/html]

フッターのデザイン

[html]
<!– 閉じタグ –>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</div><!–独自divの閉じタグ–>
<!– /閉じタグ –>

★リキッドになったフッタースペース。

こうする事でさらに、デザインのアレンジ幅も広がりますね！

しかしながら、より入れ子を増やすことになるので、楽天のアップデートによる仕様変更への対応にも、より敏感になる必要があります。

PC用販売説明文をちぎる

もちろんですが、ヘッダーフッターレフトナビ以外にもPC用販売説明文だってちぎれます。
僕が一番ちぎる事が多い部分ですが、もちろんタグ構成はよりデリケートになります。

さらにデザイン設定ではなく、各商品を個別に設定しなければいけないので、もし仕様変更の際にレイアウトが崩れてしまった！と言う時の対処もあらかじめ決めて置かないと大変なことになります。
が、一番自分の好きなデザインを実現出来る近道でもあります！

[html]
<!– 閉じタグ –>
</span>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
<!– /閉じタグ –>

★リキッドになったPC用販売説明文。

<!– *戻しタグ –>
<table width="100%" cellspacing="20" cellpadding="0" border="0"><tr><td align="center">
<table width="800" cellspacing="0" cellpadding="0" border="0"><tr><td>
<table width="100%" cellspacing="0" cellpadding="0" border="0"><tr valign="top"><td width="100%" align="center">
<table cellspacing="0" cellpadding="0" border="0"><tr><td>
<table cellspacing="0" cellpadding="0" border="0"><tr><td>
<span class="sale_desc">
<!– /*戻しタグ –>
[/html]