はてなブログ

カテゴリの階層化に挑戦

投稿日:2018-04-16 更新日:

現在、このblogはWordPressに移行済みです。(2018/07末)

カテゴリが増えた

何も考えずに記事書いてるから、カテゴリが無限増殖しはじめました。
イメージとしては↓な感じ。

増殖するカテゴリー

これは階層化の時に設定したカテゴリだからちょっと多めです。
でも、遠くない未来、どうせこんな感じになるのが目に見えます。
取り返しがつかなくなるか、手間ひまかけて修正作業しなくてすむようにカテゴリ分けを考えることにしました。

親カテゴリーを考える

カテゴリ分けと言っても、はてなブログだとサブカテゴリに対応していない…
それはさすがにキツいのでカテゴリの階層化を行います。

階層化する時に大事なのが親カテゴリ。

ブログで使っているテンプレート「Brooklyn」ではナビゲーションバーのリンクが5つまで対応しているので、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

Pick up

1

iPadカーナビ化計画 iPadを購入した時には正直考えてなかったというか思いついてもいなかった。 ただ単にFGO等のゲームをストレスフリーでやりたい一心でiPadを購入しただけで… カーナビ化を考え ...

2

メインストーリーが一段落ついたので、農家として働くよ! オトメロン農家はじめました 高速&高品質畑を作り、カマイタチで刈ること数回。 Lv10のオトメロンが完成しました! 祝!Lv10のオトメロンの種 ...

3

ことの起こり 前回、オルタネーターが壊れたお話の記事をあげました。 その日の夜に急性腸炎にかかりましてね。えぇ… 眠れぬ夜を過ごした後、病院に行ったんですよ。 診察して点滴も打って、薬も貰って、すごく ...

4

超久しぶりにルーンファクトリー4を触ってみました。 セーブデータでは結婚してるけど、子どもは居ない状態。 はたして、私はこの後何をするつもりだったのか? 全く思い出せないので、最初からやります。 GW ...

5

ざっくりとWX04 vs W05の比較 WX04とW05 WX04 W05 大きさ いい感じ ちょっと横に大きい 電池持ち 許容範囲 W04よりはるかにもつ 発熱 めっちゃする そんなにしない 繋がり ...

-はてなブログ
-, ,

Copyright© ruricatのその他いろいろ , 2018 All Rights Reserved.