あんこぱんのつぶやき

格安SIMフリースマートフォンを中心としたモバイルモバイルの情報ブログ。ときどき雑記も掲載します!

【はてなブログ】これで記事階層が分かるパンくずリストを設置してみました

スポンサーリンク

どうもこんにちは、ブログ住民のあんこぱんです。

はてなブログは、以前の記事「はてなブログProの設定の備忘録、SEO効果もある!?カテゴリーをまとめて整理してみました」でも掲載しましたが、記事はタグ付けではなくカテゴリ分類の位置付けです。

【はてなブログ】SEO効果もある!?カテゴリーをまとめて整理してみた - あんこぱんのつぶやき

なので、タグ付けのように多くのカテゴリに属していくと、1つの記事が3つも4つもカテゴリに位置付けられます。

記事の階層を考えると、1つの記事が複数の階層に属することは、あまり好まくありません。はてなブログをカスタマイズし、パンくずリストを設置する場合、複数の階層に位置付けられてしまいます。

なので、はてなブログに、パンくずリストを設置する場合は、カテゴリの見直しも必要です。

話がカテゴリの話になりましたが、そこで今回は、はてなブログProの設定の備忘録として、パンくずリストの設置方法をご紹介します。

パンくずリストとは

d.hatena.ne.jp

ウェブサイトで、閲覧者が現在サイト内のどの位置にいるかを階層表示するリスト。

はてなブログにパンくずリストを設置する

パンくずリストの必要性

基本的に、はてなブログには、パンくずリストを表示する機能がありません。

しかしながら、記事がどの階層に属しているか、ブログが体系的に整理されているかなど、情報の検索では、ウェブサイトの体系化はとても重要な要素になります。

なので、はてなブログにパンくずリストを設置し、検索されやすいブログにカスタマイズすることも、1つのSEO対策になります。

はてなブログにパンくずリストを設置する方法

はてなブログにパンくずリストを設置する方法で参考にしたページはこちらです。

とても簡単にパンくずリストを設置できます。はてなブログのユーザーの皆さんに感謝申し上げます。

www.interest-blog.com

 

はてなブログにパンくずリストを設置する方法

  • 次のコードをコピーします。

<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>

  • コピーしたコードを、PC用のフッタ(HTML)部分に貼り付けます。

f:id:ankopan01:20150617075327p:plain

  • 次のコードをコピーします。

<style>
div #breadcrumb div{ display: inline;font-size:13px;}
</style>
<div id="breadcrumb"></div>

  • コピーしたコードを、PC用記事下(HTML)部分に貼り付けます。

f:id:ankopan01:20150617075353p:plain

以上で設定は完了です。意外と簡単にパンくずリストを設置することができました!

f:id:ankopan01:20150616210333p:plain

まとめ

このようにとても簡単に、はてなブログにパンくずリストを設置できます。

1つの記事に複数のカテゴリを設定していると、複数のパンくずリストが表示されてしまうので、事前にカテゴリを整理しておいたほうがいいと思います。ちなみに筆者は、1記事1カテゴリになるよう整理しました。

パンくずリストはSEO対策のほか、記事がどの階層にあるか分かりやすいので、ユーザビリティにおいても評価が高くなります。

とても簡単な方法ですので、はてなブログのカスタマイズの参考にしてください。