カテゴリの階層化に挑戦

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

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

2

レオン・カルナクの狐さんたちかとかサクサク倒してルーンプラーナへLet's Go! ルーンプラーナ 1層目 堅い! 今までサックリ倒してきたから、久々のこの感じ。 一気に敵のレベルあがったよね… 1層 ...

3

念願の無人島移住 まずは受付 まずは手続き 何事もまずは手続きですよね。 まめきち&つぶきちが無人島移住パッケージの受付をしていたので申し込みします。 浮かれた格好をしている パスポートの写真を撮ると ...

4

現在のメインプレイ環境 マインクラフト(統合版) iPad Pro 10.5 デュアルショック4 統合版にした理由 マイクラしてる友達がswitch版だったからruricat 以上!w ちなみに私がP ...

5

露天掘りしてみたところ… まず最初に何が起きたかお話しましょう。 まぁ、なんとなくおわかりでしょうが、湧きませんでした。 1チャンク露天掘りしたのに湧きませんでした。 つらい。 スライムチャンクの確認 ...

-はてなブログ
-, ,

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