ホームページや無料ブログでパンくずリストを表示する方法をご紹介します。

パンくずリストとは、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;
}