【はてなブログ】カテゴリを階層化してみよう

カテゴリの階層化。
グローバルメニューの様にメインカテゴリを選択すると
サブカテゴリが表示されるやつです。

見た目もかっこいいし、SEO的にもいいみたいなので導入してみました。
ちょっと大変だけど頑張ってみてね。

ちなみにやるなら記事が少ないうちにやったほうがいいです。
記事数が多いと地味な作業がたくさん待っています…

カテゴリを階層化するための下準備

カテゴリを階層化するにはいろいろ準備が必要です。
まずはその下準備をしましょう。

WorldWorldWorld様の小さな星がほらひとつ、
【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りましたを参考にしました。

フッタにスクリプトコードを貼り付ける

デザイン→スパナマーク→フッタに移動し、下のコードを貼り付け。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://hatena.wackwack.net/v1.1/js/breadcrumb.min.js"></script>
<script src="https://hatena.wackwack.net/v1.1/js/category_archive.min.js"></script>

コードのうち、下の部分は既に他のカスタマイズ等で導入している場合は省略可能です。
むしろ多重読み込みになるので省略したほうがいいと思います。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

jqueryと言う用語に見覚えがあるならおそらくすでに導入されていると思います。

ヘッダにCSSを貼り付ける

デザイン→スパナマーク→ヘッダをクリックします。

タイトル下に下のCSSを貼り付け。

<link type="text/css" rel="stylesheet" href="https://hatena.wackwack.net/v1.1/css/fulldisplay.min.css"/>

パンくずリストも使う場合

デザイン→スパナマーク→記事に移動。

一番下のパンくずリストを表示するにチェックをします。

カテゴリを階層化する

下準備ができたら、今度はカテゴリを作っていきます。
たくさん記事があるとここが大変です。

カテゴリを作るにあたっての注意

カテゴリを作るには決まりがあります。
これを守らないと機能しません。

・メインカテゴリだけのカテゴリを作って記事のカテゴリに設定する
・サブカテゴリはメインカテゴリの後ろに-（半角）を付けて設定する。
・記事にカテゴリを設定するときは、メインカテゴリ、サブカテゴリの順に設定する。

メインカテゴリを「ブログ」、サブカテゴリを「カスタマイズ」にしたい場合、

①メインカテゴリの「ブログ」カテゴリを作って設定する。

②サブカテゴリの「ブログ-カスタマイズ」カテゴリを作って設定。
※-は半角です。
カテゴリを入力している勢いで全角にしないようにしましょう。

③設定したカテゴリの順が左からメインカテゴリ「ブログ」、
サブカテゴリ「ブログ-カスタマイズ」の順になっているか確認。

以上の手順で設定していきます。

ちなみに「ブログ」「ブログ-カスタマイズ」「ブログ-カスタマイズ-はてなブログ」と
半角の-でつなげることで、階層を増やすこともできます。

その場合は、一個上の階層カテゴリに半角-を付けてカテゴリ名を入力します。

2階層目が「ブログ-カスタマイズ」で、
そこにさらに「はてなブログ」のサブカテゴリを増やしたい場合、
2階層目は「ブログ-カスタマイズ」なので、「ブログ-カスタマイズ-はてなブログ」の
カテゴリを設定します。

記事にカテゴリを設定するときもメインカテゴリ、サブカテゴリ１、サブカテゴリ２の順で
設定します。

どこまでできるのかわかりませんが、試しに6層までやってみましたができました。
そんなにやってもうざいだけだと思いますけど…

ただし、何階層にしてもサブカテゴリは一気に表示されます。

複数の異なるカテゴリを設定した場合

複数の異なるカテゴリを同一記事に設定した場合、階層の有無に関わらず、
先頭のカテゴリがパンくずリストに表示されます。

たとえば、「ブログ」「ブログ-カスタマイズ」「ツール」「ツール-画像編集」の
4つのカテゴリがあったとします。

「ブログ」「ブログ-カスタマイズ」「ツール」「ツール-画像編集」の順で設定した場合、
その記事のパンくずリストはトップ＞ブログ＞カスタマイズ＞記事のタイトルとなります。

また、「ブログ」「ツール」「ツール-画像編集」の順でカテゴリを設定した場合、
トップ＞ブログ＞記事のタイトルとなります。

ただ、パンくずリストの表示だけですので、
設定したカテゴリはすべてきちんと機能しています。

カテゴリをブログに設置する

ここまで来たらあとはブログに設置するだけです。

デザイン→スパナマーク→サイドバーに移動。

一番下のモジュール追加をクリックし、カテゴリーを追加します。
すでにカテゴリーを使っている人は追加する必要はありません。

ここで1つ注意してほしいのが、並び替え順をアルファベット順に変更することです。

初期ではたぶん記事が追加された順になっていると思います。

並び替え順をアルファベット順に変更しないとうまく機能しないので
必ず変更してください。

あとはサイドバーの表示したい位置にカテゴリをドラッグして
表示位置を決めれば完成です。

うまくいかないときは？

私もそうだったのですが、最初にやったときはうまくいきませんでした。

なので、参考になりそうなものをいくつか挙げてみます。

作成したカテゴリがそのまま表示されてしまう場合は

メインカテゴリをブログ、サブカテゴリをカスタマイズにしたのに、
ブログのカテゴリとブログ-カスタマイズのカテゴリが両方とも
カテゴリに表示されてしまう場合です。

この場合は各コードの貼り付けミスか、カテゴリの設定が間違っています。

サブカテゴリを設定するときの-は半角ですので気を付けてください。

▶がカテゴリの上に表示されてしまう場合は

どうやら利用しているテーマによってはこうなってしまうようです。
このブログのテーマinnocentではこの症状が出ました。

設定→デザイン→デザインCSSに下のコードを追加すると
横に表示されるようになります。

.hatena-module-category .hatena-urllist li a {
display: inline-block;
}

スマホでうまく機能しない場合は

このサイトはレスポンシブだからか特に問題もなくスマホでも機能しているのですが、
レスポンシブではない場合はうまく機能しないのかな？

その場合は、クラウディア様 (id:shalala_claudia)の
はてなブログ　スマホ版のカテゴリーとパンくずリストの階層化するのに大事な一つのことに解決法が書かれていますので参考にしてみてください。

デザイン → スマホ → 記事 のところにある、パンくずリストのチェックを外すこと。チェックをしたままだと、はてなブログの公式パンくずリストが適用されてしまい、うまく階層化表示できないので。

だそうですよ。

子カテゴリを最初から表示させておきたい場合は

<script type="text/javascript">
$("span[id^=closed-]").ready(function(){
$("span[id^=closed-]").click();
})
</script>

このコードをフッタに追加すれば、子カテゴリを最初から表示した状態にできます。