【楽天スマホ】カテゴリページの「下位カテゴリ」を初期全表示させる方法

楽天
Yahoo!

【楽天スマホ対策】「カテゴリを絞りこむ」欄を効果的にする２つのカスタマイズテンプレート

2016/04/15

お気に入りに追加する

バッタに似てる人っていませんか？オガリア中村です。

今日はスマホ版楽天ショップのカテゴリページにある、「カテゴリを絞りこむ」デザインを「お買い物しやすく」カスタマイズしていきます！もちろんHTMLのコピペでOK！

画面が小さく、一度に見せられる情報量が限られるスマホで、いかにスペースを有効活用してお客様を”心地よく”回遊させるか考えてみました。

初期のスマホ版カテゴリページは・・・

こんな感じ。下位カテゴリ一覧はタップしないと見れません。またタップして開いた場合下位カテゴリの一覧が大きく、カテゴリ全体を認識し辛く感じます。
アパレル系商材や家電商材など、カテゴリ階層が深くなり易いショップでは回遊し辛くなるのではと思います。

デモ

2デザインを用意しました。以下を意識しています。

下位カテゴリを初期状態から表示させる
ただし邪魔にならない様に、サイズを小さくする

「デザイン1」は、楽天市場の商品ページに表示されるカテゴリタグと同じデザインにしました。下位カテゴリの量が「少ない」ショップ様におすすめ。

「デザイン2」は、アパレル系のネットショップでよく見かけるデザインを真似てみました。下位カテゴリの量が「多い」ショップ様におすすめ。

　
次の手順ですすめましょうー！

CSSをコピーする

まずは、使用したいデザインに応じてCSSをコピーしましょー！

下位カテゴリ一覧をタグっぽく表示するCSS

@charset "utf-8";

/* 下位カテゴリを表示状態にする */
.sCLToggleCont {
    display: block;
}
/* 下位カテゴリをタグっぽく表示 */
.sCLToggleCont .ilistnon {
    padding: 16px 8px;
}
.sCLToggleCont .ilistnon li {
    display: inline-block;
    background: #f6f6f6;
    border: 1px solid #ccc;
    padding: 0;
    margin: 4px 2px;
    border-radius: 3px;
    box-sizing: border-box;
}
.sCLToggleCont .ilistnon li a {
    display: block;
    font-size: 12px;
    color: #333;
    word-break: break-all;
    padding: 6px;
    margin: 0;
    background: none;
}

下位カテゴリ一覧を2列で表示するCSS

こちらはogaRiaサービス「フルバージョン」プランご利用店舗様限定公開となります。(フルバージョンの無料体験はこちらから)
　

※先ほどの「下位カテゴリ一覧をタグっぽく表示する」CSSとは併用できません。

CSSファイルを作成する

コピーしたCSSで「.css」ファイルを作成し、楽天GOLDサーバにアップロードしましょー！

CSSをメモ帳に貼り付けます。
「style.css」という名前で”名前をつけて保存”します。(※違うファイル名でもOK)
楽天GOLDに接続し、「style.css」をアップロードします。
楽天GOLDへ接続した事がない場合は、RMSカスタマーサポートへ聞けば教えてもらえます～。
style.cssのアップロード先はどこでも構いません。ちなみに私は、楽天GOLD内にスマホ専用のフォルダ(「sp」とか名前をつける)を作ってその中にアップロードしてました。
style.cssのURLを確認します。
https://www.rakuten.ne.jp/gold/(楽天アカウント)/(フォルダ名)/style.css
(※フォルダを作っていない場合は、/(店舗アカウント)/style.css になります。)