個別記事に記事の階層を表す「パンくずリスト」
を追加します→
まず、「パンくずリスト」とは?
引用: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に有利
・ページビューのアップ
・売上増?
ご活用下さい。
- 2007年04月10日
- ブログカスタマイズ:css/html
- コメント(22)
- トラックバック(5)
1. Posted by 「ブログアフィリエイトで稼ぐ大学生のブログ!」@由希 2007年04月10日 00:14
こんばんはtomさん、由希です!
いつもお世話になっています^^
パンくずリストって聞いたことあるのですが、今ひつと何か知りませんでしたw
毎日来ているのに、濃いノウハウやマインドがたくさんでびっくりしていますw
応援させていただきます♪
2. Posted by アフィリエイトの戦略 マスター 2007年04月10日 01:29
マスターです!
パンくずリストってそういう事だったんですね^^
だいたいの意味は知っていましたが
具体的には知りませんでした^^;
お楽しみはこれからだ”凸”
3. Posted by お金のなる木*mini 2007年04月10日 02:49
tomさん、こんにちは、miniです。
パンくずリストはSEO対策にも有効なんですね。
読者さんが理解しやすい=検索ロボットも
理解しやすい、
ということなのかな。
tomさんのブログでおつもお勉強させて
いただいてます♪
応援クリ〜ック!
4. Posted by 戦略の匠 2007年04月10日 03:54
こんばんは!匠です。
なるほど。
パンくずリストは1度説明受けたんですけど
忘れてました(汗
tomさんのおかげで思い出しました(笑
応援です。
5. Posted by ebayと情報起業で自由人・・・ing 2007年04月10日 09:06
tomさん、おはようございます。
tavathaです。
全く理解不能・・・。
いつか、個人レッスンお願いします(笑)
>商品、すんげ〜安いんですね・・・
>あれなら本腰入れれば簡単に
>売れちゃうんじゃないでしょうか?
>>どうだろう??
>>でも、売り上げあげてる人は
いるので、そうだと思います。
応援♪
6. Posted by 情報商材アフィリエイト王国☆あんず王子 2007年04月10日 09:08
tomさん おはようございます
あんず王子でっす。
パンくずリストは、一度入れて、
レイアウトが崩れちゃって・・
そのままです(汗)。
今日の記事を参考にさせてもらいますね。
>わかった!あの魔法使いさんですね!
正解です!
また、変動しているようですが・・
それでは応援していきまーっす。
『あいッ!!』
7. Posted by セールス分析のささ 2007年04月10日 09:50
こんにいは
パンくず
これ結構拾ってもらえますね
応援
ヘンゼル・・・いいアイディアだしてくれたなあ
8. Posted by カズヤマ 2007年04月10日 10:58
ライブドアブログ本当にダメデスね・・・
トムさんに2回も投稿させるなんて。。。。
アフィリエイト卒研にしたいんですけど
勉強内容と違うのでできないのです;;
大学でもっと有益な金になる勉強させてほしいですね!(笑)
でも女の子からもてないっすからあああ・・・・・
残念!!です(笑)(×_×;)
今回の記事ちょっと難しいですね。。。
応援ぷちゅ!また遊びにきます〜♪
9. Posted by 情報商材@在宅アフィリエイトでラクラク不労収益 2007年04月10日 12:36
tomさん、Kazzaです。昨日は応援ありがとうございました。もしお力になっていただけることがありましたら、ご連絡いただけるとうれしいです。
パンくずリスト、、初めてききました。。
>すごく簡単ですね< サラッといえるtomさんのセリフがうらやましいです。。
また教えてください!
応援!
10. Posted by おすし 2007年04月10日 12:39
tomさん、こんにちは。
お世話になります、おすしです。
パンくずは本当に大切ですね♪
〔記事ページ>カテゴリページ>トップページ〕で表示されるパンくずと〔>前の記事〕への誘導が両方あると理想的です。
今日がいい日になりますように”凸”
11. Posted by marimama◆誰でもできる超簡単アフィリエイト2倍法則の方法◆ 2007年04月10日 12:41
こんにちは♪tomさ〜〜〜ん!
marimamaです♪
いつも、訪問&コメント&応援ありがとう(^^♪
ライブドア用のパンくずリスト探してたんだ。
ありがとう♪あとで、がんばってみます。
で。。続きはぼやきで!
応援ポチッとな\(*⌒0⌒)bがんばっ♪
12. Posted by 電脳牧師の How to アフィリエイト 2007年04月10日 14:16
こんにちは。電脳牧師のたいぢです。
パンくずリストは使っています。
ナビゲーションのためだけでなく、内部リンクを増やして、SEEO対策するためにも、積極的に活用したいですね。
応援ポチッ☆
笑顔同封 たいぢ
13. Posted by 情報商材アフィリエイトの極意☆知幸(ともゆき) 2007年04月10日 14:18
tomさん☆ こんにちは〜
知幸(ともゆき)です♪
パンくずリスト・・・
聞いたことはあったのですか、
イマイチ理解してませんでした(汗
今回の記事で、やっと理解
できました^^
ありがとうございます!
さっそく、サブブログで
活用してみます♪
では また訪問します♪ 応援☆!
14. Posted by アフィリエイトでホップステップジャンプ! 2007年04月10日 16:09
初めまして、サリーと申します^^
ハーモニー塾からやってきました。
パンくずリスト。。何度見てもむずかしい。。
まだまだ勉強不足です。
でも、いいというものは
取り入れたいので、頑張りま〜す^^
これからもどうぞよろしくお願いします。
またきますね〜^^応援して帰ります〜☆
15. Posted by sumire@パソコンインストラクター 2007年04月10日 16:39
さん、こんばんは^^
ではでは、応援♪応援♪ぽちっ♪
16. Posted by sumire@パソコンインストラクター 2007年04月10日 16:41
tomさん、こんにちは^^
sumireです。
そうそう、パンくずリストは設置した方が良いですよね^^
ユーザーも便利になるし、内部リンクも増やせますし。
こうしてみるとLivedoorもよさそうですね〜
もっとちゃんと利用してみようかしら^^
ではでは、応援♪応援♪ぽちっ♪
17. Posted by 野良犬まっさーのアフィリエイトブログ。 2007年04月10日 19:25
こんばんは〜
まっさーです^^
昨日はありがとうございました〜
メール返信しましたので
確認してください^^
いつもながら分かりやすい解説ですね〜
レポートにしないともったいないですよ!!
応援▼・ェ・▼ワン♪
18. Posted by 副業・在宅de100万円をGetせよ! 2007年04月10日 19:39
tomさん
こんばんは
弁当屋のロンリ〜ボ〜イです。
パンくずリスト!
以前私もチャレンジしようと思ったのですが
何か面倒くさそう(笑)だったのでやめました^^;
多分今なら簡単に?できるかもしれないので
やってみようかな♪
ユーザーにとって良いのであれば尚更ですね!
ありがとうございます。
ポチポチポチっと応援です!
19. Posted by 情報商材秘密暴露研究所 2007年04月10日 20:27
tomさん、こんばんは。
こえづかです。
パンくずリスト、ユーザービリティを考えるとぜひ導入したいですね。
応援、ポチ。
20. Posted by 元宣伝マン・スージ@爆転講師 2007年04月10日 21:28
tomさん
スージーです。
いつも訪問、コメント、応援ありがとうございます!
パンくず、これは、僕が配ってるSEOテンプレにもしっかり入ってますよ。
これは、ユーザビリティーの面からも、いいですよね。
またきますね! 応援、ぽち!
21. Posted by 初心者だってネットでお小遣いを稼げる!(bagil) 2007年04月10日 21:34
tomさん こんばんは
bagilです。
パンくずリストは大分前に聞きましたけど
何もやってません(汗
SEOにも内部リンクにも有効なんですよね
tomさん、凄いです。
ありがとうございます。 応援ポチ
22. Posted by ヤフオク情報商材鑑定士 コウ 2007年04月11日 01:09
ヤフオク情報商材鑑定士 コウです。
パンくず、私はしてませんが、
重要ですね^^
応援ポチ!!