• 文字サイズ


解決済

楽天PCカテゴリページにレフトナビの横出来た空白スペースについて

  • 相談者:非公開
  • 2025/06/12 11:06
いつもお世話になっております。
楽天ショップのカテゴリページの横にPCモニターサイズによってお大きいな白スペースが出てしまってます。
https://item.rakuten.co.jp/SHOP-URL/ITEM-URL/ITEM-URL/
コード関係は全くの素人で、改善方法をご教授ください。

ヘッダーコンテンツ中のcssは下記のようなものが入ってます。
上部:
<!--ヘッダー用タグはここから--><style>
/* スタイルはここに追加 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #FFFFFF;
color: #fff;
padding: 10px 20px;
text-align: center;
}
.logo {
margin-top: 10px;
width: 100%; /* ロゴをブラウザの幅に合わせる */
}
.logo img {
max-width: 100%; /* ロゴ画像の幅を100%に設定 */
height: auto; /* 高さを自動に設定 */
}
nav {
background-color: #d5923b; /* ナビゲーションの背景色を赤に設定 */
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
max-width: 100%; /* ナビゲーションの幅をブラウザの幅に合わせる */
overflow: auto; /* ナビゲーションが横に並ぶ場合にスクロールバーを表示 */
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
nav ul li a:hover {
text-decoration: underline;
}
table {
width: 100%; /* テーブルをブラウザの幅に合わせる */
}
table td {
background-color: #fff; /* テーブルセルの背景色を白に設定 */
}

/* メディアクエリ */
@media screen and (max-width: 768px) {
.logo img {
width: 100%; /* ロゴの幅を100%に設定し、ブラウザ幅に合わせる */
}
nav ul {
display: none; /* デバイス幅が768px以下の場合、ナビゲーションを非表示にする */
}
nav ul li {
display: block; /* デバイス幅が768px以下の場合、リスト項目をブロック要素に変更する */
margin-bottom: 10px; /* デバイス幅が768px以下の場合、リスト項目のマージンを追加する */
}
}
</style>

下部:
<style type="text/css">
<!--
/* パンくずリスト
----------------------*/
td.breadcrumbs_list{
padding:16px 10px;
background:#eee;
display:block;
width:710px;
border-bottom:2px solid #aaa;
}
/* カテゴリリスト
----------------------*/
table table table table td[width="1%"] span.subcategory_list{
display:none;
}
table table table table td[width="33%"] a.subcategory_list{
color: #333333!important;
font-size:12px!important;
text-decoration:none;
border:1px solid #ccc;
padding:8px 0;
border-radius:8px;
width:90%;
display:block;
transition: all 0.2s ease 0s;
margin:0 0 10px;
text-align:center;
position:relative;
background:#FFF;
}
table table table table td[width="33%"] a.subcategory_list:after{
content:">";
font-size:12px;
margin:-6px 0 0;
display:block;
position:absolute;
right:5px;
top:50%;
}
table table table table td[width="33%"] a.subcategory_list:hover{
background:#555;
color:#FFF!important;
border-color:#555;
}
-->
</style>

<style type="text/css">
<!--
#risFil td{
font-family:ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS Pゴシック,sans-serif;
}
#risFil td br{
display:none;
}
#risFil td img{
margin:30px 0 15px;
}
#risFil td img[width="14"]{
display:none;
}
#risFil .category_itemnamelink{
height:30px;
color:#444;
font-size:10px;
letter-spacing:1px;
overflow:hidden;
display:block;
margin:0 0 10px;
width:230px;
line-height:15px;
}
#risFil .category_itemprice{
font-weight:bold;
color:#BF0000;
font-size:22px;
letter-spacing: -2px;
font-style: oblique;
}
#risFil .category_itemtaxpostage{
font-size:9px;
letter-spacing: -1px;
color:#444;
}
#risFil .category_itemtaxpostage + .category_itemtaxpostage{
display:none;
}
#risFil .not{
font-size:10px;
font-weight:normal;
display:block;
background:#FF6600;
color:#FFF;
padding:2px 0;
text-align:center;
width:100px;
margin:0 auto;
border-radius:3px;
}
#risFil .risfClfx{
font-size:10px;
}
#risFil .risfClfx img{
margin:0;
}
-->
</style>


