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

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

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

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

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

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

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

見やすくしてみた！

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

ことを意識しました。

デザインを変えすぎると楽天常連ユーザに視認され辛くなるというリスクがあるため、私のオススメはデザイン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>

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

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

追加CSSテンプレートはこちら(ogaRiaフルバージョンご契約店舗様限定)

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

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

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

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

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

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

貼り付け場所

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

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

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