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

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

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

Sponsored Link

こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです
ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです
いやいや暑くなってまいりました、いよいよ夏本番!今週末くらいに庭先でBBQしようと思います。
僕の住んでるところはそこそこ田舎で周辺住民のことを気にしないでいいのでとても良いです。

さてさて今回はカテゴリーページ。味気ない自動生成のリストを綺麗に見せましょう!
以下2パターンのデザインサンプルをもとにご説明してゆきます。

※一言
これから説明する内容は各カテゴリーページに直接記入する方法でも実装できますが、
全ページに共通して適用させる場合は楽天GOLD(無料)と契約している必要があります。

それではやってみましょう!

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

簡単ディテールアップ!CSSで楽天カテゴリページをデザインする方法。
まずはサンプルをご覧ください!

簡単な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で実現できます!

ではでは以下の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を使ったデザインの方法。

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

BILLIONPLAN JAPAN Co, Ltd

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

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

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

または、お電話でも承ります。
 10:00 - 19:00(土日祝休み)

06-6271-7761

ABOUT ME

ぜぇれさんデザイナーTwitter:@zeelesan
加古川在住WEBデザイナー。楽天/ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事した後、ビリオンプラン立ち上げに参加。時計・雑貨のFLOAT運営担当。ご相談はこちらより。グランブルーファンタジーやりましょ!! →記事一覧
Sponsored Link

新着記事を配信しています

FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね!」や「フォロー」をお願いします。

follow us in feedly

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です