はてなブログにパンくずリストをつけてみた

スポンサードリンク

f:id:sasagin:20160409180637j:plain:w500

こんにちは。ブログのカスタマイズに時間を取られまっくている佐伯(@saeki_teizidash)です。
でも、ブログをカスタマイズするのが楽しいとは知らなかった…

今日は、はてなブログにパンくずリストを導入していきますよ！！

パンくずリストとは？

まぁ、最初にパンくずリストとはなんぞや？ということでちょっと調べてきました。

パンくずリストとは、あるWebページのサイト全体の中での位置を、階層構造の上位ページへのリンクを順に並べて簡潔に記したもの。各ページに、そのページの属するカテゴリのメインページへのリンクを「トップ＞コンピュータ＞パソコン＞買い方」のように順番に並べたものがパンくずリストである。
パンくずリストとは - IT用語辞典

実際のパンくずリストはこちら（下記画像）。
f:id:sasagin:20160409180634p:plain
赤枠で囲った部分がパンくずリストです。

ということで、いま自分が見てる記事の場所がわかりやすくなるというメリットがあります。

SEO対策にもなる！

パンくずリストは検索エンジンのクローラー巡回を手助けしてくれる役割を担っています。
まぁ、つけていて損はないってことですね。
googleが自ら出している「Google検索エンジン最適化スターターガイド」に書いてあるから間違いない。
下のリンクからPDFへ飛べますよ。

Google検索エンジン最適化スターターガイド

あとで、ほんとに機能しているか検証してみます。

パンくずリストの導入

基本的に以下のエントリーの「太陽がまぶしかった」さんを参考にしました。
ありがとうございます。

みんな大好きコードをコピペをするだけで簡単にパンくずリストを表示することができます。

まず、以下のコードをデザイン画面のフッターにコピペ。

<!-- CopyRight http://bulldra.http://bulldra.hatenablog.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.setOnLoadCallback(categoryHierarchyModule);
</script>

そして、パンくずリストを表示したい場所（記事の上or記事の下）に以下のコードをコピペ。

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

これで表示を行った場所に表示されたと思います。
※読み込みに少し時間かかる可能性あり

カテゴリーの再設定

パンくずリストの表示設定は以上で終わりですが、以下に当てはまる記事があるブログはカテゴリーを再設定する必要があります。
・１つの記事にカテゴリーを何個も付けている人
・『パンくずリスト』を階層表示にしたい人

「１つの記事にカテゴリーを何個もつけている人」はカテゴリーの分だけパンくずリストが表示されてしまいます。ものすごく見栄えが悪くなってしまいます。
また、「『パンくずリスト』を階層表示にしたい人」は以下の設定をしないといけません。

f:id:sasagin:20160409192443p:plain

親カテゴリ親カテゴリ-子カテゴリ
※ 親カテゴリと子カテゴリの間に、半角ハイフン（-）が必要です。

以上の設定をすると、階層で表示することができます。

f:id:sasagin:20160409193150p:plain

あれ？カテゴリーに「親カテゴリー - 子カテゴリー」なんて追加したらサイドバーのカテゴリー一覧に表示されちゃうじゃん！
安心してください。大丈夫ですよ！
先ほどのソースコードの部分で子カテゴリを認識させない処理が書かれています。

<script type="text/javascript">
google.setOnLoadCallback(categoryHierarchyModule);
</script>

この処理が書かれていないと、ハイフンが入った歪なカテゴリーが表示されてしまうので、気を付けてください。

すこしめんどくさいですが、これをやらないとパンくずリストの意味(見た目的な意味)ががが…

ブログテーマ【Blank】【Innocent】でおきるパンくずリストの不具合修正方法

自分が使用しているブログテーマ【Blank】だと、パンくずリストを表示したときに「＞」の位置がズレるという問題が発生していました。
f:id:sasagin:20160409180651p:plain

不具合修正方法は、開発者さんである「MoonNote」さんの記事でも取り上げられてます。
修正方法は簡単。以下のコードをデザインCSSの部分に追記して下さい。

.categories a{
    display: inline-block;
    float: none;
    margin-right: 0;
}

問題が起こる理由などは、製作者さんである「MoonNote」さんの記事に詳しく書いてありますのでご参照ください。

まとめ

自分のブログでSEO対策というのがどのぐらい貢献してくれるのかわからないですけど、ブログがどんどんカスタムするのは楽しいですね。
どんどん利便性を高めて見栄えのいいブログを作っていきたいと思います。

明日こそ、定時

残業は悪と心に決めてる社畜SEが、定時で帰れた時の暇つぶしに読める記事を綴っています。雑記。好きなこといろいろと…