【カテゴリーページの商品画像のサイズを大きくして、余分な文字を少なくする方法】

Question

楽天市場のカテゴリーページの写真は小さくて文字は多いので何とか見やすくしたいのですが、
可能でしょうか。

https://item.rakuten.co.jp/zip/c/0000002078/

上記のお店のようにカテゴリーの商品画像のサイズを大きくして、
余分な文字を少なくする方法を教えていただけますでしょうか。

よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

> 楽天市場のカテゴリーページの写真は小さくて文字は多いので何とか見やすくしたいのですが、
可能でしょうか。

下記フォーラムにて、同様のご質問を
頂いておりますので、ご参照くださいませ。
https://forum.ec-masters.net/post_view.php?id=6801


> 上記のお店のようにカテゴリーの商品画像のサイズを大きくして、
> 余分な文字を少なくする方法を教えていただけますでしょうか。

RMS上での設定はできませんが、
スタイルシートを活用してそのような表示にすることは可能です。

カテゴリページに設定されている（もしくは自動設定の）
ヘッダー・フッター・レフトナビにて、
下記タグの追記をお試し願います。

= この下の行から ====================

/* カテゴリページ商品名を３行以下に */
.category_itemnamelink {
display: block;
height: 4.5em;
overflow: hidden;
}

= この上の行まで ====================

Answer

教えていただいたタグは多店舗様のものですが、category.js
のオリジナルのソースを教えていただけますでしょうか。

オリジナルのソースが回答欄には記載されておりませんでした。

試しに多店舗様のオリジナルの
上記「category.js」の１〜９行目および１８行目を
外部JavaScriptファイルとして記載して
自ショップのGOLDに設置して読み込ませることで、
画像サイズを上げることができますが、

Answer

ECマスターズの田中です。

案内が不足しており、失礼いたしました。
6801のフォーラム回答時から楽天の仕様が変わっており、
JavaScriptに加え、スタイルシートの修正も必要となります。

最初に、変更後のサイズを予めお決めいただく必要がございます。
今回は、一覧表示全体の横幅に影響しないサイズとして、
236pxを設定したとします。
ご希望に応じて、以降出現する「236」の値(計3箇所)を変更してご活用ください。

ヘッダー・フッター・レフトナビ、共通説明文（大）など、
カテゴリページ共通で読み込まれる部分に
下記タグをご記載ください。既存のスタイルシートに追記していただいても結構です。


body #risFil .categoryWindowImg {
	width: 236px;
	height: 236px;
}


次に、読み込み中の外部JSファイルの内容を
下記内容にご変更いただきますようお願いいたします。

jQuery(function($){
var s = '236';
$('#risFil img[src]').each(function(){ this.src = this.src.replace('?fitin=128:128','?fitin='+s+':'+s); });
});