楽天市場のカテゴリページに一覧表示される商品画像が小さい！サイズを大きくしてもっと商品を目立たせたい！という方向けの裏技を解説します。
カテゴリページで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つの手順で構成されています。
- 画像のサイズを大きくする
- 画像がぼやけないようにする
次項からは各手順を詳しく解説していきます。
１．画像のサイズを大きくする
商品画像のサイズを大きくすることは簡単です。外部CSSもしくはstyleタグに下のCSSを記述するだけです。
#risFil .categoryWindowImg {
width: 230px !important;
height: 230px !important;
}
しかし、これだけでは充分ではありません。
実際は縦横128pxの画像を230pxに引き伸ばして大きく見せているだけですので、画像はぼやけてしまいます。
この問題は次の手順で解決します。
２．画像がぼやけないようにする
画像がぼやけないように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属性を使います。
まとめ：カテゴリページの画像を大きくしよう
カテゴリページの画像が小さいと何の商品かお客様にすぐ伝わらずページから離脱するかもしれません。
カテゴリページの画像を大きくすることでお客様にとってわかりやすく、商品が選びやすくなる効果が見込めます。
カテゴリページの画像を大きくし、お客様に親切なショップを目指しましょう。
デザイナーさんの時間短縮のためのイラレweb素材
季節イベントのワンポイント素材やサービスロゴ、ウェブページのアクセントに使えそうなイラストレーター/ベクター/パスデータのeps素材を無料配布しているダウンロードサイトです。 各ページの【ダウンロードリンク】よりご使用下さい。