やぁん？ヤドクイーンです。
たまにはてなブログで見かける階層化されたカテゴリー。
憧れて《ヤドめで》にも実装しました！
こんなやつ↓
最初に言っておきます。
やるなら、ブログ開設初期（記事数が少ないうち）がいいですよ・・・
スポンサーリンク
はてなブログのカテゴリー
はてなブログには「カテゴリー」という機能があります。
はてなブログでは、記事を投稿するときにカテゴリーを付けて、記事を分類することができます。1つの記事に、複数のカテゴリーを付けることができます。
カテゴリーは記事タイトルの下などに表示され、カテゴリー名をクリックすると、そのカテゴリーの記事だけを一覧することができます（スマートフォンでは記事下に表示することもできます）。
出典：記事にカテゴリーを設定・表示する - はてなブログ ヘルプ
カテゴリーの階層化の方法
階層化する前と後（ビフォーアフター）
階層化の方法の前に、先に結果からお伝えします。
階層化する前と後（ビフォーアフター）をご覧ください。
※スマホから見たとき
スッキリ！！
階層化とあわせて、記事数の削減もしました。
ちなみに、階層化したものを全て展開すると以下のようになります。
※パソコンから見たとき
展開すると長い（笑）
階層化の方法
さて、ここからが本題です。
カテゴリーの階層化の方法は、こちらのブログを参考にさせていただきました。ありがとうございました。
（参考というよりそのまま活用させていただきました。）
階層化の手順は自分の備忘録のために残しておきます。
なお、コードは全て先程のサイトからの引用になります。
- 公式パンくずリストの有効化
- カテゴリーの階層化
- カテゴリーの表示設定
- スクリプトの設定
- スタイルシートの設定
具体的な内容は以下のとおりです。詳しくは引用元のサイトをご覧ください。
②カテゴリーを「親-子」というように設定する
③カテゴリーの表示順を「アルファベット順」にする
④「 デザイン＞ カスタマイズ＞フッタ」へ以下のコードを入力
<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>
⑤「 デザイン＞ カスタマイズ＞ヘッダ＞タイトル下」へ以下のコードを入力
<link type="text/css" rel="stylesheet" href="https://hatena.wackwack.net/v1.1/css/fulldisplay.min.css"/>
注意点（実際に私がハマった罠）
階層化の作業での注意点があります。
注意点：１つ目！
カテゴリーを「親-子」というように設定するときの「-」は半角のハイフンです。
私はなぜか長音の「ｰ」を使用していて、上手くいかずに焦りました（笑）
注意点：２つ目！
カテゴリーの並びをアルファベット順にすると、当然アルファベット順に並びます。
我がブログの場合、そのままだと１番上に「ゲーム」がきます。
しかし、ヤドン特化ブログのため１番上はヤドンにしたい！
ということで、ヤドンのカテゴリーの前に記号「◆」をつけることで解決しました。
同様の理由でヤドランとヤドキングにも記号「◇」をつけています。
記号「◆」の方が「◇」よりもアルファベット順だと先になるので、ヤドンだけ「◆」と黒色になっています。
（本当は、「ヤドラン」→「ヤドキング」という並びにしたいのですが、記号が増えすぎるのもブサイクなので諦めました。）
【体験談】記事数が多いと作業が大変
ここからはブログのカスタマイズではなく、私の体験談となります。
２００記事以上を修正したよ！
なんと私はブログを開設して２年半が過ぎた頃、記事数だと２００記事を超えた頃に、カテゴリー階層化の作業を行いました（笑）
疲れました
今更ながらこの作業をしたのは、自分の書いた記事をきちんと分類・整理したかったから。
ブログ開設当初はまだまだ方向性が決まっていなくて、
ヤドンのことを書きたいけどそんなに書くことないかもな〜
と甘くみていました。
ところが、ヤドン人気による怒涛のグッズ展開や香川県とのコラボなど、ヤドンに関する出来事がたくさんあり、このブログも盛り上がって（？）きました。
ここまでがむしゃらに記事を書き続けてきました
しかし、記事の分類がいまいちできていないせいで、あまり読んでもらえない記事があるのはもったいないと感じ、この度の階層化作業に至りました。
ブログの柱が見えてきたよ！
記事数が多いからこそのメリットも感じました。
記事冒頭で、「最初に言っておきます。やるなら、ブログ開設初期（記事数が少ないうち）がいいですよ・・・」と書きましたが、前述のとおり本ブログは開設当初は方向性・柱が見えていませんでした。
継続して記事を積み重ねてきたからこそ、自分のブログの方向性・柱が見えてきて、カテゴリーの階層化がしやすかったとも感じました。
疲れました（２回目）
ヤドン特化ブログに磨きをかけるため、関係ない記事を整理中。カテゴリー整理もやっているので果てしないです・・・
— ヤドクイーン《ヤドめで》 (@yadomede_queen) 2022年1月25日
おやすみなさい😴
カテゴリー別の記事一覧の表示もしました！
上記の作業でカテゴリーの階層化は完了ですが、もう一手間かけて「カテゴリー別の記事一覧」の表示もしました！
活用させていただいたサイトはこちらです。ありがとうございました。
- カテゴリー別にすべての記事一覧を表示する | 全カテゴリー別記事一覧ページ | はてなブログカスタマイズ - IT the Best
- 【コピペok】はてなブログでユーザー向けのカテゴリー別サイトマップページを作成する 表示内容,スタイルの変更可能 | はてなブログカスタマイズ はてなブログツール - IT the Best
完成したものはサイトマップの１番下にあります。
よかったらあわせてご覧ください。
スポンサーリンク
おわりに
この記事を読んでくださったあなたが、
「カテゴリーの階層化をやってみようかな」
と思ってくれたなら、私の努力が報われる気がします（笑）
本ブログでは他にもはてなブログのカスタマイズ関連の記事を投稿しています。
あわせて読んでってね♡