入社祝金最大60万円!期間工の応募は期間工.jpで!

【はてなブログ】カテゴリの階層化(ツリー化)&カテゴリをアーカイブ表示するカスタマイズ方法

どうも!コウです!

期間工の道のカテゴリを階層化(ツリー化)

カテゴリのアーカイブ表示

この2つのカスタマイズが無事完了しましたので簡単に解説していきます!
参考にしてもらえれば幸いです

 

 

カテゴリの階層化(ツリー化)&カテゴリのアーカイブ表示

 

まず最初に、

はてなブログはカテゴリの階層化に対応していません

これがかなり厄介でして、私のような雑記ブログだとカテゴリがどうしても乱雑してしまいがちになるので見た目が汚くなってしまいます
しかし、はてなブログ運営はカテゴリにあまり関心がない様子?
はてな側がカテゴリの階層化に対応するのを待っていてはいつになるかわかったもんじゃないので自分でやってしまいました

カテゴリの階層化(ツリー化)方法

 

 

はてなブログでのカテゴリ階層化する方法は

まず記事のカテゴリを親カテゴリ子カテゴリに整理します
いきなり編集画面でカテゴリ整理するとミスった時悲しくなるのでまずはメモ帳とか紙に書いて全記事のカテゴリ分けをしましょう

私のブログで例を出すと

親カテゴリ マツダ期間工情報
子カテゴリ 面接~入社まで
子カテゴリ 食事事情
子カテゴリ おすすめ店舗

上記のような感じでカテゴリ分けしました

これがワードプレスとかならそのまま階層化して設定できるのですが、はてなブログでは少し手間がかかります

カテゴリの名前をつける時に

マツダ期間工情報

と、まずは親カテゴリを作りタグの1番最初に設定します
その次に子カテゴリの名前を

マツダ期間工情報-面接~入社まで
マツダ期間工情報-食事事情

こんな感じで 親カテゴリ-(半角ハイフン)子カテゴリ

というカテゴリ名にする必要があります

こうする事でカテゴリが階層化され、マツダ期間工情報という親カテゴリの中に子カテゴリが収納されていきます

 

注意するべきポイントは3つ

・親カテゴリをタグの1番最初に設定する
・親と子カテゴリ以外のカテゴリを設定しない

・親カテゴリと子カテゴリの間は半角ハイフン

この3つです

作ろうと思えば孫カテゴリまで作成できますが、見た目が汚くなるのでおすすめできません
どうにかカテゴリを整理し、親子の関係だけでまとまるようにした方がいいと思います

 

階層化の手順はこれだけです!あとは作業あるのみ!

簡単にいうと全記事のカテゴリ再設定という作業になるわけですが、思ったよりはあっさり終わりました
全記事(170くらい)やって3時間くらいでしたね

ただ、私の場合は記事の半分は日記・雑記という親カテゴリで記事を書いていたのでそこに小カテゴリの 日記・雑記-マツダ期間工編 というカテゴリをまとめて追加することで作業の50%は終わりましたので比較的楽でした
カテゴリが既に多く乱雑しているともっと時間がかかりそうです

はてなブログは記事管理画面で選択した記事にまとめてカテゴリを追加する事ができます(新しいカテゴリでも可能)
しかし、記事についているカテゴリを管理画面から削除することはできないので注意してください
最初に紙に書いてカテゴリを整理したほうがいいと書いた理由がこれです

勢いでカテゴリをまとめてつけてしまうと修正する時にめんどくさくなります
全記事編集画面に入ってカテゴリ付け直しの刑に処されます

私はこの刑を味わいました ぐぬぬ

 

っていうか私Seesaaブログから移行した時に全記事リライトの刑にも処されてるんですよね(これで1週間潰れた)

本当にブログ作る時は計画たててからにしましょう!!
時間がいくらあっても足りなくなりますよ

 

というわけでカテゴリを階層化する際はしっかりと準備してからにしましょう!

 

カテゴリのアーカイブ表示方法

 

カテゴリの階層化が終わった状態だとまだ見た目があまり綺麗ではありません

マツダ期間工情報
マツダ期間工情報-面接~入社まで
マツダ期間工情報-食事事情

こんな感じの表記になっているはずです

見た目は分かりやすくなりましたが、ここで終わるなら階層化した意味があまりないです
これならカテゴリ名の変更とカテゴリの並び替えで出来てしまいますからね
カテゴリの階層化をしたかった理由は見た目をスッキリさせるためですのでここからもう一手間加えます

参考にさせてもらったのはこちらの記事です

 

blog.wackwack.net

 

スクリプトを利用してカテゴリをアーカイブ表示にしてくれるブログパーツを作ってくれています
神です

 

