簡単ディテールアップ！CSSで楽天カテゴリページをデザインする方法。

楽天のカテゴリーページは、登録した子カテゴリーを自動で表示させてくれますよね。
でもこの自動表示のリスト…ちょっとデザイン性に乏しいのが難点。
楽天デフォルトのカテゴリーリスト
そんなリストを少しのCSSでちょっときれいに見せる方法をご紹介します。

1. シンプルな背景画像表示と、疑似クラス:hover

まずはサンプルをご覧ください！

簡単なCSSを適用するだけで対応できます。
ではではボタン風に見せるために背景画像に使用する画像を用意します。
背景画像

ご用意できましたら以下のようなCSSを適用しましょう。

/* 高さ幅などを各店舗ごとに任意に指定してください */
.subcategory_list {
display:none !important;
}

a.subcategory_list {
display: block !important;
text-decoration: none;
background-image: url(http://www.rakuten.ne.jp/gold/***/btn_subcat_bg.gif); /* 店舗ごとに任意 */
background-repeat: no-repeat;
height: 50px; /* 店舗ごとに任意 */
width: 235px; /* 店舗ごとに任意 */
margin-top: 0px; /* 店舗ごとに任意 */
padding-top: 5px; /* 店舗ごとに任意 */
line-height:40px; /* 店舗ごとに任意 */
text-align: center; /* 店舗ごとに任意 */
}

/* マウスオーバー時のあしらいを設定 */
a.subcategory_list:hover {
filter:alpha(opacity=50); /* マウスオーバーで50%の透明になるように指定しています */
-moz-opacity: 0.5;
opacity: 0.5;
}

するとこうなります。
ね、簡単でしょ。

2. transrationを使用したアニメーション

続きましてこちらもサンプルをご覧ください！
こちらも表記は複雑ですが、比較的簡単なCSSで実現できます！

ではでは以下のCSSを適用してみてください。

/* 高さ幅などを各店舗ごとに任意に指定してください */
.subcategory_list {
display:none !important;
}

a.subcategory_list {
background-color: #fff; /* 店舗ごとに任意 */
margin-bottom: 2px; /* 店舗ごとに任意 */
border-radius: 10px; /* 店舗ごとに任意 */
border: 5px solid #ccc; /* 店舗ごとに任意 */
display: block !important;
text-decoration: none;
height: 50px; /* 店舗ごとに任意 */
width: 235px; /* 店舗ごとに任意 */
margin-top: 0px; /* 店舗ごとに任意 */
padding-top: 5px; /* 店舗ごとに任意 */
line-height: 40px; /* 店舗ごとに任意 */
text-align: center; /* 店舗ごとに任意 */

/* アニメーションさせたいプロパティを指定しています */
-webkit-transition: border-radius 0.5s ease-out, background-color 0.5s ease-out, font-size 0.5s ease-out, font-weight 0.5s ease-out;
-moz-transition: border-radius 0.5s ease-out, background-color 0.5s ease-out, font-size 0.5s ease-out, font-weight 0.5s ease-out;
-ms-transition: border-radius 0.5s ease-out, background-color 0.5s ease-out, font-size 0.5s ease-out, font-weight 0.5s ease-out;
transition: border-radius 0.5s ease-out, background-color 0.5s ease-out, font-size 0.5s ease-out, font-weight 0.5s ease-out;
}

/* マウスオーバー時のあしらいを設定 */
a.subcategory_list:hover {
background-color: #efefef;
border-radius: 30px;
font-size:100%;
font-weight:bold;
}

するとこうなります。

カテゴリーを簡単ブラッシュアップ

最後に

いかがでしたでしょうか。
楽天ではデフォルトでは見栄えやユーザビリティに乏しいデザインがまだまだ目立ちます。
ソース内をじっくり観察して、振られているクラスやIDを基点により良いデザインを施すことで
他店舗との差別化がよりできるのではないでしょうか。
拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれれば幸いです。

楽天商品ページでフォトギャラリーを実装！jQueryを使ったデザインの方法。

ショップ運営でお悩みの方へ。

ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。

ショップ運営のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

CONTACT
48時間以内に返信します

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）

06-6271-7761

ABOUT ME

ぜぇれさん外部デザイナーTwitter:@zeelesan: 兵庫在住WEBデザイナー。楽天／ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。グランブルーファンタジーが大好き。 →記事一覧