夏真っ只中絶賛暑いですねー。お天道さんにはかなわんわー状態です。最近ロゴも一新されてますます勢いのある楽天ですが、今日はスマホで閲覧時の商品説明部分で縦レイアウトでテーブルさせるためのコードを紹介したいと思います。コピペでオッケーです。
楽天市場のスマホページカスタマイズしにくいよね
使えるが少ない
まず使えるがタグめちゃくちゃ少ないですよね。
- a
- img
- table
- tr
- td
- th
- br
- p
- font
- b
- center
- hr
たったこれだけです。僕はHTML5から勉強し始めたので外部CSSが使えないってだけで不便で息苦しさを感じてしまいます。
外部CSSが使えない
不自由さがすごいです。水辺が近くにない飛べない鳥って感じです。よくわかんないですね。とにかく不便です。tableを普通に組むとこんな感じになります。
| メーカー名 | メーカー |
|---|---|
| 型番 | xxxxxx |
コードはこちら
表示されない場合はこちら
幅の狭いスマホ画面では横に並ぶとどうしても見難くなってしまいます。正攻法の書き方ではないですが、スマホ閲覧でテーブルを縦に並べるコードをご紹介します。
縦テーブルレイアウト
１つづつtrタグで囲む
| メーカー名 |
|---|
| WAVLINK |
| 型番 |
| WL-WN688U3 |
コードはこちら
表示されない場合はこちら
解決方法としてはthタグだけをtrで囲む。tdタグだけをまたtrで囲むことです。そしてそれぞれwidth=”100%”にすることで、それぞれ横一杯の縦レイアウトのテーブルにすることができます。
複数行や区切り線を使いたい時
| オプション |
|---|
|
カラー サイズ オプション |
コードはこちら
表示されない場合はこちら
タイトルに対して中身を複数表示したい場合は、僕は上記のように書いています。borderを使えないので、tdタグの中にhrタグを入れて区切り線として表示させました。colorでそれぞれ変更できるので便利に使っています。
おわりに
楽天市場の商品画像登録ガイドラインが必須化になりましたね。
- 文字要素が20%以内
- 画像の枠線はダメ
- 画像背景は写真背景または単色白背景のみ
ペナルティ対象になるようなのできちんと対応しないといけませんね。10月1日から違反の加点対象になるようです。最近せっかく枠線とかつけたところなのに早速消さないといけなくなりました。楽天のamazon化がますます加速していきそうですね。
