ホームページや無料ブログでパンくずリストを表示する方法をご紹介します。
パンくずリストとは、WEBサイトの記事ページによくある現在の位置を見える化したものです。
パンくずリスト
【パンくずリストの例】
トップ ＞ カテゴリ１ ＞ 記事タイトル訪問者が「自分のいる階層を知りたい時、一つ前のカテゴリへ戻りたい時」に便利にすることができます。
ホームページやブログを作っているなら必須なタグです。
パンくずリストは、HTMLとCSSを追加することで作成できます。
以下にライブドアブログ用に作成したパンくずリストのコードを載せます。
（ライブドアブログはPCページのみしか対応していません。）
HTMLコード（ライブドアブログ向け）
以下のコードを「個別記事ページ」の「<body>〜</body>」へ追加して下さい。
<!--パンくずリストここから-->
<ul id="BreadCrumbs">
<li><a href="<$BlogUrl$>">トップ</a> ＞ </li>
<li><IfArticleCategory1><a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a></IfArticleCategory1><IfArticleCategory2>（<a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a>）</IfArticleCategory2> ＞ </li>
<li><$ArticleTitle ESCAPE$></li>
</ul>
<!--パンくずリストここまで-->
ライブドアブログの場合は選択したテンプレートによって追加位置が異なります。
おかしなところに表示されるようならその都度、追加位置を変えてみて下さい。
独自タグについて調べたい方はこちらで確認して下さい
ライブドアブログの独自タグ：独自タグ一覧（変数） – ライブドアブログのヘルプ（PC向け） (blogpark.jp)
ライブドアブログの挿入位置の例
もし出来ない人は以下を参考にしてみて下さい。
CSSコード（ライブドアブログ向け）
【CSS】
以下のコードをCSSの一番下に追加して下さい。
#BreadCrumbs {
margin: 4px;
padding: 4px;
text-align: left;
}
#BreadCrumbs li {
display:inline;
line-height:100%;
list-style-type:none;
}
その他のWEBサイト向け
他の自作ホームページやライブドアブログ以外のブログを使っている方は、以下のコードを参考にして追加してみて下さい。無料ブログ（ライブドアブログ 、FC2ブログ等）の場合は「独自・変数タグ」が使えるのでそれぞれ修正できると思います。
ライブドアブログの独自タグ：独自タグ一覧（変数） – ライブドアブログのヘルプ（PC向け） (blogpark.jp)
FC2ブログの変数タグ：テンプレート用 変数一覧 | マニュアル | FC2ブログヘルプ
【HTML】
<!--パンくずリストここから-->
<ul id="BreadCrumbs">
<li><a href="（トップページのURL）">トップページ</a> ＞ </li>
<li><a href="（カテゴリのURL）"></a> ＞ </li>
<li>（記事ページのタイトル）</li>
</ul>
<!--パンくずリストここまで-->
【CSS】
#BreadCrumbs {
margin: 4px;
padding: 4px;
text-align: left;
}
#BreadCrumbs li {
display:inline;
line-height:100%;
list-style-type:none;
}