 |
| Breadcrumb for Blogger - Blogger Widgets |
Webサイトの中のそのページの位置を、階層構造の上位ページへのリンクのリストで簡潔に記述したもの。パンくずリストといえば、そのロマンティックな名前の由来と同様「自分のブログにもあったら便利だろうな～」と夢見ながらも、現実的には「追加するのが大変そう、、」という漠然とした壁の前で立ち消えになりがちなナビゲーションのひとつでした。
(中略)
童話「ヘンゼルとグレーテル」で、森の中で迷わないようにパンくずを少しずつ落としながら歩いたという故事が由来である。英語では、パンくずリストの直訳「breadcrumbs list」のほかに、意味を捉えた「topic path」(トピックパス)という語も使われる。
それがたまたま見かけた「 Breadcrumb for Blogger - Blogger Widgets 」を読んでみると、Blogger の投稿ページで " Home » [ラベル] » [投稿タイトル] " と表示されるパンくずリストが、意外と簡単に追加できそうです。
ということで早速、試してみることにしました。
Blogger 投稿ページにパンくずリストを追加する手順は、次の通りです。
- [テンプレート > HTML の編集] 画面を開き、[ウィジェットのテンプレートを展開] にチェックを入れて、次の文字列を検索する。
- 1. で検索した文字列の前に次の1行を追加する。
- 次の文字列を検索する。
- 3. で検索した文字列の前に次のコードを追加する。
注意) 同じ文字列が2カ所あった場合は、2番目の文字列の前のみに追加する。
備考) 投稿に複数のラベルを付けている場合は、最後のひとつのラベルが表示される。
パンくずリストに複数のラベルすべてを表示するには、コードの13行目と15行目を削除する。
<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == "static_page"'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div> <b:else/> <b:if cond='data:blog.pageType == "item"'> <!-- breadcrumb for the post page --> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#"> <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast == "true"'> » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span> </b:if> </b:loop> » <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <!-- breadcrumb for the label archive page and search pages.. --> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == "index"'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span> <b:else/> <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable>
- [テンプレートを保存] ボタンをクリックする。
以上です。
これで、Blogger の投稿ページはもちろん、検索結果ページやラベルごとのページなどにもパンくずリストが表示されるようになりました。
さらに、パンくずリストの背景やレイアウト、色、フォントなどをカスタマイズする場合は、[Blogger テンプレート デザイナー] > [アドバンス] から[css を追加] 画面を開き、[カスタム CSS を追加] 欄に次のスタイルシートを追加すると、お好みで変更できます。
.breadcrumbs { padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height: 1.4em; border-bottom:3px double #e6e4e3; }
手軽にできて大きな満足感を得られる（個人の感想ですw）「パンくずリスト」の表示方法でした。
