【はてなブログ】パンくずリストを表示させてカテゴリを階層化してみました
スポンサード リンク
少し前にね、「カテゴリを階層化させることによってアクセスアップ出来る可能性がある」みたいな記事を読んだんです。
いろんなサイトで目にする、
TOP＞親カテゴリ＞子カテゴリ
みたいなやつです。（パンくずリストって言うらしい）
階層はGoogleにも認識されるみたいですし、このようなナビゲーションがあるとユーザも今どこにいるのかがわかりやすくて便利ですよね。
しかし、はてなブログはデフォルトのままだとカテゴリを階層化出来ないんですよねぇ。
どうにか出来ないかと検索してみたら、はてなブログでカテゴリを階層化するプラグインを作成している方を発見。
やっぱりすごい人がいるんですねぇ。
ということで、このブログでも実践することにしました。
カテゴリの階層化方法
カテゴリ分け
まずはブログのカテゴリを階層化できるように作り直します。
ちなみに、今回使用させていただいたプラグインでは「TOP→親カテゴリ→子カテゴリ」の3階層までで、これ以上深い階層は作れないようです。
↑作業前の当ブログのカテゴリはこんな感じでした。
まずはこれを親カテゴリと子カテゴリに分けて行く作業。
↑エクセルでカテゴリ分類しました。
階層化の構造が定まったら、次は全ての記事に割り振っていきます。
この作業が一番面倒です（汗。
割り振り方は記事編集画面から「親カテゴリ」と「親カテゴリ-子カテゴリ」といった感じで2つのカテゴリを選択していきます。
上の画像で言うと「ブログ運営」「ブログ運営-はてなブログ カスタマイズ」という2つのカテゴリを選択して記事を更新。
上の作業をすべての記事で行います。
私の場合は全部で70記事程度だったので1時間弱で終わりましたが、記事が多い方は大変だと思います（汗。
プラグインの設置
↑作成者さん（「太陽がまぶしかったから」bulldraさん）の記事です。
詳しい説明を見たい方は上のページの方がいいと思います。
<!-- 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>
上記のコードを「デザイン」→「フッタ」に貼り付けます。
PCページとスマホページのフッタを別々にしている方はスマホページのフッタにも挿入。
<style>
div #breadcrumb div {
display: inline;
font-size: 13px;
}
</style>
<div id="breadcrumb"></div>
次に上のコードをパンくずリストを表示させたい部分に貼り付けます。
この記述がないとGoogleから階層化が認識されないみたいなので注意です。
上のコードを貼ることで記事タイトル直下のカテゴリ部分には自動でパンくずリストが作成されるので、当ブログでは記事下に貼り付けました。
↑記事タイトル直下のカテゴリ部分
↑上のコードを貼り付けた部分
上の画像のように表示されていれば完成。
↑PCページサイドバーのカテゴリは親カテゴリのみ表示になっています。
結構時間はかかりましたが、うまく設置できたので満足です。
このプラグインを作成したbulldraさんにはホント感謝です。
最後に
以前、当ブログで紹介した「スマホ用ページにカテゴリを表示する」みたいなのを設置している場合は、これのリンクやカテゴリ名を書き直さないといけないのでもうひと手間必要になります。
