楽天市場のカテゴリページに一覧表示される商品画像が小さい！サイズを大きくしてもっと商品を目立たせたい！という方向けの裏技を解説します。
カテゴリページでJavaScriptを利用したい方も参考にどうぞ。
カテゴリページの画像を大きくする裏技の使い方
下のhtmlをカテゴリ説明文上/下、またはヘッダー・レフトナビ・フッターの編集画面に記述するだけでカテゴリページの画像は大きくなります。
<style>
#risFil .categoryWindowImg {
width: 230px !important;
height: 230px !important;
}
</style>
<body onpageshow="
jQuery(document).ready(function ($) {
$('.categoryWindowImg').each(function () {
var src = jQuery(this).html();
jQuery(this).html(src.replace(/fitin=128:128/g, 'fitin=230:230'));
});
});
"></body>htmlは2つの手順で構成されています。
- 画像のサイズを大きくする
- 画像がぼやけないようにする
次項からは各手順を詳しく解説していきます。
１．画像のサイズを大きくする
商品画像のサイズを大きくすることは簡単です。外部CSSもしくはstyleタグに下のCSSを記述するだけです。
#risFil .categoryWindowImg {
width: 230px !important;
height: 230px !important;
}しかし、これだけでは充分ではありません。
実際は縦横128pxの画像を230pxに引き伸ばして大きく見せているだけですので、画像はぼやけてしまいます。
この問題は次の手順で解決します。
２．画像がぼやけないようにする
画像がぼやけないようにJavaScriptを使用します。
<body onpageshow="
jQuery(document).ready(function ($) {
$('.categoryWindowImg').each(function () {
var src = jQuery(this).html();
jQuery(this).html(src.replace(/fitin=128:128/g, 'fitin=230:230'));
});
});
"></body>具体的には画像URLの末尾についている『?fitin=128:128』（URLパラメータ）の数値をJavaScriptを用いて書き換えます。
URLパラメータの数値を置換することで画像のサイズが変わります。
?fitin=128:128を?fitin=230:230に置換すると縦横128pxの画像が230pxサイズの画像になります。
JavaScriptを使用するためにbodyタグのonpageshow属性を使います。
imgタグを使う方法
ここまでonpageshow属性でJavaScriptを使う裏技を解説しましたが、imgタグを使って外部JSファイルを読み込む方法もあります。
複数のJSファイルを読み込むこともできます。
追記：imgタグを使う方法は楽天の仕様変更により使用できなくなりました。JavaScriptを使うためには前述したonpageshow属性を使用します。
まとめ：カテゴリページの画像を大きくしよう
カテゴリページの画像が小さいと何の商品かお客様にすぐ伝わらずページから離脱するかもしれません。
カテゴリページの画像を大きくすることでお客様にとってわかりやすく、商品が選びやすくなる効果が見込めます。
カテゴリページの画像を大きくし、お客様に親切なショップを目指しましょう。
コメント
このページを参考にすることで、カテゴリページの画像を大きくすることが出来てとても感謝しております。
しかし、1点だけ気になることがあります。
それはこのコードを記載すると「このショップの人気商品ランキング」が何故か2列に表示されてしまいます。
私は、JavaScriptのことが分からないので修正できずそのままにしていますが、当初の目的であるカテゴリ画像は大きくなっているので満足です。
このような裏技を無料で公開してくださりありがとうございます。
ありがとうございます！人気商品ランキング件につきましては調査いたします。
いつも参考にさせて頂いております。
カテゴリーのサムネイル画像のサイズは大きくなったのですが、
「並び替え」や「在庫あり」「送料無料」の絞り込み機能が一切効かなくなりました。
これを解決する方法はあるのでしょうか?
何卒宜しくお願い致します。
bodyタグはどの場所に記載してますか？ヘッダーに記載している場合はカテゴリ説明文に記載して下さい。またはimgタグを使う方法を試してみてください。問題が解消されるかもしれません。
楽天RMSで外部JavaScriptを使う裏技【imgタグ使用】
こちら使わせていただいております。ありがとうございます。
一点ですが、売り切れの画像の時のみ、画像上にグレーのblankが出来てしまいます。
なるべく売り切れ商品は載せないようにするのがベストですが、全てにできずにいます。
これを解消する方法はありますでしょうか？（私は試行錯誤しています。）
#risFil .categoryWindowImg{}のwidthよりheightの値が小さい場合、商品画像の上にグレーの空白部分が表示されます。widthとheightを同じ値にすることでグレーの空白部分は表示されません。因みにグレーの空白部分の正体は売り切れ商品にある
.imageFilterというdivです。background-color: #000000;opacity: 0.1;が記載されているためグレーで表示されています。