2004年11月23日

Blogにパン屑リストをつけてみる

よく、企業のホームページのようなしっかりしたサイトには、パン屑リストと呼ばれるナビゲータが付いています。

大規模なWebサイトだと、

「今、どこのページを見ているのか。」

が、わかりにくかったりするので、パン屑リストを付けてサイトの構成をわかり易くしています。

Blogはコンテンツが増えていくツールですので、これがあると便利ですね。で、参考にしたのはパンパでガウチョさんのページです。

個別記事ページにパン屑リスト

上記のページにある通り個別ページとスタイルシートを修正すると、「前のページ」「次のページ」「Blogトップページ」の3つのリンクが追加されます。

ここでは、表示を少し変えたものにしてみます。同じくパンパでガウチョさんの次のページを参考に、livedoor Blogの特殊タグを利用し、表示される内容を変更します。

livedoor Blogの特殊タグ一覧

それぞれのHTMLテンプレートで<div id="content">の後に次のソースを追加します。

1. 個別ページ
<div id="navigation"> <a href="<$BlogUrl$>">トップページ</a> > <IfArticleCategory><a href="<$ArticleCategoryUrl$>"><$ArticleCategory ESCAPE$></a> > </IfPrevArticle><$ArticleTitle ESCAPE$> </div>

2. 月別アーカイブ
<div id="navigation"> <a href="<$BlogUrl$>">トップページ</a> > 月別アーカイブ </div>

3. カテゴリ別アーカイブ
<div id="navigation"> <a href="<$BlogUrl$>">トップページ</a> > <$CategoryName ESCAPE$> </div>

4. スタイルシート
#navigation{
text-align:left;
padding:0px 0px 3px 10px;
font-size:x-small;
font-weight:bold;
}


HTMLテンプレートへの追加が終わったらBlogの再構築をして完了です。パン屑リストが自動で表示されてくるはずです。


- 追記 - 2005/10/23
Blogテンプレートのデザインを変更したので、旧テンプレートのソースは参考として掲載します。また、今までは各ソースをHTMLファイルに変換して掲載していましたが、Textareaの形式に変更しました。

・個別ページのHTML_v005


・月別アーカイブのHTML_v008


・カテゴリ別アーカイブのHTML_v006


・スタイルシート_v005




posted by サルガネ at 17:02| Comment(13) | TrackBack(12) | Blogの使いかた | 更新情報をチェックする
この記事へのコメント
こんばんは、はじめまして。

現在位置の分かるようなナビをつけたいと思い、
検索でこちらに辿りつきました。
「パン屑リスト」と言うんですね。勉強になりました。

とても分かりやすい説明をして頂き、
早速活用させて頂きました。

ありがとうございました。
Posted by kotatama at 2004年11月26日 17:42
>kotatamaさん

参考になってよかったです。

ナビゲーションがあると、訪問者だけでなく、

サイトの管理をするときも便利になりますね。
Posted by sarugane at 2004年11月28日 00:21
ひろとさんのページ経由で知り、ためしにやってみました。

タグが良く分からず、いじりたくてもいじれないところばかりですが、
今後もっと勉強したいと思います
Posted by 姫子 at 2004年12月17日 21:59
>姫子さん

こんにちは。参考になってよかったです。
HTMLは少しずつタグを覚えていくと、いつの間にか
理解することができますね。
Posted by sarugane at 2004年12月19日 23:32
こんばんは、はじめまして。
こちらの記事を見て、パン屑リストを
つけてみました!

すごくわかりやすくて、ほんとに
助かりました*
とても便利な機能で、しかも簡単に
つけられたのですごく嬉しいです!

ありがとうございましたm(_ _)m
Posted by アオイ at 2005年01月22日 21:53
初めまして。
早くナビを付けたい付けたいと前から思ってましたが、パン屑リストと言うんですね、知りませんでした(笑)。参考ページが色々ある中、こちらを参考にさせて頂き、できましたぁ!! ホント助かりました。ただカテゴリーページだけ表示できずで、同じようにやったつもりなのに。。。再構築の時間差攻撃でしょうか?(笑)
Posted by citromacmo at 2005年02月01日 18:21
>citromacmoさん

こんにちは。
livedoor Blogの場合、昔の記事なんかは再構築をしてもなかなか反映されないことがあります。

こういうのがあると混乱しますよね。
Posted by sarugane at 2005年02月06日 13:33
初めまして。
「パン屑リスト」参考ページが色々ある中、こちらを参考にさせて頂きました。ありがとうございます。ただカテゴリーページ・月別とも全てには反映されていません。どこか間違っているのでしょうか?すみませんが、ど素人なものでよろしかったら教えていただけませんか?
Posted by フィーガ at 2005年04月26日 09:48
解決しました。過去の記事を更新したら表示できました。すみませんでした、くだらない質問で・・
Posted by フィーガ at 2005年04月27日 13:20
>フィーガさん

こんにちは。
livedoor Blogでは過去の記事が再構成できない現象がたまにあるようです。

