Breadcrumb NavXT

WordPressでパンくずを追加するプラグイン　Breadcrumb NavXT　を入れてリスト表示した。

参考ページ
1bit.memoさん
http://1bit.mobi/20101206102236.html

パンくずを入れようと思いBreadcrumb NavXTって云うプラグインを見つけて適用したんやけど、素の状態だと文字間を　>　で表示してしまい、見た目にあまりよろしくない。

・・・で、リスト表示の背景画像の矢印表示をしてみた。

1bit.memoさんのページを見つけて設定してみたがうちではうまく行かんかったんで1bit.memoさんのデータを元にいじってやっつけました。

最初に
Breadcrumb NavXTをインストールして有効に。

表示させたい場所に

index.php

//先頭のHOMEの部分はCSSの背景で貼ってるのでHOMEへのリンクは透明gifを貼ってます。
<div class="kuzu">
<ul class="kuzuu">
<?php if(!is_front_page()){ ?>
<li class="first"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/clear.gif" alt="HOME" width="12" height="12" /></a></li>
<?php } ?>
<?php
if(function_exists('bcn_display'))
{
    bcn_display();
}
?>
</ul>
<br class="cf" />
</div>

を入れる。
うちは、トップページのみ、page.phpで後は　index.phpで全て表示しているので、index.phpのフッターの手前に配置しています。
div class=”kuzu”でパンくずのエリアを囲み、その中に ulを入れてます。

CSS

/*パンくずを囲むエリア*/
.kuzu{
	font-size: 12px;
	border: solid 1px #CCCCCC;
	background-color: #FFFFFF;
	width: 880px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
}
/*パンくずリスト*/
.kuzuu li {
	list-style:none;
	width:auto;
	background-image: url(images/pankuz.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 30px;
	float: left;
	height: 20px;
	line-height: 10px;
	padding-top: 10px;
}
/*パンくず先頭ホームの部分*/
.kuzuu li.first {
  padding-right: 10px;
  padding-left: 0;
	background-image: url(images/home.gif);
	background-repeat: no-repeat;
	background-position: left center;
}

←パンくずのHOMEの画像 home.gif