0017

Breadcrumb NavXTをULタグで囲みたい

Breadcrumb NavXTをULタグで囲みたい

2010.12.6

Breadcrumb NavXTをULタグで囲みたくて、いろいろ触ってみました。
まだまだ甘い部分も有る可能性が高いですが、備忘録を兼ねて記載したいと思います。

環境

いいわけ(笑)

最初に

プラグインの有効化の方法は省略します。
パンくずを表示させたい箇所に以下のコードを記載します。

ご覧の通り、ホームへのリンクは、テーマファイルに直書きしています。
また、ホームページに「ホーム」とだけパンくず表示されるのがいやだったので、フロントページ(トップページ)以外のページで表示するよう記述しています。

あとは、Breadcrumb NavXTの設定を以下の画像のように設定するとそれなりに表示されます。

Breadcrumb]

]

Breadcrumb]

Breadcrumb]

Breadcrumb]

Breadcrumb]

Breadcrumb]

CSSの設定

CSSの装飾をします。上記でも書きましたが、矢印は「背景画像」として表現します。 ホームのLIタグ(.pankuzu li.first)には矢印を表示しないようにしています。

.pankuzu {
    margin-right: auto;
    margin-left: auto;
    padding-top: 1em;
    padding-bottom: 1em;
}

.pankuzu li {
    display: inline;
    padding-left: 20px;
    background: url(矢印画像へのパス) no-repeat 6px 50%;
}

.pankuzu li.first {
    padding-left: 0;
    background-image: none;
}