Top Blog parts , customize ;>パンくずリスト設定してみた

2006年07月02日

パンくずリスト設定してみた

このブログにパンくずリストを設定してみました。

「手作り和洋菓子つるや」記事のパンくずリスト表示イメージ
パンくずリスト表示イメージ

パンくずリストとは・・・

 〜Wikipediaより引用〜
パンくずリスト(breadcrumbs list)は、ウェブサイト内におけるウェブページの位置をツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ・トピックパスとも言う。 ウェブディレクトリのような大規模なウェブサイト内において、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。

「パンくずリスト」という名前は、童話「ヘンゼルとグレーテル」で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。

Yahoo!カテゴリでの例: トップ > 各種資料と情報源 > 百科事典 > ウィキペディア (Wikipedia)


seesaaブログでは、記事ページを見ると、MAINの両サイドに、前の記事名次の記事名のリンクが表示されていて、そのページにジャンプする事ができます。
ただこれは、日時で前の記事次の記事を見ているだけです。
パンくずリストをつけることによって、

TOP > カテゴリー名 > 記事名


と、今見ている記事がどのカテゴリーなのかが分かりやすくなります。
まぁブログなんで、「過去記事なんて、どうでも良いじゃん!」と言う意見もあるかもしれませんが、私的には凄く気にいってしまいました。(^_^;)


seesaaブログでの設定方法

・デザイン - コンテンツ - 記事
・コンテンツHTMLの編集
 (編集前に作業前のHTMLをバックアップしておきます)
・赤字のところを追加
<% content.header -%>
<!-- Content -->
<% if:page_name eq 'article' -%>
<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>
<div class="crumb">
<br><br>
<a href="<% blog.page_url %>">Top</a>>
<% loop:list_article -%>
<a href="<% article_category.page_url %>">
<% article_category.name %>
;</a>><% article.subject %>
<% /loop -%></div>
<% /if -%>

<% if:page_name eq 'archive' -%>
<div class="navi">
<% if:previous_archive -%><<<a href="<% previous_archive.page_url %>"><% previous_archive.createstamp | date_format("%Y年%m月") %></a>|<% /if -%>
<a href="<% blog.page_url %>">Main</a>
<% if:next_archive -%>|<a href="<% next_archive.page_url %>"><% next_archive.createstamp | date_format("%Y年%m月") %></a>>><% /if -%>
</div>
<% /if -%>
・CSS修正
 (編集前に作業前のHTMLをバックアップしておきます)
・赤字のところを追加
 (一番下で良いと思います)
.crumb{
color:#000;
font-size:90%;
text-align:left;
margin:0px;
width:100%;
padding : 5px;
}
・再構築

作業前に、変更するHTMLとCSSのバックアップを忘れずにしておきましょう。
忘れると、痛い目にあうかもしれませんよ。

Inqsite Blogを参考にしました。お世話になりました。m(__)m

パンくずリスト - goo Wikipedia
TB
パンくずリスト - Inqsite Blog







posted by しばやん at 11:00 | Comment(0) | TrackBack(1) | Blog parts , customize このエントリーを含むはてなブックマーク
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

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


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

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

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

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