カテゴリの階層化方法も上記のサイト様のほうがはるかにわかりやすいのでそちらを参考にしたほうがいいですよ!

 

カテゴリの階層化が終わっているなら後は1分程度で終わります

・上記のサイトからコードを2箇所にコピペ
・サイドメニューのカテゴリ編集で表示順をアルファベット順にする

以上!

 

これが終わると見た目が変更されているはずです
このサイトのカテゴリを見てもらえればわかります

 

▶マツダ期間工情報

 

こんな感じになっているでしょう?

この▶をクリックすると

▶マツダ期間工情報
  面接~入社まで
  食事事情

 

みたいな感じでアーカイブされた子カテゴリが下にズラッと出てきます
注目すべき点は 

親カテゴリ名が省略されている事!

アーカイブ表示された子カテゴリの先頭に親カテゴリ名がついていないでしょ?
スクリプト導入前と比べてみてください

マツダ期間工情報
マツダ期間工情報-面接~入社まで
マツダ期間工情報-食事事情

 

これが

 

▶マツダ期間工情報
  面接~入社まで
  食事事情

 

こうなったんです

 

 

 

私はこれがやりたかったんだ!!

 

 

 

 

すごいスッキリしたでしょう!!

これで読者の平均滞在時間が伸びてくれればいいんですけどね?
たぶん自己満足で終わるでしょう

 

ちなみに、カテゴリの階層化をしっかり設定すると

ドロップダウン式のグローバルメニューを利用するときに最上段の項目に親カテゴリを設定できるのでおすすめです

期間工の道のグローバルメニューもドロップダウン式にしました
まぁドロップダウン式のメニューってあまりクリックされないみたいですけどね?
ただ、ドロップダウンされなくても一番上が親カテゴリならクリックされた時に小カテゴリも含む全ての記事が表示されるのでサイト滞在時間を伸ばせるはずです

 

ただ、階層化とアーカイブ表示をやる前に、自分のブログでアーカイブ表示が綺麗に表示されるか一度試してからやったほうがいいですよ
テーマによっては文字ずれしてかえって見づらくなる可能性がありますので!

アーカイブ表示が見づらかったら今まで通り階層化させずにカテゴリ名の編集と並べ替えでどうにか見た目スッキリ見せるスタイルでやったほうがいいかもしれません!

 

以上!

カテゴリの階層化&アーカイブ表示のカスタマイズ方法でした!

 

あとがき

 

今回カテゴリの階層化とアーカイブ表示のカスタマイズをして

 

なんではてなブログにはこの機能が標準でついていないんだ!!

 

ってずっと思っていました
私以外にも思っている人は多いハズ・・・・・

ワードプレスならあっさりできるこの機能
ブログ界の2TOPであるはてなブログがこれに対応していないのは理解しかねますよね
特にはてなブログって雑記ブログ向きじゃないですか
カテゴリが乱雑する雑記ブログのためにあるような機能なのになんで対応していないんだろう?
SSL化も大事だと思いますけどこういう細かい部分もなんとかしていってほしいですよね

 

正直これが出来ないせいで私はワードプレスに移行しようと思っていましたからね

やはり分かってはいましたが、カスタマイズ性という部分ではワードプレスが圧勝です
使ってみて実感しましたよ
ただ、はてなブログでも知識と根性さえあれば今回みたいに無理やりカスタマイズする事は可能なんですけどね
まぁかえってワードプレスでやるよりカスタマイズ知識が必要になるんですけどね
完全に本末転倒です

しかし、本当にこのブログパーツ作ってくれた人には感謝です!
あなたのおかげで私はまだはてなブロガーでいることができますよ

ただ、このブログパーツは上記のサイト運営者さんがレンタルサーバーを借りて設置してくれているサービスなので急に使えなくなる可能性があります!

アーカイブ表示にするスクリプトは他にも探せばありますが、私のサイトでしっかり見た目が綺麗になってくれたものはこのサイトものしかなかったんですよね

 

なので、このスクリプトが使用できなくなったら

 

ワードプレスに移行します

 

 

はてなブログがカテゴリの階層化&アーカイブ表示に対応するのが先か
上記のブログパーツが使用できなくなるのが先か

 

私のブログの行く先は、はてな運営次第でございます

 

これからはてなブログでブログを始める人や記事数がまだ少ない人はカテゴリの階層化意識してカテゴリを作っていきましょう
後で階層化したい!ってなるとこんな感じで無駄に時間かかっちゃいますからね

今後何書くかわからなくても、最低限 親カテゴリ だけはしっかり最初の段階で意識して設定しておくと後から楽になりますよー

 

無駄に長くなってしまいましたが、はてなブログでカテゴリの階層化に悩んでいる人がいたら参考にしてください

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA