記事の最上部に「パンくずリスト」を追加する:ライブドアブログ

   2015/12/05

パンくずリストとは、現在見ているページがウェブサイト(またはブログ)の中でどの位置にあるのかを示してくれる表示です。例えば、この記事のタイトルの上にパンくずリストが出ています。

このページのパンくずリスト:
「NAOのブログ > ライブドアブログのカスタマイズ > 記事の最上部に「パンくずリスト」を追加する:ライブドアブログ」

これがあると、読者がこのページの位置を把握しやすいのと同時に、SEOにも効果があるといわれています。そこで、多くのウェブサイトやブログで導入されています。

ライブドアブログでは標準装備でないので、パンくずリストを表示できるようにしましょう。ここではテンプレート「デフォルト2012」を使います。

パンくずリストの設置方法

最初に、パンくずリストを使っていないブログ画面を確認しましょう。タイトル「テスト」の上にパンくずを設置します。

パンくず2

1 「個別記事ページ」のhtml編集画面を開き、<$MessageBoard$> を探してください。「Ctrl+F」を使うと簡単に探せます。なお、html編集画面を表示する方法については、別記事「ライブドアブログでカスタマイズする方法」をご覧ください。

パンくず1

2 <$MessageBoard$>の下に、下のhtmlを追加してください。

<!--パンくずリスト始-->
<a href="<$BlogUrl$>">トップページ</a>>
<IfArticleCategory1><a href="<$ArticleCategory1Url$>">
<$ArticleCategory1$></a></IfArticleCategory1><IfArticleCategory2>
『<a href="<$ArticleCategory2Url$>">
<$ArticleCategory2$></a>』</IfArticleCategory2>>
<$ArticleTitle ESCAPE$>
<!--パンくずリスト終-->

HTML追加後の様子は以下の通りです。

パンくず3

3 すると、下のキャプチャの通り、パンくずリストが表示されます。

パンくず4なお、このキャプチャでは、パンくずリストが「トップページ> > テスト」となっています。これは、記事のカテゴリを設定していないためです。カテゴリを設定すると、カテゴリ名が入ったパンくずリストが表示されます。以下は例です。

例: 「トップページ> カテゴリ名 > テスト」

なお、管理人がこの設定をするにあたっては、「パンポンペン備忘録」を参考にさせてもらいました。

  • このエントリーをはてなブックマークに追加
  • Pocket