TopSeesaaブログカスタマイズ>パンくずリスト
2005年03月16日

パンくずリスト

カテゴリータイトルがで少しふれたのだが、以前パンくずリストをつけようと思って中断していた。

やっと、うまくいったのでご報告を。

パンくずリストというのは
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 -%>&lt;&lt;<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>&gt;&gt;<% /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タグ絡みでまたトラックバックさせてもらいました。

 
Posted by サイバーシェフ at 2005年03月16日 17:30
サイバーシェフさんのトラックバックで「記事タイトルをh2に」のところをh3になっていたのを発見(汗
こっそり変えておきました(笑

>試してみたいが時間がない。。。
また、徹夜か〜?(笑)
お体にはお気をつけて。
私、ちょうど不惑ですがとてもとても徹夜は無理。
その代わり朝が少しだけ早くなった。

おじんの前兆ですかね(笑
Posted by 深田 at 2005年03月16日 18:30
こんにちは。
書いてある通りにやってみたのですが、TOP>の後のカテゴリ名が出てきません。

何か間違えているのでしょうか?
教えてください。
Posted by iwa at 2005年05月23日 04:59
iwa さん、コメントありがとうございました。

ソースを見たところ
<% article_category.name
%>
となっていますので、article_category.nameと%の間に半角スペースが無いせいではないだろうか?と思います。
やってみてください。
Posted by 深田 at 2005年05月23日 16:11
その通りでした、ありがとうございました。

無事に出来ました、ホントに感謝感謝です!
Posted by iwa at 2005年05月23日 23:58
その通りでした、ありがとうございました。

無事に出来ました、ホントに感謝感謝です!
Posted by iwa at 2005年05月23日 23:59
iwaさん、うまくいったようでなによりです。

と言うか、私の記事の書き方が悪かったようで(^^ゞ
修正しておきました。
Posted by 深田 at 2005年05月26日 22:19
こんばんは!ブログど初心者です。「パンくず」について調べていて見つけちゃいました。私にもできました。丁寧でわかりやすかったです。ありがとうございました。またきます(^^)
Posted by ちゅら at 2005年06月15日 01:06
はじめまして。
パンくずリストの記事参考にさせていただきました。
わかりやすい説明で助かりました。
カスタマイズの参考にさせていただきたいので、
リンクに追加させていただきます。
不都合があるようでしたらお知らせ下さい。
Posted by ちーず at 2005年09月01日 14:23
はじめまして。「パンくずリスト」を付けたくて、いろんな記事を読んでいましたが、こちらの解説が一番わかりやすかったように思います。
ところが、どうしてなのか全然リストが表示されません。お時間がありましたが、当サイトを覗いてみて指摘していただければ幸いです。よろしくお願いします。
Posted by az at 2005年09月09日 05:59
すみません!!自己解決できました。
やっぱり、こちらの解説はとてもよくできていると思います。初心者にも本当によくわかりました。ありがとうございました。
Posted by az at 2005年09月09日 13:09
はじめまして!わかばマークでブログにトライしています。 
CCSなど初期化して今再びカスタマイズに挑戦中です。
こちらを参考にバンくずリストは見事張り付けられました。
ありがとうございます。
しかし、一つ解決できません。文字が白抜けしていて色を変えたいのですが いじってもさっぱり変わりません?何処をいじれば変えることができるのでしょうか?アドバイス頂ければ幸いです。
Posted by わがまま at 2005年10月16日 13:56
CSSの.crumb内color:#FFF;をお好きな色に。
Posted by 深田 at 2005年10月16日 14:44
早々のアドバイスありがとうございます。
しかし、カラーの部分をいじっても残念ながら全く変化なく 部分的に白抜けです。
ブログのテンプレート自体に色があって、素人ながらデザインが問題なのかも?って思いますがどうなのでしょう? 結局 何処をいじっても 変わってくれません。ナビの色も変えられません。変えても反映してくれないのです。
バンくずリストほ機能していますので、一応このままでがんばります。 ありがとうございました。
Posted by わがまま at 2005年10月16日 21:20
何度もすいません。解決しました。
場所が悪かったのかなぁ?いろいろいじっているウチに色ついてました。
原因理解できてないかも・・・ 
お騒がせしましたぁ!
Posted by わが at 2005年10月17日 09:56
はじめまして
パンくずリストとても参考になりました
ありがとうございます
記事の方にリンクさせていただきました
他の記事もとても参考になり
また訪問させていただきます
Posted by HIMS at 2006年03月07日 15:42
こんにちは、はじめまして

パンくずリストを付けたいなと思ってさがしていたら、こちらの記事に当たりました。

おかげさまで、大成功!ありがとうございました

TBもさせていただきます
よろしくお願いいたします
Posted by えのさん at 2006年03月30日 13:13
はじめまして。

パンくずリスト参考にさせてもらいました。
1年以上前の記事なんですよねぇ・・・
こういった先駆者さんたちのおかげでsesaaブログのカスタマイズができています。
ありがとうございます。m(__)m

トラックバックさせて頂きますね。
Posted by しばやん at 2006年07月02日 11:48
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

■パンくずリスト
Excerpt: 「無料ブログでビジネスブログ」さんの記事を参考にHTMLをいじって、パンくずリストをつけてみました。 記事、カテゴリページの上のTop&amp;gt;■Thoughtなどのやつのこと。 まだまだデザ..
Weblog: Monochrome Apple
Tracked: 2005-03-22 22:41

パンくずリストを付けてみる
Excerpt: 無料ブログでビジネスブログさんの記事を参考にアレンジさせて頂きました。
Weblog: Seesaaブログをひたすらカスタマイズし続けるブログ
Tracked: 2005-06-05 16:52

カテゴリのツリー化
Excerpt: 新クールを迎えるごとに伸びていくカテゴリ。(笑) なんとか見やすくならないものかとツリー化を考えていたのですが やっと成功させることが出来ました。 『Des notes de KOHtan』さまのカ..
Weblog: どらま・のーと
Tracked: 2005-09-01 14:23

seesaaカスタマイズーパンくずリスト
Excerpt: 今日は、記事はこれだけだけど、ブログを色々いじっちゃいました~ 以前から「どうなのよ?」と思っていた「続きを読む」をはずしました。 読む立場からいってどうなのかな~と思いつつ、いいのかもね~と思い使っ..
Weblog: **Better half**
Tracked: 2005-11-05 21:09

Seesaa カスタマイズ
Excerpt: ブログ初心者ですが、大変ためになりました。 ありがとうございました。
Weblog: Doco-e
Tracked: 2005-11-12 21:32

seesaaブログにパンくずリストを付ける
Excerpt: 無ブロでビブロさんのところでパンくずリストをseesaa blogに付ける方法が載っていたので早速やってみました。 変更する箇所は3箇所です 1.カテゴリーページにパンくずリストを付ける <% ..
Weblog: えのさんのブログとアフィリエイトとSEOの基礎知識
Tracked: 2006-03-30 13:14

パンくずリスト設定してみた
Excerpt: このブログにパンくずリストを設定してみました。 パンくずリスト表示イメージ パンくずリストとは・・・ ~Wikipediaより引用~ パンくずリスト(breadcrumbs list)は、ウェ..
Weblog: じゅるいなぁ・・・
Tracked: 2006-07-02 11:49

『パンくずリスト』つけてみました。
Excerpt: 参考に改造してみました。ありがとうございました。
Weblog: ★ちびくま部屋★
Tracked: 2006-12-08 03:21

HTMLとCSS修正でちょっと機能を追加♪
Excerpt: 今日がブログ開設一周年となりましたが、昨日からもくもくとやっていたのが、ちょっとしたHTMLとCSSの修正です&amp;#63903; 参考サイトさんに詳しく書いてあるから、適切な場所にコピペしてC..
Weblog: マキノハラENJOYブログ(*´▽)_旦~~
Tracked: 2007-03-04 13:45

Seesaaブログにパンくずリストをつける
Excerpt: 結局色々やってみたものの、日にち固定の過去ログページでのパンくずリストの表示がうまくいきません。 とりあえず、今は、月までの表示にしています。 今回、パンくずリストをSeesaaブログにつけるカスタ..
Weblog: Fledgling Blog
Tracked: 2007-06-22 00:48
>>関連書籍
×

この広告は90日以上新しい記事の投稿がないブログに表示されております。