【デザイン６選】楽天パンくずリストをカスタマイズする方法【コピペで簡単】

みなさん、こんにちわ！なまけうめ（@namakeume）です。

この記事では、

という人向けに簡単に、お話しさせて頂ければと思います。

パソコン版のカテゴリーや商品ページに付いている「パンくずリスト」
こんなやつ　↓

ここを少しカスタマイズするだけでサイト全体のデザインが変わります！

また、見やすくする事によりユーザーの回遊率もあがり売り上げUPにも繋がります！

なので、しっかりと表示設定にして見やすくすることをお勧めします！

テンプレデザイン６選

それでは早速、デザインをご紹介します♪

下記に記載のcssを楽天RMSのヘッダーに直接コピペするか、cssデータをGOLDにアップロードしてヘッダーに記載してください。

※cssデータにしてGOLDへアップロードする場合は「<style>、</style>」は入力しない様にしてくださいね♪

余白を付けてシンプルに

とてもシンプルでサイトデザインを邪魔しません。
文字間を開けるだけでとても見やすくなります。

cssはこちら

<style>
td .sdtext {
    height: 30px; /*列の高さ*/
} 
 .sdtext a:link,.sdtext a:visited {
    color:#444444;　/*文字色*/
    font-size:14px; /*文字のサイズ*/
    text-decoration: none; /*下線非表示*/
    padding: 5px; /*余白調整*/
}
</style>

マウスを乗せた時に色を変える

先程のシンプルなデザインにマウスを乗せた時（マウスオーバーの時）だけ文字の色を変えます。

またマウスオーバー時に太字になるのでリンク感がよりはっきりして回遊しやすいテキストリンクとなります。

cssはこちら

<style>
 td .sdtext {
    height: 30px; /*列の高さ*/
}
 .sdtext a:link,.sdtext a:visited {
    color:#444444; /*文字色*/
    text-decoration: none; /*下線非表示*/
    font-size:14px; /*文字のサイズ*/
    padding: 5px; /*余白調整*/
}
/*マウスオーバー*/
 .sdtext a:hover {
    color:#D70003; /*文字色*/
    font-weight: bold; /*太字*/
}
</style>

背景に色をつけてライン風に

パンくずリストに背景を付けることによってページ内でカテゴリが複数あっても分かりやすいです。

マウスオーバー時にアンダーラインが入るのでよりリンク感を演出できます。

こちらもシンプルでオススメ！

cssはこちら

<style>
 td .sdtext {
     height: 35px; /*列の高さ*/
     background: #E9E9E9; /*背景色*/
     padding: 0 5px; /*余白調整*/
}
 .sdtext a:link,.sdtext a:visited {
     color:#444444; /*文字色*/
     text-decoration: none; /*下線非表示*/
     font-size:13px; /*文字のサイズ*/
     padding: 5px ; /*余白調整*/
}
/*マウスオーバー*/
 .sdtext a:hover {
     text-decoration: underline; /*下線表示*/
}
</style>

カテゴリをボタン風に

カテゴリ名をそれぞれボタン風にする事によって、よりリンク感を演出できリンクが押されやすいです。

マウスオーバー時にも背景の色が変わるようになっています。

シンプルに白とグレーの組み合わせですが、お好みの色で組み合わせてもいいと思います。

cssはこちら

<style>
 td .sdtext {
	height: 35px; /*列の高さ*/
}
 .sdtext a:link,.sdtext a:visited {
	color:#444444; /*文字色*/
	text-decoration: none; /*下線非表示*/
	font-size:13px; /*文字のサイズ*/
	padding: 5px 8px; /*余白調整*/
	border-radius: 3px; /*角丸*/
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border:1px #dddddd solid; /*枠線*/
	background-color:#fff; /*背景色*/
}
/*マウスオーバー*/
 .sdtext a:hover {
	font-size:13px; /*文字のサイズ*/
	padding: 5px 8px; /*余白調整*/
	border-radius: 3px; /*角丸*/
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border:1px #dddddd solid; /*枠線*/
	background-color:#f5f5f5; /*背景色*/
	color:#444444; /*文字色*/
}
</style>

最後のカテゴリ名を太字に

閲覧中の商品が入ってるカテゴリを太字にする事で、お客様が探しているカテゴリが目に入りやすくなります。

またお客様が現在いるカテゴリも分かりやすくなり回遊率が上がります。

cssはこちら

<style>

 td .sdtext {
    height: 30px; /*列の高さ*/
}
 .sdtext a:link,.sdtext a:visited {
    color:#444444; /*文字色*/
    text-decoration: none; /*下線非表示*/
    font-size:14px; /*文字のサイズ*/
    padding: 5px; /*余白調整*/
}
/*マウスオーバー*/
 .sdtext a:hover {
    text-decoration: underline; /*下線表示*/
}

/*セルの指定*/
 td .sdtext a:last-child {
    font-weight: bold; /*太字*/
} 

/*セルの指定のマウスオーバー*/
td .sdtext a:last-child:hover {
    text-decoration: underline; /*下線表示*/
}
</style>

最後のカテゴリ名に「もっとみる」を付ける

「～をもっとみる」という動詞を入れることで、クリックできるという認識になりクリック率が上がります。

また１カテゴリずつにアンダーラインを引き分かりやすいデザインにしています。

マウスオーバー時には太字にしてお客様がリンクという認識がしやすいように演出しています。

cssはこちら

<style>
td .sdtext {
     height: 25px; /*列の高さ*/
     padding: 5px 0 0 ; /*余白調整*/
     border-bottom: #5F5F5F 1px solid; /*枠線*/
}
.sdtext a:link,.sdtext a:visited {
     color:#444444; /*文字色*/
     text-decoration: none; /*下線非表示*/
     font-size:13px; /*文字のサイズ*/
     padding: 5px ; /*余白調整*/
}
/*マウスオーバー*/
 .sdtext a:hover {
     font-weight: bold; /*太字*/
}
/*文字追加設定*/
td .sdtext a:last-child::after {
    content: "」をもっとみる"; /*文字後ろ*/
}
td .sdtext a:last-child::before {
    content: "「"; /*文字前*/
}
</style>

まとめ

パンくずリストは、サイト内回遊率が向上する以外にSEO的にも効果があるので表示しておくべき設定です。

またお客様が自分の商品ページに来た際に「関連商品はないかな？」と次のページに移る時パンくずリストからカテゴリーページへ移動する事もあります。

なので、分かりやすく押しやすい表示にすることをお勧めします！

ちなみに「パンくずリスト」の名前の由来は、「おかしの家」で有名なグリム童話の『ヘンゼルとグレーテル』から来ているそうです。

ヘンゼルが森の奥に連れられたとき、道に迷わないようパンくずを落としながら歩いた場面があります。

この「迷わない目印」という共通点から「パンくずリスト」という呼び名がついたと言われています。

面白いですよね(^^)