WEB制作
2015/03/04 Wednesday
楽天RMSで横幅100%をiframe等を使わずに表現する方法
はいはいどーもー
はいどーもー
毎度おなじみのキンノタマゴです。
今回もいつもどおり書くことが無いのでこんな記事を書いてみるYO!
今回は楽天についてです
楽天に出店されている方なら分かると思いますが、楽天は昔ながらのテーブルレイアウトです。
ソースを見てみると分かるんですが、テーブルのテーブルのその中にまたテーブルのテーブルの・・・
てな具合にテーブルだらけで、なかなか思うとおりにデザインできないことが多々あるのです。
もう昔からこのつくりで楽天側が直す気配はありません。
もはや店舗数が増えすぎてるし直さないのではなく、もう直せないのではないかと思っています。
だから楽天に出店している方はこれからもこのシステムとは上手に付き合っていくしかないみたいです。
もしくは楽天のサーバーにアップロードしてiframeを使ってRMSに呼び出す方法が主流ですが、これSEO的にかなりよくないです。
デザインを重視してiframeを多様した結果、検索結果から引っかからない、楽天内の検索にも引っかかりにくいなんてこともありました。
iframeを使用すればRMSのみでは表現できないような表現も出来ます、jqueryもガシガシ使えます、おしゃれなサイトが出来ます。
ですが、その結果検索にも引っかからないサイトになったら本末転倒では無いでしょうか?
そもそもですよ、売れてる楽天のショップって全部が全部良いデザインでしょうか?
デザインがカスみたいなつくりでも売れているのが現実ですよ、ユーザーが見ているのはそこじゃないんで。
かといってショップのデザインをよくしたい気持ちは分かるんですよ。
その場合はiframeを必要最小限にとどめてデザインをしたほうがいいです。
ヘッダー、フッター、サイドバーが全てiframeとかは論外です。
おしゃれなショップも時々見かけますが、それらも楽天のシステム上の制約をかいくぐって表現しています。
今回はiframe等を使わずに横幅100%のデザインを表現したいときに使える裏技です。
これがフルパワー100%中の横幅100%だ
横幅100%ってこれですね。
http://www.rakuten.co.jp/ajia-shop/
スライダーのところです。
普通はテーブルに囲まれているセルの中なのでそこに無理やりこれを突っ込むとデザインが崩れます。
そこで下記のコードを入れます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
</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"> |
これで横幅100%の部分を表現できます。
ヘッダーじゃなくてフッターでも同じ方法でいけます。
便利ですね。
たまには真面目な記事でした。