現在、このblogはWordPressに移行済みです。（2018/07末）
カテゴリが増えた
何も考えずに記事書いてるから、カテゴリが無限増殖しはじめました。
イメージとしては↓な感じ。
増殖するカテゴリー
これは階層化の時に設定したカテゴリだからちょっと多めです。
でも、遠くない未来、どうせこんな感じになるのが目に見えます。
取り返しがつかなくなるか、手間ひまかけて修正作業しなくてすむようにカテゴリ分けを考えることにしました。
親カテゴリーを考える
カテゴリ分けと言っても、はてなブログだとサブカテゴリに対応していない…
それはさすがにキツいのでカテゴリの階層化を行います。
階層化する時に大事なのが親カテゴリ。
ブログで使っているテンプレート「Brooklyn」ではナビゲーションバーのリンクが5つまで対応しているので、5つに絞り込みます。
これがなかなか難しい。
書きたいことを好きに書いているのでブログ内容が散らかってるんですよね。
まさに雑記ブログ。
最終的に
- ガジェット
- ブログ
- 沖縄
- 趣味
- 雑記
趣味の中にハンドメイドやゲーム、雑記に車のことや文鳥のことなどを入れます。
…今後もこれで大丈夫だろうか。
まぁ、なんとかなるよね。
カテゴリ階層化に成功
はてなブログにはサブカテゴリの機能が無いので、スクリプトを使用して階層化します。
こちらのサイト様の手順通りに行えば簡単に階層化できます。
こちらのサイト様の「4.スクリプトの設定」まで行いました。
「4.スクリプトの設定」に記載のソース一行目のjQuery読み込みは既に記述されているのであれば抜いていいと思います。
重複するとサイトの読み込み速度に影響が出るらしいので。
階層化に成功したものの…
階層化には成功しましたが、ちょっと「コレジャナイ」感がありますよね。
「5. スタイルシートの設定」を行っていないからというのもあります。
ただ、「5. スタイルシートの設定」を行うと文字色が黒に固定されたりして当サイトでは違和感が出ます。
ということで、スタイルシート（CSS）は自分好みに設定しました。
スタイルシートの設定
/* カテゴリ階層化の幅 */
ul.hatena-breadcrumb-plus-child1{
padding-left:30px;
}
ul.hatena-breadcrumb-plus-child2{
padding-left:15px
}
/* カテゴリの▶の部分の色とカーソル */
.hatena-breadcrumb-plus-toggle-button{
cursor:pointer;
color : #707070;
}
/* カテゴリを一列に表示して枠線を消す */
div.hatena-module-category div.hatena-module-body ul li {
display: block;
float: none;
border: none;
}
こちらのソースを設定→デザイン→スタイルCSSへ追加します。
そうすると、こうなります。
きれいになったよ！
それっぽくなりましたよね。
細かい色とか隙間とか気になる部分はまだまだありますが、形になったので良しとしますw
