今更な記事。

楽天はWebを触り始めて間もない頃によくコーディングしていたが、そのときより、気になっていることがあった。

 

RMSのあるある。

それは、ローカル上でいくら綺麗にデザイン通りコーディングしても、ヘッダー・サイドバー・フッターの横ヅラがあわず垂直にならないということ。

 

楽天の店舗ページはテーブルレイアウトで、スペーサーを取っているのでまぁ当然っちゃ当然。

 

恐らく出店している殆どの店舗では

 

 

のような状態になっているはずだ。

だったら、GOLD使用すればいいじゃんって話だが

 

最近、楽天出店の店舗を久しぶりにコーディングしたが、相も変わらずこの横に出ている部分がとてつもなく気に食わない。

 

とりあえず、どうしても横ヅラを合わせておきたかったため、楽天の大枠にCSSを設定した。

 

作成したCSSを記載しておきます。

/********************************/
/* 楽天レイアウトリセット       */
/********************************/
	
/* 商品ページは楽天の帯の設定が違うので楽天のCSSを優先 */
html body{
	margin-left:10px;
	margin-right:10px;
	margin-top:15px !important;
	margin-bottom:15px 0 !important;
}
/* 楽天ページ内容大枠 */
html body div table,
html body div table tr td{
	border-collapse:collapse;
	border-spacing:0;
}
html body div table tr td table tr td{
	width:auto;
	height:auto;
	line-height:1.4em;
}
html body div table tr td table tr td img{
	width:auto;
	height:auto;
}
/* ショッピングカートの隣接密着回避 */
html body div#pagebody table tr td table tr td table tr td table tr td table tr td{
	line-height:1.6em;
	padding-right:10px;
}
/* カテゴリページの隣接密着回避 */
html body div table .sdtoptext{
	width:760px;
}
html body div table span.subcategory_list{
	margin-right:0.5em;
	display:block;
	text-align:right;
}
	
/* 共通テンプレートのサイドナビ大枠にクラスを以下クラスを設定 */
.sidebar{
	margin-left:18px;
}

 

このCSSを使用した上で、共通テンプレート内のヘッダー・サイドバー・フッターの大枠にしっかりと幅を指定してあげればOK。