楽天市場 スマホテクニック 簡単コピペだけでOK!カテゴリページ(商品一覧ページ)を改善!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

今回は簡単にコピペで出来る!
楽天 スマートフォンのページ(カテゴリページ)をより使いやすく回遊性が
良くなるよう改善してみたいと思います。

 

 

1.下位カテゴリを強制表示&表示カテゴリをコンパクト化

楽天スマホテクニック 商品一覧(カテゴリページ)

カテゴリを絞り込むボタンが見逃しやすくあまり機能していない

従来の下位カテゴリ表示の問題点

楽天スマホテクニック 商品一覧(カテゴリページ)

  • 下位カテゴリは、「カテゴリページを絞り込む」ボタンをタップしないと、表示されない
  • 「カテゴリページを絞り込む」のボタンは見逃しやすい位置にある(商品一覧の情報に目がいきやすい)
  • 表示させた下位カテゴリも、表示領域が大きくページの全体を覆ってしまい、カテゴリ全体を確認しずらい

下位カテゴリを強制表示&コンパクトに2列表示

  • 「カテゴリページを絞り込む」をタップせず、下位カテゴリ強制表示
  • 「カテゴリページを絞り込む」の部分をボタンではなく、タイトルバーに見える様にデザイン変更
  • 表示させた下位カテゴリはコンパクトに2列表示

楽天スマホテクニック 商品一覧(カテゴリページ)
※カテゴリ名が長い場合は、末尾に…で省略される仕様になっています。

変更方法

[css] ※楽天GOLDにCSSファイルを作成後、以下を追加


/* カテゴリを絞り込む 強制表示 */
.sCLToggleCont {
	display: block !important;
}
/* カテゴリを絞り込む デザイン変更 */
.sCLToggleTr{
	display: block;
	background: #666666; /* 背景色変更 */
	border-top: none;
	border-bottom: none;
	color: #ffffff; /* 文字色変更 */
	font-weight: normal;
}
/* 表示カテゴリを2列表示 */
.sCLToggleCont .ilistnon {
	padding: 10px 4px 5px 4px;
}
.sCLToggleCont .ilistnon li {
	box-sizing: border-box;
	width: 50%;
	float: left;
	border-bottom: none;
	padding: 0 3px 6px;
}
.sCLToggleCont .ilistnon li a {
	display: block;
	width: 100%;
	background : none;
	box-sizing: border-box;
	border: solid 1px #bebebe;
	border-radius: 5px;
	margin: 0;
	padding: 10px 5px;
	color: #333333;
	font-size: 12px;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.sCLToggleCont .ilistnon ul:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

 

[html] ※RMSの商品ページ共通説明文などにGOLD領域の作成したCSSを読みこませる


<link ="" rel="stylesheet" href="http://www.rakuten.ne.jp/gold/ショップID/任意のファイル場所.css">

 

2.ウィンドウショッピング形式(3段組 or 2段組 レイアウト)に変更

楽天スマホテクニック 商品一覧(カテゴリページ)

その効果は?

楽目線の動きを減らして、ユーザーのスムーズな閲覧を助けています!

変更方法

[css] ※楽天GOLDにCSSファイルを作成後、以下を追加


#sCSLContainer  {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 3px 15px 4px;
}
#sCSLContainer > a {
	box-sizing: border-box;
	display: inline-table;
	width: 33.333333%; /* 2段組の場合は50% */
	width : calc(100% / 3) ; /* 2段組の場合は削除 */
	overflow: hidden;
	padding: 0 2px 1px;
}
#sCSLContainer > a > div {
	box-sizing: border-box;
	display: inline-block !important;
	width: 100%;
	height: auto !important;
	background: none #ffffff;
	border: solid 1px #d2d2d2;
	padding: 6px 4px;
	margin: 0;
	overflow: hidden;
}
/* 商品画像部分 */
#sCSLContainer .inLeft {
	width: 100%;
	margin-bottom: 10px;
}
#sCSLContainer .inLeft img {
	box-sizing: border-box;
	width: 100%;
	border: solid 1px #ececec;
}
/* 商品名・価格部分 */
#sCSLContainer inRight .txtheight {
	height: 45px;
	min-height:auto;
	margin-bottom: 5px;
	padding: 0;
}
#sCSLContainer .inRight .ctgItemNormal{
	background: none;
	position: relative;
	height: 100%;
	padding: 0;
	font-size: 13px;
	line-height: 15px;
	letter-spacing: -0.5px;
	word-wrap: break-word;
	overflow: hidden;
}
#sCSLContainer .inRight .ctgItemNormal:before,
#sCSLContainer .inRight .ctgItemNormal:after {
	position: absolute;
	background-color: #ffffff;
}
#sCSLContainer .inRight .ctgItemNormal:before {
	content: "...";
	bottom: 0;
	right: 0;
}
#sCSLContainer .inRight .ctgItemNormal:after {
	content: "";
	width: 100%;
	height: 100%;
}
#sCSLContainer .inRight .txtprice {
	padding: 0;
	color: #bf0000;
	text-align: left;
}
#sCSLContainer .inRight .txtprice span:last-child {
	display: block;
	color: #333333;
}

※商品名が長い場合は、末尾に…で省略される仕様になっています。

※2段組にしたい場合は、上記ソースのコメントを入れている箇所の値を50%へと変更してみてください。

 

[html] ※RMSの商品ページ共通説明文などにGOLD領域の作成したCSSを読みこませる


<link ="" rel="stylesheet" href="http://www.rakuten.ne.jp/gold/ショップID/任意のファイル場所.css">

 

まとめ

いかがでしたでしょうか?

今回紹介したものは、カテゴリや商品数が多いショップさんには
特に相性がいいと思います。ぜひお試しください!

みなさまのお役に立てばいいなと思います!

【楽天スマホまとめ】
[第1回]フローティングバナー設置編
[第2回]カテゴリページ(商品一覧ページ)をカスタマイズ編 ←今ここ
[第3回]css裏ワザテクニック(看板画像・共通バナー)編
[第4回] 疑似要素「:before」「:after」を使ったcss裏技テクニック

 
 

▼サイト無料診断もしていますので気になる方はぜひコチラから▼

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。