【楽天】スマホカテゴリページをカスタマイズ

Javascriptで画像サイズを置き換える

デフォルトのカテゴリページでは商品画像は90pxで指定されています。これは画像URLの最後に記載されている「?fitin=90:90」で指定されています。つまり、画像サイズを大きくする場合は、この部分を置き換える必要があります。 その置き換えるための記述が以下のとおりです。

(function($){
  $('#sCSLContainer').each(function(){
    var txt = $(this).html();
    $(this).html(
      txt.replace(/90:90/g,'400:400')	
    );
  });
})(jQuery);

#sCSLContainerは商品一覧が表示されているエリアです。そのエリア内に記載されているhtmlコードから「90:90」と記載されている部分を「400:400」に置き換えています。

当社の場合、商品画像は400×400で制作しているため、400:400と指定しています。ここの数値はRMSに登録している商品画像のサイズに合わせることをオススメします。

この処理を行うことで、画像の元サイズが「400×400」となり、カスタマイズで画像サイズを大きくしても荒れることなく利用ができます。

cssでレイアウトをカスタマイズする

カテゴリページをカスタマイズするために、新たにCSSを用意します。今回は画像サイズをデフォルトよりも大きくし、より見やすいカテゴリページにすることを目指します。

画像サイズを大きく表示する

画像サイズを大きく表示させるためには、以下のコードをCSSに記述します。

/* 画像配置設定の修正 */
.sCSLBox01 .inLeft img,
.sCSLBox02 .inLeft img{
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

/* 画像サイズの修正 */
#sCSLContainer .inLeft{
  width: auto !important;
  height: auto !important;
}
div#sCSLContainer .sCSLBox01 div.inLeft img,
div#sCSLContainer .sCSLBox02 div.inLeft img {
  width: 130px;
  height: 130px;
  max-height: none !important;
  max-width: none !important;
}

上記の設定を行うことで、画像サイズを90pxから130px配置へ変更することができます。デフォルトよりも大きくなりますが、前述のJavascriptで配置画像のサイズを変更しておけば、荒れることなく表示できます。

商品名のフォントサイズを大きくする

デフォルトよりも商品名のフォントサイズを大きく表示させるためには、以下のコードを記述します。

/* 商品名のフォントサイズ修正 */
.ctgItemNormal{
  font-size: 14px;
  line-height: 1.3;
}

フォントサイズを14pxに指定し、行間をデフォルトよりも広くとるようにしています。

価格位置の調整

価格位置を右下に配置するために、以下のコードを記述します。

/* 価格位置の調整 */
#sCSLContainer .txtprice {
  position: absolute:
  right: 25px;
  bottom: 10px;
}

価格位置を右下に配置することで、各リンクのデザインを調整しています。

用意したJavascriptとcssを読み込ませる

用意したJavascriptとcssを任意の場所にアップロードします。当社では、お客様に楽天GOLDに契約していただき、そこにアップロードして利用しています。楽天GOLDは無料で利用可能なので、是非ご利用ください。

楽天GOLDはRMSの基本情報設定ページ内「楽天GOLD　新規利用/容量変更申請」から利用申請が可能です。

アップロードが完了したら、RMSへログインします。
移動するページは「カテゴリページ設定（スマートフォン）」です。移動が完了したら、カテゴリページ共通説明文に以下のコードを記述し、登録します。

<link rel="stylesheet" href="(CSS配置パス)" ="">
<script src="(Javascript配置パス)" type="text/javascript" =""></script ="">

cssやjavascriptは通常の記述ではエラーとなり登録できません。閉じタグの最後に「 =""」を記述することでこのエラーを回避できます。

以上で作業が完了です。そのほか、カテゴリページのレイアウトはCSSでデザイン可能なので、GoogleChromeのデベロッパーツールを利用しながら、調整を行って下さい
ポイントはJavascriptで画像サイズを変更することです。

コラム カテゴリ

コラム一覧