おそらく、Blogの機能改善で仕組みがいろいろ変わっているのが原因だと思われます。
Posted by sarugane at 2005年05月08日 17:56
はじめまして。
こちらも記事を参考にさせていただきました。
大きなサイトで見ていたナビのような表記を自分のブログでもつけられたらなぁ、と思っていたのですが、それが出来てとてもうれしいです。
有難うございました。
Posted by AI at 2005年06月19日 22:02
トラックバックしました、Pet Lovers Only♪のAQと申します。

ブログを一時休止。今回再開するに当たり、デザイン及び記事を再構築しなおしました。その為、記事のURLが変わってしまったため、トラックバックの貼り直しをさせて頂きました。お手数をおかけしますが、以前のトラックバックを削除していただけましたら助かります。宜しくお願い申し上げます。
Posted by AQ at 2006年02月01日 16:23
はじめまして。
個別記事にパン屑リストを付けるのはすぐに出来たのですが、
カテゴリ別と月別アーカイブにパン屑リストを付けるのに
どうしていいのか良く分からなかったので、
大変参考になりました。
ありがとうございました
Posted by りお at 2006年03月25日 10:35
コメントを書く
コチラをクリックしてください

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

SEOから考えるブログのカスタマイズ
Excerpt: 最近ブログのカスタマイズ(レイアウトを変えたり、機能を追加したりすること) にはまっています。 結構凝り性なんです。 最近、ブログのカスタマイズの仕方について質問を多くいただくので、 今日は、..
Weblog: 大学生社長ひろとの挑戦!-まだ限界だなんて認めちゃいないさっ
Tracked: 2004-12-15 02:44

ブログをカスタマイズしてみた。
Excerpt: ライブドアブログの問題点。 1.ブログの検索から個別の記事にとんできたりとか、カテゴリー別のページにはいったとき、トップへの戻り方がわかりにくい。(実はサイトのタイトルがトップページのリンクになってい..
Weblog: Let it be....
Tracked: 2005-02-26 04:05

パン屑リスト・直接編集画面・検索機能の追加
Excerpt: 前回のブログ3カラム化に続いて、今回もブログのカスタマイズに挑戦してみました! &nbsp; 今回の追加機能は &nbsp; ・渡る世間は○○ダ!!様を参考にさせていただいたパン屑リストの追加 &nb..
Weblog: ブログでコツコツ儲けよう
Tracked: 2005-03-13 19:40

個別ページにナビゲート
Excerpt: 「渡る世間は○○ダ!!」さんの記事を参考に個別ページにパン屑リストをつけました。 パン屑リストって何?って感じですが、よくサイトページの上の方にあります。 ここでは  「トップページ > [カテゴリー..
Weblog: 小春日和の陽射しの中で
Tracked: 2005-03-20 11:24

個別記事からトップ記事へ
Excerpt: 23日の記事で最後に、個別記事からトップ記事に もどる機能を付けたい!と書いていたのですが、 今度はShihoさんのブログでこれに関する事が書かれていました。 なんか思った事が回りに伝わっているみたい..
Weblog: ワクワク♪しましょ!
Tracked: 2005-03-28 11:27

Blogカスタマイズの備忘記録
Excerpt: 他のブログを見ているとかっこいい、あんなふうにしてみたいと思うブログをよく見かけます。どうやるのかいろいろ調べたら自分でカスタマイズしてるんですね。  という事で少しやってみました。「HTMLやCCS..
Weblog: たりぃの好きなもの
Tracked: 2005-03-31 21:33

パンくずリスト
Excerpt: パンくずリストを追加してみました。 ちなみに、この方のを参考にしています。
Weblog: カツオの練習実験ブログ
Tracked: 2005-05-03 17:02

パン屑リスト
Excerpt: 「パン屑リスト」って知ってますか? このブログのタイトル下にあるコレ↓ トップページ &gt; アフィリエイトとは &gt; ASPのメリットデメリット です。 これって比較的インターネット上では..
Weblog: ブログならできるもん!アフィリエイト裏技
Tracked: 2005-05-10 00:09

個別ページにナビゲーション(パン屑リスト)を付加
Excerpt: 初心者にとって、大変解りやすく。   思案していたことが解決できました。      ありがとうございました。
Weblog: 備忘録 ランダムウオーク
Tracked: 2005-06-16 23:48

個別ページにナビゲーション(パン屑リスト)を付加
Excerpt: 初心者にとって、大変解りやすく。   思案していたことが解決できました。      ありがとうございました。
Weblog: 備忘録 ランダムウオーク
Tracked: 2005-06-16 23:49

パン屑リストのすすめ
Excerpt: パン屑リストってはじめ聞いたときは、「パン屑」って言うぐらいだから、しょうもないカスタマイズなんだろうなと思ってた私が無知でした &nbsp;HPを作成した事がある人は、閲覧している人自身がどこのペー..
Weblog: Pet Lovers Only♪
Tracked: 2006-02-01 16:18

カスタマイズ8~カテゴリ別と月別アーカイブにもパン屑リストを付ける~
Excerpt: カスタマイズ3で個別記事にパン屑リストを付けましたが、カテゴリ別と月別アーカイブにも付けてしまいます。 saruganeさんの渡る世間は○○ダ!!の記事“Blogにパン屑リストをつけてみる”を参考にさ..
Weblog: Addicted to the Movie and Reading!
Tracked: 2006-03-25 10:29
×

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