みなさん、こんにちわ！なまけうめ（@namakeume）です。
この記事では、
- 楽天PC版カテゴリ一覧のリンクボタンをカスタマイズしたい
- カテゴリーページの点を消したい
- 自分のショップに合うようにリンクの色や大きさを変えたい
という人向けに簡単に、お話しさせて頂ければと思います。
楽天ショップでは商品をカテゴリー分けして
ユーザーが商品を探しやすいように細分化します。
より細分化されたカテゴリーはとても見やすく探しやすいサイトだと思います。
カテゴリーページの中にカテゴリーがある場合
楽天ショップの初期状態はこのようになっています。
ここも実はカスタマイズが可能です。
項目を表す「・」を消したり、リンクの文字をおしゃれにしたり…
今回はカテゴリー一覧のカスタマイズ方法をご紹介します！
テンプレデザイン５選
下記に記載のcssを楽天RMSの共通ヘッダーに直接コピペするか、
cssデータをGOLDにアップロードしてヘッダーに記載してください。
※cssデータにしてGOLDへアップロードする場合は
「<style>、</style>」は入力しない様にしてくださいね♪
それでは早速、デザインをご紹介します♪
点を非表示
１番シンプルで尚且つ初期状態に見えない仕様。
あまり派手に変えたくないけど整えて見えるようにしたいという方にオススメ♪
リストの点を非表示にし、マウスが重なった時にだけ
下線が出るように設定しています。
cssはこちら
<style>
a:link { /*リンクの状態*/
color: #666666; /*文字色*/
text-decoration: none; /*下線なし*/
}
a:hover { /*ホバー*/
color: #CCCCCC; /*文字色*/
text-decoration:underline; /*下線あり*/
}
table table table table td[width="1%"] span.subcategory_list{ /*点部分*/
display:none; /*非表示*/
}
</style>ボタン風
背景に色を付けて角を丸く、ボタン風に。
カテゴリー一覧をボタンのように見せたいという方にオススメ！
スッキリしていてカテゴリーもより見やすいです。
ホバーにすることでボタンらしく、押したくなるような仕様にしました。
cssはこちら
<style>
table table table table td[width="1%"] span.subcategory_list{ /*点非表示*/
display:none; /*非表示*/
}
table table table table td[width="33%"] a.subcategory_list{ /*カテゴリ部分*/
color: #FFFFFF!important; /*文字色*/
font-size: 15px!important; /*文字サイズ*/
text-decoration:none; /*下線なし*/
padding: 8px 15px; /*余白調整*/
border-radius:8px; /*角丸*/
width: 85%; /*横幅*/
display:block; /*ブロックの定義*/
transition: all 0.2s ease 0s; /*アニメーション速度*/
margin: 0 0px 20px; /*余白調整*/
position:relative; /*基準位置指定*/
background: #A5A5A5; /*背景色*/
}
table table table table td[width="33%"] a.subcategory_list:hover{ /*カテゴリ部分ホバー*/
background:#B73141; /*背景色*/
color:#FFFFFF!important; /*文字色*/
}
</style>付箋風
先ほどのボタン風と似ているのですが、よりおしゃれで付箋のようなデザインに。
項目の左側の枠線を太くする事によって付箋デザインになり、
よりリスト感も出てカテゴリの整列もきれいに見せます。
cssはこちら
<style>
table table table table td[width="1%"] span.subcategory_list{ /*点非表示*/
display:none; /*非表示*/
}
table table table table td[width="33%"] a.subcategory_list { /*カテゴリ部分*/
display:block; /*ブロックの定義*/
width:250px; /*横幅*/
height:100%; /*高さ*/
border: solid #bfbfbf; /*枠色*/
border-width: 1px 1px 1px 11px; /*枠線のサイズ*/
padding: 6px 0px 5px 10px; /*余白調整*/
text-decoration: none; /*下線なし*/
}
table table table table td[width="33%"] a.subcategory_list:hover { /*カテゴリ部分ホバー*/
border: solid #C5A637; /*枠色*/
border-width: 1px 1px 1px 11px; /*枠線のサイズ*/
color: #C5A637; /*文字色*/
}
</style>点を画像に差し替え
通常の点の所を好きな画像に差し替え。
画像であれば店舗によって好きなものを入れることが出来ます。
点を非表示にしてカテゴリー部分を右にずらして
背景に画像を見せている形になります。
cssはこちら
<style>
table table table table td[width="1%"] span.subcategory_list{ /*点部分*/
display:none; /*非表示*/
}
table table table table td[width="33%"] a.subcategory_list { /*カテゴリ部分*/
display:block; /*ブロックの定義*/
padding: 6px 0px 6px 20px; /*余白調整*/
text-decoration: none; /*下線なし*/
background-image: url(●リストの画像.gif); /*背景画像設定*/
background-repeat: no-repeat; /*背景リピートなし*/
background-position: 3px 9px; /*背景位置調整*/
}
table table table table td[width="33%"] a.subcategory_list:hover { /*カテゴリ部分ホバー*/
text-decoration: underline; /*下線あり*/
}
</style>カテゴリー自体を非表示
こちらはもうカテゴリ一覧自体を非表示にしてしまう方法です。
活用方法としては、iframe(インラインフレーム)で
カテゴリーを表示したい時などに役に立つ方法です。
楽天のカテゴリーページでは表現できない
派手なリストを作りたい時、カテゴリ一覧が邪魔になる時に
まるごと非表示にするとショップとしての完成度は上がると思います！
cssはこちら
<style>
a.subcategory_list:link { /*カテゴリ部分*/
display: none !important; /*非表示*/
}
table table table table td[width="1%"] span.subcategory_list { /*点部分*/
display: none !important; /*非表示*/
}
</style>まとめ
今回カテゴリ一覧の表現方法を調べるためにいろいろな店舗さんをお邪魔しました。
たくさんの店舗さんが自分達らしいショップにする為に
たくさんの工夫と努力をしているのを感じました。
また、色々な表現方法があって楽天ショップの表現の広さを感じました。
私が考えられる表現は上記の５選ですが
他にもこんなのが欲しいなどあればお気軽にコメントください(^^)
コメント