レフトナビゲーションのcssは下記のようなものが入ってます。
<style type="text/css">
<!--
/* パンくずリスト
----------------------*/
td.breadcrumbs_list{
padding:16px 10px;
background:#eee;
display:block;
width:710px;
border-bottom:2px solid #aaa;
}
/* カテゴリリスト
----------------------*/
table table table table td[width="1%"] span.subcategory_list{
display:none;
}
table table table table td[width="33%"] a.subcategory_list{
color: #333333!important;
font-size:12px!important;
text-decoration:none;
border:1px solid #ccc;
padding:8px 0;
border-radius:8px;
width:90%;
display:block;
transition: all 0.2s ease 0s;
margin:0 0 10px;
text-align:center;
position:relative;
background:#FFF;
}
table table table table td[width="33%"] a.subcategory_list:after{
content:">";
font-size:12px;
margin:-6px 0 0;
display:block;
position:absolute;
right:5px;
top:50%;
}
table table table table td[width="33%"] a.subcategory_list:hover{
background:#555;
color:#FFF!important;
border-color:#555;
}
-->
</style>

<style type="text/css">
<!--
#risFil td{
font-family:ヒラギノ角ゴ Pro W3,Hiragino Kaku Gothic Pro,メイリオ,Meiryo,MS Pゴシック,sans-serif;
}
#risFil td br{
display:none;
}
#risFil td img{
margin:30px 0 15px;
}
#risFil td img[width="14"]{
display:none;
}
#risFil .category_itemnamelink{
height:30px;
color:#444;
font-size:10px;
letter-spacing:1px;
overflow:hidden;
display:block;
margin:0 0 10px;
width:230px;
line-height:15px;
}
#risFil .category_itemprice{
font-weight:bold;
color:#BF0000;
font-size:22px;
letter-spacing: -2px;
font-style: oblique;
}
#risFil .category_itemtaxpostage{
font-size:9px;
letter-spacing: -1px;
color:#444;
}
#risFil .category_itemtaxpostage + .category_itemtaxpostage{
display:none;
}
#risFil .not{
font-size:10px;
font-weight:normal;
display:block;
background:#FF6600;
color:#FFF;
padding:2px 0;
text-align:center;
width:100px;
margin:0 auto;
border-radius:3px;
}
#risFil .risfClfx{
font-size:10px;
}
#risFil .risfClfx img{
margin:0;
}
-->
</style>

<style type="text/css">
/* 検索窓 */
.search {
width: 200px;
margin: 17px 0 0;
padding: 0;
text-align:center;
}

.search input {
margin-top: 5px;
padding: 5px;
}

/* バナー */
.banner {
margin: 20px auto;
}

.banner a {
text-decoration: none;
transition: all 0.4s;
}

.banner a:hover {
opacity: 0.7;
transition: all 0.4s;
}

/* カテゴリ */

.category {
width: 200px;
}

.category h4 {
margin: 30px 0 5px;
padding: 0;
font-size: 14px;
color: #999900;
text-align: center;
}

.category ul {
list-style-type: none;
margin: 0 0 30px 0;
padding: 0;
}

.category li {
background-color: #d5923b;
border-radius: 10px;
margin-bottom: 5px;
font-size: 14px;
line-height: 24px;
text-align: center;
font-weight: bold;
color: #FFF;
}

.category a {
display: block;
border-radius: 10px;
color: #FFF;
text-decoration: none;
padding: 5px 10px;
}

.category a:hover {
background-color: #FF3300;
}

</style>


お手数をおかけしますが、よろしくお願いいたします。

投稿内容について報告する



  • 返信者:非公開
  • 2025/06/12 15:27
ECマスターズの田村です。

> 楽天ショップのカテゴリページの横にPCモニターサイズによってお大きいな白スペースが出てしまってます。
> https:/………(省略)………
  • 返信者:非公開(質問者)
  • 2025/06/12 16:48
田村 様
 早速のご回答をありがとうございます。
 ご教授の通り対象コードを削除したら、解消できました。
 ありがとうございました。………(省略)………
  • 返信者:非公開
  • 2025/06/13 18:50
ECマスターズの田村です。

解決のためのサポートができ
何よりでございます。

引き続き、よろしくお願いします。………(省略)………
このフォーラムへの質問は終了しました