を追加します→
まず、「パンくずリスト」とは?
引用:IT用語辞典 e-Words
■パンくずリスト【topic path】
>Webサイトの中のそのページの位置を、階層構造の上位ページへのリンクのリストで簡潔に記述したもの。
>すべてのページの同じ場所にパンくずリストを掲載することにより、サイトの訪問者が現在位置を直感的
>に理解する役に立つ。
>大規模なWebサイトは、ページ群全体が大きなカテゴリに分かれ、その下に何階層かの小カテゴリ、個別の
>ページ、という形で階層構造で管理されていることが多い。各ページに、そのページの属するカテゴリの
>トップページへのリンクを順番に並べたものがパンくずリストである。区切り記号には伝統的に「>」
>(大なり記号)が使われ、「トップ > コンピュータ > パソコン > 買い方」のように表現する。
>パンくずリストは垂直方向のナビゲーションであるため、「この階層には他にどんなカテゴリがあるか」
>といった水平方向のナビゲーションを表現することはできない。両者をうまく組み合わせることがWebサイト
>のユーザビリティを高める鍵になると言える。
>童話「ヘンゼルとグレーテル」で、森の中で迷わないようにパンくずを少しずつ落としながら歩いたという
>故事が由来である。英語では、パンくずリストの直訳「breadcrumbs list」のほかに、意味を捉えた「topic path」
>(トピックパス)という語も使われる。
よく見かけると思います。
top > カテゴリ名 > 記事名
↑こういった表示です、これが「パンくずリスト」と
呼ばれる物です。
これはブログ内で記事がどの階層にあるかをひと目で確認
できるのでユーザビリティを上げるために使われます。
例えば、このブログの場合、半数の訪問者さんは個別ページ
から入って来ます。
それが初めての訪問者さんだった場合、そのページがブログ
の中でいったいどういう場所にあるのかがわかりにくいので、
この表示を使いナビゲーションとします。
ユーザーに優しい作りはSEO上も有利です。
ライブドアブログは記事の投稿時、カテゴリーを2つ指定できます。
投稿時、左側がCategory1、右側Category2です。
親カテゴリーをCategory1、サブカテゴリーをCategory2として
利用する方が多いのではないでしょうか。
しかし、先日の「カテゴリのサブカテゴリ化」にも書きましたが、
2つのカテゴリを指定できるだけで親子の階層ではありません。
そういう理由からCategory2は使っていない人が多い用に感じます。
ですから、もちろんパンくずリストもCategory2はあるときにだけ
表示されて欲しいですね。
そこで条件を指定して実行できる「条件タグ」と呼ばれる物が
あります。タグの頭に「IF」が付いた物がありますが、これが
そうです。
条件タグでくくられた部分は、その条件を満たさない時は表示されません。
例えば、Category2が無ければその部分の表示はされませんので便利ですね。
今回使用するタグ(ライブドア独自)は以下の物です。
<IfArticleCategory1></IfArticleCategory1>・・・Category1があるなら表示するという条件
<$ArticleCategory1Url$>・・・Category1のページのアドレス
<$ArticleCategory1$>・・・Category1の名前
<IfArticleCategory2></IfArticleCategory2>・・・Category2があるなら表示するという条件
<$ArticleCategory2Url$>・・・Category2のページのアドレス
<$ArticleCategory2$>・・・Category2の名前
ライブドア独自タグの一覧はこちらから参照できます↓
■livedoor BlogのデザインをカスタマイズするWiki
http://wiki.livedoor.jp/everydaydesign/d/FrontPage
こういったタグも意味がわかれば、色々と応用ができる
ようになります。
ブログ自体も分解してみればタグの集まりですから。
では、結論です。
このカスタマイズは非常に簡単です。
以下のタグをhtmlの任意の場所に追加して下さい。
<!--パンくずリストここから-->
<a href="http://butikasegu.livedoor.biz">トップ</a>><IfArticleCategory1><a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a></IfArticleCategory1><IfArticleCategory2>(<a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a>)</IfArticleCategory2>><$ArticleTitle ESCAPE$>
<!--パンくずリストここまで-->
非常に簡単ですね。
あとは
<div align="right"></div>
で囲んで右寄せ表示にしたり(rightをcenterに代えれば真ん中寄せ)
<small></small>
で囲んで少し小さめの表示にしたり、アレンジして下さい。
このカスタマイズは本当に簡単ですが、利用価値は高いと思います。
・訪問者さんに優しい
・SEOに有利
・ページビューのアップ
・売上増?
ご活用下さい。


