PCページのレフトナビが表示されない

Question

お世話になっております。

PC版商品ページ、カテゴリページにてレフトナビが表示されない状況が続いております。

以前、トップページと商品ページの制作を外注し、設定をしていただいた後から、PC版の商品ページおよびカテゴリページでレフトナビが表示されなくなりました。

原因と、レフトナビを再表示するための具体的な対処方法をご教示いただけますでしょうか。
現状のページデザインが崩れないように復旧したいと考えております。

お手数をおかけしますが、どうぞよろしくお願いいたします。

Answer

ECマスターズの松本です。

楽天GOLDにアップされている以下のCSS
/common/css/frame.css

上記cssでdisplay:none;(非表示)が記載されているようです。
以下が該当箇所ですので、
こちらを削除するなり、
コメントアウトするなりで、表示されるかと存じます。

/*商品ページのレフトナビとスペースを非表示*/
#pagebody > table > tbody > tr:first-child > td:first-child > table:nth-child(2) > tbody > tr:first-child > td:first-child > table:first-child > tbody > tr:nth-last-child(2) > td:first-child{
	display: none;
}
#pagebody > table > tbody > tr:first-child > td:first-child > table:nth-child(2) > tbody > tr:first-child > td:first-child > table:first-child > tbody > tr:nth-last-child(2) > td[width="20"]{
	display: none;
}

/*カテゴリページのレフトナビとスペースを非表示*/
#pagebody > table > tbody > tr:first-child > td:first-child > table:nth-child(2) > tbody > tr:nth-child(2) > td:first-child {
	display: none;
}
#pagebody > table > tbody > tr:first-child > td:first-child > table:nth-child(2) > tbody > tr:nth-child(2) > td[width="20"]{
	display: none;
}

 td[width="20"]とついている方は、レフトナビと商品ページコンテンツの隙間です。

恐らくレフトナビを隠して、
商品ページをLPのようなレイアウトにしたかったのかもしれないですね。

Answer

早々のご対応ありがとうございます！

追加でレフトナビ表示についてご相談があります。

現在、カテゴリページ・商品ページともにレフトナビ自体は表示されるようになったのですが、商品ページのみレフトナビの幅が非常に狭く表示されてしまう状態です。

どのファイル・どの記述が商品ページのレフトナビ幅に影響しているのか判断できず困っております。

商品ページのレフトナビ幅を調整するには、どのCSSファイルのどの箇所を修正すればよいか
ご教示いただけませんでしょうか。

よろしくお願いいたします。

Answer

ECマスターズの松本です。

これはレフトナビの中身のコンテンツに幅の指定がないのが原因ですね。
楽天の商品ページは、商品説明文等が乗っている領域が横幅100%で押してくるので、
レフトナビは明示的に横幅を決めてあげる必要があります。

方法としては
ヘッダーフッターレフトナビの
「レフトナビゲーション」を以下のように変更します。

↓一番上に追加


(ここに現行のコンテンツ)


↑一番下に追加

これでレフトナビの横幅が200pxになるので
変に縮んだり、伸びたりという事がなくなるはずです

Answer

早々のご返信ありがとうございます！
無事に解決いたしました！ありがとうございました！