• 楽天
  • Yahoo!

【楽天】30秒で回遊性UP!商品ページの「パンくず」をコピペで見やすくするCSSテンプレート

0527_main

あーー、ついにミョウガの美味しさに気づいてしまった…。大人の階段のぼったオガリア中村です。ぽん酢との!!相性ったら!!!

先日、弊社佐藤が「カテゴリページのパンくずを見やすくする」記事を書いてましたが、結構人気だったのが羨ましいので同じようなネタを書いてみます。

私は「商品ページ」のパンくずをいじってみますよォォ!

商品ページの「パンくず」初期デザイン

0527_main_2

うわぁぁぁあああーーー!!目が…目がァァァ

『ここにリンクあるよぉぉぉ』って全力で叫んでる感はあるんですが、文字文字しくて目がチカチカ…。うちの母だったら老眼鏡かけても無理だ…。視認性は高いけど、可読性は低い状態ですね。

見やすくしてみた!

0527_main_3
  • カテゴリごとに適度な余白を空けて、可読性を高める
  • パンくずが複数並んだ際の情報区分をハッキリつける
  • 一般的に見慣れてる「パンくずっぽい」デザインにする

ことを意識しました。

デザインを変えすぎると楽天常連ユーザに視認され辛くなるというリスクがあるため、私のオススメはデザイン1/デザイン2あたりです。

CSSテンプレート

お好みのデザイン用CSSを、まるっとコピーしてお使いください~!コピーしたCSSの貼り付け先は、全商品ページに共通表示されるパーツ(ヘッダー/レフトナビ/フッター/全ページ共通説明文)であればどこでも構いません。

デザイン1

<!-- 商品ページ『パンくず』カスタマイズ(デザイン1) -->
<style type="text/css">
<!--
td.sdtext a {
    color: #666; /*テキストの色*/
    text-decoration: none;
    font-size: 80%; /*テキストのサイズ*/
    display: inline-block;
    margin: 0 8px;
}
td.sdtext:before {
    content:"・";
    margin-right: 8px;
}
-->
</style>

デザイン2

<!-- 商品ページ『パンくず』カスタマイズ(デザイン2) -->
<style type="text/css">
<!--
td.sdtext {
    font-family: メイリオ;
    font-size: 11px; /*テキストのサイズ*/
    background: #f4f4f4; /*全体の背景色*/
    padding: 4px;
    border-radius: 2px;
    border: 1px solid #eee; /*枠線*/
}
td.sdtext a {
    text-decoration: none;
    color: #444; /*テキストの色*/
    display: inline-block;
    margin: 0 16px;
}
-->
</style>

デザイン3

<!-- 商品ページ『パンくず』カスタマイズ(デザイン3) -->
<style type="text/css">
<!--
td.sdtext {
    color: #fff;
    background: #f4f4f4; /*全体の背景色*/
    border: 1px solid #ddd; /*枠線*/
    border-radius: 1px;
}
td.sdtext a {
    font-size: 11px; /*テキストのサイズ*/
    color: #666; /*テキストの色*/
    font-weight: bold;
    padding: 12px;
    text-decoration: none;
    display: inline-block;
    position: relative;
}
td.sdtext a:not(:last-child):before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 12px solid #ccc;
    position: absolute;
    top: 0;
    margin-top: 0;
    margin-left: 1px;
    left: 100%;
    z-index: 1;
}
td.sdtext a:not(:last-child):after {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 12px solid #f4f4f4;
    position: absolute;
    top: 0;
    margin-top: 0;
    left: 100%;
    z-index: 2;
}

-->
</style>

更にもうちょっと回遊性上げてみる

見やすくデザインを整理するだけじゃなく、もうひと押し工夫できる事が無いかアレコレ考えて実現してみました。取り捨て選択できるようにパーツ化しています。

マウスオーバー時に下線をつける

67175a83c67fad8058239e5ecd72bbb0

リンク部にマウスオーバーした際に下線をつける事で、リンクである事を視覚的に分かりやすくします。

最後のカテゴリを太字にする

09976ffd75ed37bb86ed800675a2750c

最後のカテゴリ(=閲覧中商品が入ってるカテゴリ)を太字にする事で、お客様が興味あるカテゴリが目に入りやすくしました。

最後のカテゴリに「もっと見る」をつける

63dc96bbe1eedffc3def3fb67673fe18

動詞をリンク文言に入れることでクリックの効果を高めるのと、クリックできるという事を示唆しています。

貼り付け場所

次の中からコピーしたCSSは、先ほど選んだデザインCSS内のここに貼り付けてください。

}
(ここに貼り付け!)
-->
</style>

 
 
うまく行かない場合はお気軽にコメントくださいませー!

この記事を書いた人

中村 茉実

中村 茉実ディレクター

元楽天ショップ店長やってました。歩くときに他人との距離感が掴めないところがあり、よくオジサンのかかとを踏んでしまいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。