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

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

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

カテゴリーから探す