カテゴリーページでの3段組 or 2段組レイアウトについて

Question

お世話になっております。

3段組 or 2段組 レイアウトへ変更したいと考えています。

下記のcssを参考にしておりますが、変更するとサムネイル画像の解像度が荒くなってしまい非常に見栄えが悪くなってしまいます。

2.ウィンドウショッピング形式（3段組 or 2段組 レイアウト）に変更(ｃｓｓ参考url)
https://www.cyber-records.co.jp/blog/rakuten/rakuten-attract-customers/rms_sp_technique_02/


－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

下記参考サイト(２サイト)さんのように、きれいに画像表示する事はかのうでしょうか？
https://item.rakuten.co.jp/e-zakkamania/c/0000000128/?force-site=ipn
https://item.rakuten.co.jp/luxze/c/0000000104/?force-site=ipn

よろしくお願い致します。

Accepted Answer

ECマスターズの田辺です。

先程は、カテゴリページで表示されている元々の画質のレベルに戻して
表示をする方法をご案内させていただきました。

参考サイトでは
さらに画像の解像度を上げるために複雑な記述をされておりますので
そちらをご案内させていただきます。

１：
恐れ入りますが、今回の場合は
#sCSLContainer .inLeft img から削除していただいた
width: 100%;
を加えていただきますようお願いいたします。

２：
下記の内容を外部JavaScriptファイル（末尾を.js）として保存し、
GOLDにアップロードしてください。

＝この下から＝＝＝＝＝＝＝
jQuery(function($){
  $('img').each(function(){
    $(this).attr('src', $(this).attr('src').replace('fitin=90:90','fitin=250:250') );
  });
});
＝この上まで＝＝＝＝＝＝＝

３：
カテゴリページ共通パーツ設定に

を記載して、外部JavaScriptファイルの読み込みをお願いいたします。

Answer

ECマスターズの田辺です。

＞変更するとサムネイル画像の解像度が荒くなってしまい非常に見栄えが悪くなってしまいます。

CSS参考urlに書かれている記述ですと
カテゴリページの画像を無理に拡大させていることで
解像度が荒くなってしまいますので、

記述内29行目
#sCSLContainer .inLeft img
に書かれている

30行目
width: 100%;
を削除していただきますようお願いいたします。

Answer

ご返信ありがとうございます。


＞記述内29行目
＞#sCSLContainer .inLeft img
＞に書かれている

＞30行目
＞width: 100%;
＞を削除していただきますようお願いいたします。

記載頂いたとおり、変更しましたが、どうも画像の解像度はあらいままになっているようです。
サイズを変更したりもしてみましたが、やはり解像度は低いままでした。


#sCSLContainer  {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 0 15px;
}
#sCSLContainer > a {
	display: inline-block;
	box-sizing: border-box;
	width: calc(100% / 3);
	vertical-align: top;
	padding: 0 2px 3px;
}
#sCSLContainer > a > div {
	box-sizing: border-box;
	display: inline-block !important;
	width: 100%;
	height: auto !important;
	background: none #ffffff;
	border: solid 1px #d2d2d2;
	padding: 6px 4px;
	margin: 0;
	overflow: hidden;
}
/* 商品画像部分 */
#sCSLContainer .inLeft {
	width: 100%;
	margin-bottom: 5px;
}
#sCSLContainer .inLeft img {
	border: none;
}
/* 商品名・価格部分 */
#sCSLContainer .inRight {
	padding: 0;
}
#sCSLContainer .inRight .txtheight {
	height: 55px;
	min-height:auto;
	margin-bottom: 5px;
	padding: 0;
}
#sCSLContainer .inRight .ctgItemNormal{
	background: none;
	position: relative;
	height: 100%;
	padding: 0;
	font-size: 12px;
	line-height: 18px;
	word-wrap: break-word;
	overflow: hidden;
}
#sCSLContainer .inRight .ctgItemNormal:before,
#sCSLContainer .inRight .ctgItemNormal:after {
	position: absolute;
	background-color: #ffffff;
}
#sCSLContainer .inRight .ctgItemNormal:before {
	content: "...";
	bottom: 0;
	right: 3px;
}
#sCSLContainer .inRight .ctgItemNormal:after {
	content: "";
	width: 100%;
	height: 100%;
}
#sCSLContainer .inRight .txtprice {
	height: 46px;
	padding: 0;
	color: #bf0000;
	text-align: left;
	font-size: 1rem;
}
#sCSLContainer .inRight .txtprice span:nth-child(2){
	font-size: 9px;
}
#sCSLContainer .inRight .txtprice span:last-child {
	display: block !important;
	color: #333333;
}
#sCSLContainer .txtprice .shippingCost_free {
	width: 50px !important;
	margin-left: 0;
	padding: 2px 0px 2px 3px !important;
	font-size: 10px;
	line-height: normal !important;
	letter-spacing: 1px;
	text-align: center;
}

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

参考サイトの
https://item.rakuten.co.jp/e-zakkamania/c/0000000128/?force-site=ipn
のような画像表示の方法はどのようにすれば可能でしょうか？
よろしくお願い致します。

Answer

ご返信ありがとうございます。

試してみたところ、無事変更することができました。
ありがとうございます。

カテゴリーページでの3段組 or 2段組 レイアウトについて

カテゴリーページでの3段組 or 2段組レイアウトについて