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

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

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

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

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

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

<style>
  #risFil .categoryWindowImg {
    width: 230px !important;
    height: 230px !important;
  }
</style>

<body onpageshow="
jQuery(document).ready(function ($) {
  $('table').each(function () {
    var src = jQuery(this).html();
    jQuery(this).html(src.replace(/fitin=128:128/g, 'fitin=230:230'));
  });
});
"></body>
スポンサーリンク

htmlは2つの手順で構成されています。

  1. 画像のサイズを大きくする
  2. 画像がぼやけないようにする

次項からは各手順を詳しく解説していきます。

1.画像のサイズを大きくする

商品画像のサイズを大きくすることは簡単です。外部CSSもしくはstyleタグに下のCSSを記述するだけです。

#risFil .categoryWindowImg {
  width: 230px !important;
  height: 230px !important;
}

しかし、これだけでは充分ではありません。

実際は縦横128pxの画像を230pxに引き伸ばして大きく見せているだけですので、画像はぼやけてしまいます。

この問題は次の手順で解決します。

2.画像がぼやけないようにする

画像がぼやけないようにJavaScriptを使用します。

<body onpageshow="
jQuery(document).ready(function ($) {
  $('table').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属性を使います。

スポンサーリンク

まとめ:カテゴリページの画像を大きくしよう

カテゴリページの画像が小さいと何の商品かお客様にすぐ伝わらずページから離脱するかもしれません。

カテゴリページの画像を大きくすることでお客様にとってわかりやすく、商品が選びやすくなる効果が見込めます。

カテゴリページの画像を大きくし、お客様に親切なショップを目指しましょう。

本記事の方法は楽天非公式のテクニックです。使用の際は自己責任でお願いします。
なお、楽天の仕様変更により突然使えなくなる可能性があります。ご注意ください。

コメント

タイトルとURLをコピーしました