いやいや暑くなってまいりました、いよいよ夏本番!今週末くらいに庭先でBBQしようと思います。僕の住んでるところはそこそこ田舎で周辺住民のことを気にしないでいいのでとても良いです。今回はカテゴリーページ。味気ない自動生成のリストを綺麗に見せましょう!以下2パターンのデザインサンプルをもとにご説明してゆきます。全ページに共通して適用させる場合は楽天GOLD(無料)と契約している必要があります。シンプルな背景画像表示と、疑似クラス:hoverまずはサンプルをご覧ください!簡単なCSSを適用するだけで対応できます。ボタン風に見せるために背景画像に使用する画像を用意します。背景画像ご用意できましたら以下のようなCSSを適用しましょう。0.5;}するとこうなります。transrationを使用したアニメーション続きましてこちらもサンプルをご覧ください!こちらも表記は複雑ですが、比較的簡単なCSSで実現できます!ではでは以下のCSSを適用してみてください。30px;font-size:100%;font-weight:bold;}するとこうなります。カテゴリーを簡単ブラッシュアップ最後にいかがでしたでしょうか。楽天ではデフォルトでは見栄えやユーザビリティに乏しいデザインがまだまだ目立ちます。ソース内をじっくり観察して、振られているクラスやIDを基点により良いデザインを施すことで他店舗との差別化がよりできるのではないでしょうか。拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれれば幸いです。楽天商品ページでフォトギャラリーを実装!jQueryを使ったデザインの方法。こちらの記事もどうぞショップ運営でお悩みの方へ。Ltdネット通販やウェブ制作、ECサポート事業を行っている(株)ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。ショップ運営のお悩み、ご相談ください。ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。お気軽にご相談くださいませ。CONTACT48時間以内に返信しますまたは、お電話でも承ります。MEぜぇれさん外部デザイナーTwitter:@zeelesan兵庫在住WEBデザイナー。楽天/ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。グランブルーファンタジーが大好き。Posts2016.04.18ECたったの1行!ヤフーでもお買物カゴを外部化!複数のカゴボタンを設置する方法。2016.04.13EC楽天お買物カゴを外部化!複数のカゴボタンを設置する方法。2016.02.04EC独自カートで差別化!Yahoo!ストアのカート周りをCSSでデザインする方法。2016.01.14ECデフォルト表示をデザイン!Yahoo!ストアのヘッダーをCSSでスッキリさせる方法。Tweet[5/5]お買い物カゴを綺麗に!楽天カート周りのCSSデザイン【SNS投稿ボタン編】じわじわ増えてる!Google認定ショップとは?気になるメリット・デメリット。楽天お買物カゴを外部化!複数のカゴボタンを設置する方法。コピペでOK!楽天ヘッダーのテンプレートを作ってみました。シンプルに、簡単に実装できます。ECサイトを華やかに!楽天で使えるjQueryプラグイン5選。デザイン目線でSOY振り返り。2015年楽天ショップトレンドまとめ。空腹時は見ちゃダメ!楽天の参考デザインまとめ、食品ジャンルの素敵サイト13選。新着記事を配信していますFacebookやGoogle+で新着記事を配信しています。よろしければ「いいね!」や「フォロー」をお願いします。楽天RMSのカスタマイズで使えるclass名の一覧。EC注目のキッズファッション!楽天の参考デザインまとめ、子供服サイト10選。ECたったの1行!ヤフーでもお買物カゴを外部化!複数のカゴボタンを設置する方法。ECレディース最強説!楽天の参考デザインまとめ、女性ファッションの素敵サイト16選。EC楽天お買物カゴを外部化!複数のカゴボタンを設置する方法。EC海外販売の良事例!楽天グローバルマーケット参考ページ14選。EC独自カートで差別化!Yahoo!ストアのカート周りをCSSでデザインする方法。ECデザイン目線でSOY振り返り。2015年楽天ショップトレンドまとめ。ECデフォルト表示をデザイン!Yahoo!ストアのヘッダーをCSSでスッキリさせる方法。Link人気の記事ランキングこの漢字はひらく?サイトの表記ゆれを防ぐ、知っておきたい文章マナー。いま復習しておきたい、301リダイレクトの設定あれこれ。クレジット・リンク不要/商用可/アプリOK!アイコンフリー素材まとめ【2015年4月版】コピペでOK!楽天ヘッダーのテンプレートを作ってみました。シンプルに、簡単に実装できます。個性的な404デザインまとめ!日本国内・海外のエラーページ48選。意外と忘れがち!よく使うGoogleの検索コマンド・オプション一覧。制作コスト削減!楽天で使える無料テンプレートやイラスト・写真素材12選。ロゴだけでも変更しとこ!WordPressのログイン画面を簡単カスタマイズ。[1/2]楽天トップページを簡単デザイン!コンテンツ部分のテンプレートを作ってみました。楽天RMSのカスタマイズで使えるclass名の一覧。WordPressプラグイン利用で、オリジナルシェアボタンを簡単設置。注目のキッズファッション!楽天の参考デザインまとめ、子供服サイト10選。ロゴだけでも変更しとこ!WordPressのログイン画面を簡単カスタマイズ。読まれてる?簡単無料で使えるヒートマップツール5個まとめ。簡単導入でコンバージョン増加!自社メディア向け無料プラグイン・サービス4個。この漢字はひらく?サイトの表記ゆれを防ぐ、知っておきたい文章マナー。記事をSNSに投稿するTweetbillionplan.comに関するツイートCONTACTネット通販とウェブ制作の会社。Ltdネット通販とウェブ制作の会社。MAPContactショップ制作の無料お見積り、そのほかウェブ制作などご相談ください。LtdPAGETOP。