やっと、うまくいったのでご報告を。
パンくずリストというのは
IT用語辞典 e-Words : パンくずリストとは 【topic path】によると
前略
大規模なWebサイトは、ページ群全体が大きなカテゴリに分かれ、その下に何階層かの小カテゴリ、個別のページ、という形で階層構造で管理されていることが多い。各ページに、そのページの属するカテゴリのトップページへのリンクを順番に並べたものがパンくずリストである。区切り記号には伝統的に「>」(大なり記号)が使われ、「トップ > コンピュータ > パソコン > 買い方」のように表現する。
中略
童話「ヘンゼルとグレーテル」で、森の中で迷わないようにパンくずを少しずつ落としながら歩いたという故事が由来である。英語では、パンくずリストの直訳「breadcrumbs list」のほかに、意味を捉えた「topic path」(トピックパス)という語も使われる。
以前やったときには、カテゴリーページにのみ
Top>カテゴリー名
をつけることができた。
記事HTML編集画面の上の方で
<% if:page_name eq 'category' -%>
<div class="crumb"><a
href="<% blog.page_url %>">TOP</a>>
<% category.name %></div><% /if -%>
のように赤字の部分を挿入することで可能。
しかし、同様に個別記事ページに
Top>カテゴリー名>記事名
をつけようとしたのだが、<% category.name%>が使えるのはカテゴリーページのみ。
個別記事にある
<% loop:list_article -%>
<a href="<% article_category.page_url %>">
<% article_category.name %></a>
はどうかというと、これも使えない。
どうも記事コンテンツの中でも
<% loop:list_article -%>と<% /loop -%>
の間と外では使える変数が違う様子だ。
したがって、記事ページの日付のすぐ上であればつけることは可能だが、カテゴリーページと位置が違うというのも今ひとつ。
と言うことで今回の方法。
記事HTML編集画面の上の方に赤字部分を追加。
<% if:page_name eq 'article' -%>
<div class="crumb">
<a href="<% blog.page_url %>">Top</a>>
<% loop:list_article -%>
<a href="<% article_category.page_url %>">
<% article_category.name %>
;</a>><% article.subject %>
<% /loop -%></div>
<div class="navi">
<% if:previous_article -%><<<a href="<% previous_article.page_url
%>"><% previous_article.subject | tag_break %></a>| <%
/if -%>
<a href="<% blog.page_url %>">Main</a>
<% if:next_article -%>| <a href="<% next_article.page_url %>"><%
next_article.subject | tag_break %></a>>><% /if -%>
</div>
<% /if -%>
個別ページには記事コンテンツが2つになる。
新しく追加した記事のHTMLを一度全部消し
<div class="crumb"><a href="<% blog.page_url %>">Top</a>><%
loop:list_article -%><a href="<% article_category.page_url %>"><%
article_category.name %></a>><% article.subject %><% /loop
-%></div>
を挿入。
これでカテゴリーページと同じ場所にパンくずリストが表示される。
後はCSSに
.crumb{
color:#000;
font-size:90%;
text-align:left;
margin:0px;
width:100%;
padding : 5px;
}
を追加すればできあがり。
また、徹夜か〜?(笑)
そうそう、hタグ絡みでまたトラックバックさせてもらいました。
こっそり変えておきました(笑
>試してみたいが時間がない。。。
また、徹夜か〜?(笑)
お体にはお気をつけて。
私、ちょうど不惑ですがとてもとても徹夜は無理。
その代わり朝が少しだけ早くなった。
おじんの前兆ですかね(笑
書いてある通りにやってみたのですが、TOP>の後のカテゴリ名が出てきません。
何か間違えているのでしょうか?
教えてください。
ソースを見たところ
<% article_category.name
%>
となっていますので、article_category.nameと%の間に半角スペースが無いせいではないだろうか?と思います。
やってみてください。
無事に出来ました、ホントに感謝感謝です!
無事に出来ました、ホントに感謝感謝です!
と言うか、私の記事の書き方が悪かったようで(^^ゞ
修正しておきました。
パンくずリストの記事参考にさせていただきました。
わかりやすい説明で助かりました。
カスタマイズの参考にさせていただきたいので、
リンクに追加させていただきます。
不都合があるようでしたらお知らせ下さい。
ところが、どうしてなのか全然リストが表示されません。お時間がありましたが、当サイトを覗いてみて指摘していただければ幸いです。よろしくお願いします。
やっぱり、こちらの解説はとてもよくできていると思います。初心者にも本当によくわかりました。ありがとうございました。
CCSなど初期化して今再びカスタマイズに挑戦中です。
こちらを参考にバンくずリストは見事張り付けられました。
ありがとうございます。
しかし、一つ解決できません。文字が白抜けしていて色を変えたいのですが いじってもさっぱり変わりません?何処をいじれば変えることができるのでしょうか?アドバイス頂ければ幸いです。
しかし、カラーの部分をいじっても残念ながら全く変化なく 部分的に白抜けです。
ブログのテンプレート自体に色があって、素人ながらデザインが問題なのかも?って思いますがどうなのでしょう? 結局 何処をいじっても 変わってくれません。ナビの色も変えられません。変えても反映してくれないのです。
バンくずリストほ機能していますので、一応このままでがんばります。 ありがとうございました。
場所が悪かったのかなぁ?いろいろいじっているウチに色ついてました。
原因理解できてないかも・・・
お騒がせしましたぁ!
パンくずリストとても参考になりました
ありがとうございます
記事の方にリンクさせていただきました
他の記事もとても参考になり
また訪問させていただきます
パンくずリストを付けたいなと思ってさがしていたら、こちらの記事に当たりました。
おかげさまで、大成功!ありがとうございました
TBもさせていただきます
よろしくお願いいたします
パンくずリスト参考にさせてもらいました。
1年以上前の記事なんですよねぇ・・・
こういった先駆者さんたちのおかげでsesaaブログのカスタマイズができています。
ありがとうございます。m(__)m
トラックバックさせて頂きますね。