読者です 読者をやめる 読者になる 読者になる

いがちゃん’s雑記帳 ~ 能天気で天然な男 ~

プライベートや買い物していいもの見つけた時♪

パンくずリストを簡単に設置する方法!

パンくずリスト

SEO対策に『パンくずリスト』っていうのが効果あるらしいので、当ブログにも設置してみました。日頃、検索エンジンを使ってはいるけどあまり気にしたことなかった。簡単に『コピペだけでOK』な『パンくずリスト』の設置方法を紹介します。

パンくずリスト』とは?

パンくずリスト(breadcrumb list)は、ウェブサイト内でのウェブページの位置を、ツリー構造を持ったハイパーリンクの一覧として示すもの。パンくずナビ、トピックパス、フットパスとも言う。英語では単に“breadcrumbs”または“breadcrumb navigation”というのが一般的である。
ウェブディレクトリのような大規模なウェブサイト内で、利用者がサイト内での現在位置を見失わないようにし、ナビゲーションを助けるために使われる。「パンくずリスト」という名前は、童話『ヘンゼルとグレーテル』で、主人公が森で迷子にならないように通り道にパンくずを置いていった、というエピソードに由来する。
ウィキペディア』より抜粋

パンくずリスト』を設定する方法

はてなブログだと以下の通りコピペするだけで簡単に設定できます。
「デザイン」⇒「カスタマイズ」⇒「フッター」に下記のコードをコピペ。


<!-- パンくずリスト -->

<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/breadcrumb.js" charset="utf-8"></script>
<script type="text/javascript">
google.set0nloadCallbach(categryHierarchyModule);
</script>

<!-- パンくずリストおわり -->

次に以下のコードを「記事」⇒「記事下」にコピペ。


<!-- パンくずリスト -->
<style>
div #breadcrumb div {
    display: inline;
    font-size: 13px;
}
</style>
<div id="breadcrumb"></div>
<!-- パンくずリスト おわり-->

カテゴリー設定

この『パンくずリスト』の設置方法では、カテゴリーが『パンくずリスト』になるので、1つの記事にカテゴリーを何個も付けていたり、『パンくずリスト』を階層表示にしたい人は、カテゴリーを再び付けなおす必要があります。
もし、『パンくずリスト』を階層表示にしたい場合は、以下のようにしてください。

親カテゴリ 親カテゴリ-子カテゴリ
※ 親カテゴリと子カテゴリの間に、半角ハイフン(-)が必要です。
このように設定すると、しっかりと階層で表示してくれます。

参考にした記事はこちらになります。
ありがとうございます。

wepli-dot2.hatenablog.com

関連記事

glory0301.hatenablog.com

 


ウェブログ ブログランキングへ