サイトのパンくずリストとSerene Bachのパンくずリスト
- Category : blog > serene bach / 2007.06.27 Wed 00:20
- permalink
いわゆるパンくずリスト
■サンプル
ＨＯＭＥ > 第2階層 > 第3階層
記号を駆使して、こういう作り方もあるけれど↑
やっぱりカッコよくリストで組みたいものです↓
■CSS
>っていう記号も、背景画像にしちゃいましょう。
■画像
（↑見えますか？小さすぎて見えづらいですね…）
■サンプル
ＨＯＭＥ > 第2階層 > 第3階層
<a href="#">ＨＯＭＥ</a>
> <a href="#">第2階層</a>
> 第3階層
記号を駆使して、こういう作り方もあるけれど↑
やっぱりカッコよくリストで組みたいものです↓
<ul class="path">
<li class="top"><a href="#">ＨＯＭＥ</a></li>
<li><a href="#">第2階層</a></li>
<li>第3階層</li>
</ul>
サイトのパンくずリスト
■CSS
.path {
font-size: 10px;/* fix */
margin: 0px;
padding: 7px 6px;
}
.path li {
display: inline;
background: url(../img/path.gif) no-repeat 4px 3px;
line-height:1.1em;
padding-left: 14px;
}
.path li.top {
background-image: none;
padding-left: 0px;
}
>っていう記号も、背景画像にしちゃいましょう。
■画像
パンくずリスト表示プラグイン
[ TopicPath ] by Boleroさん
<!-- BEGIN topic_path -->
{topic_path}
<!-- END topic_path -->
これで吐き出されるソースは
■サンプル
> カテゴリ > サブカテゴリ
> <a href="#">カテゴリ</a>
> <a href="#">サブカテゴリ</a>
といった感じです。
これをul、liを使ったパンくずリストに合わせるのなら
■TopicPath.pm
46行目
sub NAVI_ARROW {' > '};
↓
sub NAVI_ARROW {''};
空にして
77行目【アーカイブの時】
$cms->tag('topic_path'=>"Archive: $date");
↓
$cms->tag('topic_path'=>"<li>Archive: $date</li>");
91行目【個別モードの時】
'tag' => '<a href="'.$site_cgi.'?cid=%d">%s</a>',
↓
'tag' => '<li><a href="'.$site_cgi.'?cid=%d">%s</a></li>',
とし、これで上書き＋再構築すると
吐き出されるソースは
<li><a href="#">カテゴリ</a></li><li><a href="#">サブカテゴリ</a></li>
となります。
あとは、{topic_path}をulでくくってやれば、うまい具合にパンくずがliタグでくくられる仕様に変身♪
<!-- BEGIN topic_path -->
<ul class="path">
{topic_path}
</ul>
<!-- END topic_path -->
■関連ブログ記事
ウェブマーケティング用語集 | パンくずリスト
Comments