【楽天RMS裏技】楽天カテゴリページの画像サイズを大きくする裏技

カテゴリページの画像を大きくする裏技の使い方

下のhtmlをカテゴリ説明文上/下、またはヘッダー・レフトナビ・フッターの編集画面に記述するだけでカテゴリページの画像は大きくなります。

楽天市場のカテゴリページに一覧表示される商品画像が小さい！サイズを大きくしてもっと商品を目立たせたい！という方向けの裏技を解説します。

カテゴリページでJavaScriptを利用したい方も参考にどうぞ。

<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サイズの画像になります。