カテゴリページの表示の変更方法を知りたい

Question

お世話になっております。

弊社セールのカテゴリページですが、
商品のキャッチコピーと商品タイトルが混ざって表示されておりとても分かりにくいページになっています。
（商品タイトルは５０％OFFセールという文言から始まる箇所です）


また、並び替えのバーと一番上にある商品画像が重なっており、とても見にくいです。

https://item.rakuten.co.jp/0001ppp/c/0000000503/

おそらくすべてのカテゴリページで同じ表示になっていると思うのですが、
どの箇所で訂正するのかわからないのでお手数おかけしますがどうぞよろしくお願いします。

Answer

ECマスターズの土屋です。

頂いたご質問に関しまして
ご回答までしばらくお待ち下さいませ。

Answer

ECマスターズの土屋です。

ご連絡がおそくなり申し訳ございません。

>弊社セールのカテゴリページですが、
>商品のキャッチコピーと商品タイトルが混ざって表示されておりとても分かりにくいページになっています。
>（商品タイトルは５０％OFFセールという文言から始まる箇所です）

こちらに関しまして、楽天の仕様上、キャッチコピーと
商品名がどうしても混在してしまう仕様となっております。

もし、参考にされているカテゴリページ等ございましたら
URLと一緒にご教示頂けますでしょうか。

>おそらくすべてのカテゴリページで同じ表示になっていると思うのですが、
>どの箇所で訂正するのかわからないのでお手数おかけしますがどうぞよろしくお願いします。

絞り込みを設定するレイアウトの対策方法としましては、
原因をお調べいたしました所、
楽天GOLDから読みこまれいている「layout.css」の
下記の処理によって、一部見えにくくなってしまっている
状況となっております。
*{
    box-sizing: border-box;
}

/0001ppp/css/layout.css
に存在するCSSファイルをお確かめのうえ、
上記の内容を修正して頂き、
一度動作のご確認の程お願いします。

お手数をおかけしますが
どうぞよろしくお願いします。

Answer

お世話になっております。
ご連絡ありがとうございます。
商品名とキャッチコピーはどうしても表示されるのですね。



以下が/0001ppp/css/layout.cssの中身です。


@charset "utf-8";
*{
    box-sizing: border-box;
}
.keyword {
    width: 100%;
    border: 1px solid #bfbfbf;
    border-collapse:collapse;
    padding: 0;
    margin: 0 0 24px 0;
}
.keyword th{
    background: #8ea2ab;
    color: #ffffff;
    width: 64px;
    height: 64px;
}
.keyword td{
    padding: 0 24px;
}
.keyword td span.red{
    color: red;
}
.keyword td span.under{
    text-decoration: underline;
}
.read{
    background: #8ea2ab;
    line-height: 64px;
    margin: 0;
}
.read p{
    font-size: 1.4rem;
    color: #ffffff;
    text-align: center;
    line-height: 64px;
    padding: 0 24px;
    margin: 0;
}
.ttl{
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: 1.8rem;
    font-weight: normal;
    color: #666666;
    margin: 40px auto;
    text-align: center;
    position: relative;

}
.ttl::after{
    content:"";
    display:block;
    width:50px;
    height:2px;
    background-color:#8ea2ab;
    position:absolute;
    bottom:-10px;
    left:calc(50% - 25px);
}
.item{
    width: 100%;
    border-collapse:separate;
    border-spacing: 20px;
    padding: 0;
    margin: 0 0 24px 0;
}
.item p{
    text-align: center;
    padding: 0;
    margin: 0;
}
.item a{
    color: #666666;
    text-decoration: none;
}
.color{
    position: relative;
    width: 90%;
    margin: 30px auto 60px;
    background: #e7999c;
}
.color:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -30px;
    border: 30px solid transparent;
    border-top: 30px solid #e7999c;
}
.color p{
    color: #ffffff;
    font-size: 1.4rem;
    text-align: center;
    line-height: 60px;
}
.spec{
    width: 90%;
    border: 2px solid #bfbfbf;
    border-collapse:collapse;
    padding: 0;
    margin: 0 auto 24px;
}
.spec th,
.spec td{
    color: #666666;
    font-size: 1.2rem;
    font-weight: normal;
    border: 2px solid #bfbfbf;
    padding: 12px 24px;

}
.spec th{
    font-size: 1.4rem;
    background: #d0e6eb;
    width: 164px;
    text-align: center;
}
.caption{
    font-size: 1.4rem;
    font-weight: normal;
    color: #666666;
    margin: 40px auto;
    text-align: center;
}
.item_block{
    width: 100%;
    border: 1px solid #bfbfbf;
    border-collapse:separate;
    border-spacing: 30px;
    padding: 0;
    margin: 0 auto 24px;
}
.item_block th{
    width: 30%;
    padding:0;

}
.item_block td{
    width: 20%;
    padding: 0;
}
.item_block td ul.color_list{
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}
.item_block td ul.color_list li{
    width: 33px;
    height: 33px;
    background-color: #333;
    margin-right: 10px;
}
.item_block td ul.color_list li:last-child{
    margin-right: 0;
}
.item_block td ul.color_list li.silver{
    background-color: #bfbfbf;
}
.item_block td ul.color_list li.gold{
    background-color: #dbc388;
}
.item_block td ul.color_list li.pinkgold{
    background-color: #dcb0a6;
}
.item_block td ul.icon{
    list-style: none;
    padding: 0;
}
.item_block td ul.icon li{
    font-size: 1rem;
    text-align: center;
    color: #ffffff;
    background: #666666;
    border-radius: 1.5rem;
    padding: 8px 16px;
    margin-bottom: 10px;
}
.item_block td ul.icon li:last-child{
    margin-bottom: 0;
}
.item p.item_btn{
    font-size: 1rem;
    text-align: center;
    color: #ffffff;
    background: #666666;
    border-radius: 1.5rem;
    padding: 8px 16px;
    margin: 10px 20px;
}

これを修正するということでしょうか？

Answer

ECマスターズの土屋です。

>商品名とキャッチコピーはどうしても表示されるのですね。

ご認識の通りでございます。

>以下が/0001ppp/css/layout.cssの中身です。

ソースコードのご共有誠にありがとうございます。

ご共有頂いた、
*{
　  box-sizing: border-box;
}
の部分を消去していただく事で
絞り込みを設定するレイアウトの見栄えの解消をする事ができます。

注意点としまして、
*{
　  box-sizing: border-box;
}

こちらの処理は、layout.cssを読み込んでいる
すべての要素に適応されている処理なりますので、
変更後、layout.cssを読み込んでいるページに
影響が無いか、ご確認の程お願いします。

Answer

お世話になっております。
ご連絡ありがとうございます。

対応したところ、きれいになりました！

とても難しい内容でしたが教えていただきとても助かります。

ありがとうございました！

Answer

ECマスターズの土屋です。

>とても難しい内容でしたが教えていただきとても助かります。

>ありがとうございました！

嬉しいご報告
誠にありがとうございます。

引き続きどうぞよろしくお願いします。