みなさん、こんにちわ!なまけうめです。
この記事では、
- PC版カテゴリページの商品一覧画像を大きくしたい
- ややこしい事せず、簡単にコピペしたい
という人向けに簡単に、お話しさせて頂ければと思います。
パソコン版ショップ内の商品カテゴリーの商品画像は、縦横128pxで3列ずつで固定です。
楽天RMS上で変更できるところはありません。
楽天の検索結果の一覧はとても大きくて見やすくなったのに、
ショップ内のカテゴリーページは商品画像が極小のままでとっても見えづらいです。
今回ご紹介するやり方は、楽天のヘッダーにコピペすれば全カテゴリーページに反映されます!
コードとかよくわかんないし、難しい事はできない、でも
画像を大きくして見栄え良くしたい!商品を目立たせたい!と思っている方にお勧めです!
「カスタマイズわかんないよ」って方でもとりあえずこのコピペはやっておいた方がいいと思います!
それでは、パソコン版カテゴリページの商品一覧画像を大きくする方法をご紹介しま~す!
完成のイメージ
まずはBefore→After!
こちらの商品画像は「縦横250px」に変更した場合です。
うん!やっぱり大きくて見やすいですね♪
この変更をするには、楽天ヘッダーにコピペすればすぐに実装されます。
ヘッダーにコピペでOK!
まず、コピペするコードはコチラです ↓
コピペするコードはこちら
<body onpageshow="
jQuery(document).ready(function ($) {
$('.categoryWindowImg').each(function () {
var src = jQuery(this).html();
jQuery(this).html(src.replace(/fitin=128:128/g, 'fitin=250:250'));
});
});
"></body>
<style>
#risFil .categoryWindowImg {
width: 250px !important;
height: 250px !important;
}
</style>
5行目と13行と14行目に変更したい画像サイズの大きさを入れてください。
↑のコードだと「250」の所です!
「私は画像を210pxにしたい」という方は↑のコードの「250」の数字を「210」に修正してください。
コピペする場所はこちら
次にコピペする場所をご紹介しま~す!
RMSの共通のヘッダーのスペース欄に入れてください。
楽天RMS > 店舗設定 > 3.デザイン設定
> 2.PCデザイン設定 > ヘッダー・フッター・レフトナビ
既にcssやタグが入っていたら重複や入れる順番を間違うと
うまく表示されなくなってしまうので一番上にそのまま入れてもらえば問題ないです。
まとめ
今やネットショッピングは半数以上の方がスマホから購入している現状です。
なので、PC表示をあまり凝らなくてもいいでしょ?と思いがちですが、
それでもショップのジャンルや年齢層によっては
まだまだパソコンで購入される方もたくさんいらっしゃいます。
年齢層だとやっぱり年代が40~60代あたりは、パソコンの方が多かったりします。
(ショップによりますので確定ではないです。笑)
なので、パソコン版はより大きく見やすくした方がいいですね!(スマホもね)
また今回の方法はヘッダーに入れるだけで全部のカテゴリーに反映されるので簡単です!
是非お試しください(^^)/
コメント
コピペして使えますって謳ってるサイト様の中で一番分かりやすいです。ありがとうございます。他のも試したいです。
ありがとうございます!めちゃくちゃ嬉しいです(T-T)♪
更新はゆっくりですが他にもお伝えできるように頑張ります(^^)