のんびりよりみちきっぷ

考えた事や実施したことをのんびりと。

これは見やすい。はてなブログ カテゴリーの階層化

ブログの記事数も徐々に増えてきて、カテゴリーにまとまりがなくなってきたので階層化して整理することにしました。

 

いつくかのブログを見てみましたが、一番シンプルだったこちらを参考にさせていただきました。

blog.wackwack.net

簡単にできましたね。早めにやっておいてよかったです。

 

環境を整える

1,ヘッダへの記述

ヘッダのHTMLに以下を追加します。 

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

f:id:yorimichi_ticket:20170610212918p:plain

 

2,フッタの記述

フッタのHTMLに以下を追加します。

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

f:id:yorimichi_ticket:20170610213051p:plain

 

3,サイドバーの設定

デザイン→カスタマイズ→サイドバー→カテゴリー→編集で「アルファベット順」にします。

f:id:yorimichi_ticket:20170610213146p:plain

 

ブログのカテゴリー変更 

"親カテゴリー名"-"子カテゴリー名"にすることでカテゴリーが階層になります。

 

今回の例:

親は「WEB/PC」で子を「はてなブログ」にしたいので、最初に「WEB/PC」を選んでから、その後「WEB/PC-はてなブログ」を選びました。

WEB/PCとはてなブログの間は半角のハイフンです。

 

親のカテゴリーは必ず登録が必要で、親のカテゴリーを先に登録します。

f:id:yorimichi_ticket:20170610213446p:plain

 

設定が完了すると、

f:id:yorimichi_ticket:20170610213954p:plain

こうなりました。

 

記事が整理され、見やすくなりました!